3.9 修改音视频模块,修改开始上课样式

张桐
Commit 02f9ef1a901bc32ee07c5c8f74bef6d13b32feb9 02f9ef1a 1 parent a18b3e6b
css/amazeui.min.css
css/main.css
index.html
js/McuClient.js
src/main.js
src/nativeVideo.js
src/videoWithFlash.js
--- a/css/amazeui.min.css
查看文件 @02f9ef1
+++ b/css/amazeui.min.css
查看文件 @02f9ef1
@@ -1732,7 +1732,7 @@ a.am-btn-default:visited {
 .am-btn-primary {
     color: #fff;
     /*background-color: #0e90d2;*/
-    border-color: #0e90d2
+    /*border-color: #0e90d2*/
 }
 a.am-btn-primary:visited {
@@ -1741,11 +1741,11 @@ a.am-btn-primary:visited {
 .am-btn-primary.am-active, .am-btn-primary:active, .am-btn-primary:focus, .am-btn-primary:hover, .am-dropdown.am-active .am-btn-primary.am-dropdown-toggle {
     color: #fff;
-    border-color: #0a6999
+    /*border-color: #0a6999*/
 }
 .am-btn-primary:focus, .am-btn-primary:hover {
-    background-color: #0c79b1
+    /*background-color: #0c79b1*/
 }
 .am-btn-primary.am-active, .am-btn-primary:active, .am-dropdown.am-active .am-btn-primary.am-dropdown-toggle {
@@ -1755,7 +1755,7 @@ a.am-btn-primary:visited {
 .am-btn-primary.am-disabled, .am-btn-primary.am-disabled.am-active, .am-btn-primary.am-disabled:active, .am-btn-primary.am-disabled:focus, .am-btn-primary.am-disabled:hover, .am-btn-primary[disabled], .am-btn-primary[disabled].am-active, .am-btn-primary[disabled]:active, .am-btn-primary[disabled]:focus, .am-btn-primary[disabled]:hover, fieldset[disabled] .am-btn-primary, fieldset[disabled] .am-btn-primary.am-active, fieldset[disabled] .am-btn-primary:active, fieldset[disabled] .am-btn-primary:focus, fieldset[disabled] .am-btn-primary:hover {
     background-color: #0e90d2;
-    border-color: #0e90d2
+    /*border-color: #0e90d2*/
 }
 .am-btn-group .am-btn-primary, .am-btn-group-stacked .am-btn-primary {
--- a/css/main.css
查看文件 @02f9ef1
+++ b/css/main.css
查看文件 @02f9ef1
@@ -248,10 +248,10 @@ height: 1080px;
     margin-right: 10px;
 }
-.header button:hover {
-    background: #f2f2f2;
-    color: #354755;
-}
+/*.header button:hover {*/
+    /*background: #f2f2f2;*/
+    /*color: #354755;*/
+/*}*/
 .classroom {
     float: left;
     margin-left: 20px;
@@ -290,6 +290,7 @@ height: 1080px;
     /*修改amazeui.min.css*/
 .classNowBtn{
     margin-right: 10px;
+    border:none;
 }
     .exitClose{
         position:absolute;
@@ -302,7 +303,7 @@ height: 1080px;
         width: 88px;
     }
     .am-active > .am-dropdown-content{
-    z-index: 1;
+    z-index: 3;
     }
     .am-btn-primary.am-active, .am-btn-primary:active, .am-dropdown.am-active .am-btn-primary.am-dropdown-toggle{
@@ -312,6 +313,7 @@ height: 1080px;
         color: #2a3e4d;
     }
     .am-dropdown-content {
+
         min-width: 0;
         z-index: 3000;
         left: -12px;
@@ -370,6 +372,7 @@ height: 1080px;
         margin-top: 5px;
         margin-bottom: 5px;
         position: relative;
+        cursor: pointer;
     }
     .am-dropdown-content .am-dropdown-content-span{
         margin-left: 7px;
@@ -886,6 +889,9 @@ height: 1080px;
 }
+.file-ul li:hover{
+    background: #3498db;
+}
 .forSwitch{
     cursor: pointer;
 }
@@ -1390,6 +1396,7 @@ height: 1080px;
     margin: 0px 5px 0px  5px;
 }
+
 .teacherVideo-videoBg{
     display: none;
     position: absolute;
@@ -2760,7 +2767,7 @@ canvas {
         float: right;
         margin-left: 5px;
         height: 30px;
-        line-height: 26px;
+        line-height: 28px;
     }
     .left .control .total-page span{
         font-size: 12px;
@@ -2810,83 +2817,6 @@ canvas {
         background:url("../images/left-pre.png") no-repeat;
     }
-    /*直播中*/
-
-    .live {
-        position: absolute;
-        width: 26%;
-        height: 34%;
-        bottom: 20%;
-    }
-
-    .live i {
-        width: 4%;
-        height: 10%;
-        position: absolute;
-        bottom: 0;
-        background-color: red;
-    }
-
-    .live i:nth-of-type(1) {
-        left: 0;
-    }
-
-    .live i:nth-of-type(2) {
-        left: 6px;
-    }
-
-    .live i:nth-of-type(3) {
-        left: 12px;
-    }
-
-    .live i:nth-of-type(4) {
-        left: 18px;
-    }
-
-    .live.active i:nth-of-type(1) {
-        -webkit-animation: wave 0.9s linear infinite;
-        animation: wave 0.9s linear infinite;
-    }
-
-    .live.active i:nth-of-type(2) {
-        -webkit-animation: wave 0.7s linear infinite;
-        animation: wave 0.7s linear infinite;
-    }
-
-    .live.active i:nth-of-type(3) {
-        -webkit-animation: wave 0.8s linear infinite;
-        animation: wave 0.8s linear infinite;
-    }
-
-    .live.active i:nth-of-type(4) {
-        -webkit-animation: wave 0.6s linear infinite;
-        animation: wave 0.6s linear infinite;
-    }
-
-    @-webkit-keyframes wave {
-        0% {
-            height: 6px
-        }
-        50% {
-            height: 20px
-        }
-        100% {
-            height: 12px
-        }
-    }
-
-    @keyframes wave {
-        0% {
-            height: 8px
-        }
-        50% {
-            height: 20px
-        }
-        100% {
-            height: 12px
-        }
-    }
-
@@ -2941,20 +2871,25 @@ canvas {
         border: 1px solid #fff;
     }
-
+    .right{
+    width: 26.5%;
+    }
     .studentVideo{
-        width: 256px;
-        height: 192px;
-        margin-bottom: 5px;
+        /*width: 256px;*/
+        /*height: 192px;*/
+        /*margin-bottom: 5px;*/
+        width: 240px;
+        height: 196px;
     }
     .studentVideo img{
         width:100%;
         height: 100%;
     }
     .teacherVideo{
-        width: 256px;
-        height: 192px;
-
+        /*width: 256px;*/
+        /*height: 192px;*/
+        width: 240px;
+        height:196px;
     }
     .teacherVideo img{
         width: 100%;
@@ -2962,8 +2897,8 @@ canvas {
     }
     .chat{
-        width:256px;
-        height: 146px;
+        width:240px;
+        height: 142px;
         bottom: 5px;
     }
@@ -2976,7 +2911,7 @@ canvas {
     }
     .chat .msg{
-        width:250px;
+        width:233px;
         height: 105px;
         background: #f2f2f2;
@@ -3079,13 +3014,13 @@ canvas {
     .input-send{
-        width: 256px;
+        width: 238px;
         height: 38.4px;
         line-height: 38.4px;
     }
     .input-face{
-        width: 205px;
+        width: 186px;
         height: 21.3px;
         line-height: 21.3px;
         float: left;
@@ -3102,7 +3037,7 @@ canvas {
     .chat .input-face input{
         height: 20px;
         line-height: 20px;
-        width: 178px;
+        width: 159px;
         margin-bottom: 4px;
     }
@@ -3735,6 +3670,7 @@ canvas {
     }
     /*输入4个参数*/
     .fourParamsOut{
+
         display: none;
         width: 1366px;
         height: 768px;
@@ -3792,7 +3728,7 @@ canvas {
     .box{
         width: 853.3px;
-        height:575.3px;
+        height:587.3px
     }
     .header{
         height: 40px;
@@ -3905,7 +3841,9 @@ canvas {
-
+    .right{
+        width: 28.1%;
+    }
@@ -4401,7 +4339,7 @@ canvas {
     .canvas_container {
         position: relative;
         width: 585px;
-        height: 477px;
+        height: 489px;
         border: none;
         overflow-y: hidden;
         overflow-x: hidden;
--- a/index.html
查看文件 @02f9ef1
+++ b/index.html
查看文件 @02f9ef1
@@ -163,11 +163,11 @@
         </div>
         <!--右侧未开始-->
-        <div class="classStatus am-dropdown " data-am-dropdown>
-            <button type="button" class="am-btn am-btn-primary  classNowBtn" data-am-dropdown-toggle><span
+        <div id="classStatus" class="classStatus am-dropdown " data-am-dropdown>
+            <button id="classNowBtn" type="button" class="am-btn am-btn-primary am-dropdown-toggle classNowBtn" data-am-dropdown-toggle><span
                     id="span-iconfont" class="span-classes iconfont">&#xe62b;</span><span id="class-now" class="classNow">未开始</span>
             </button>
-            <ul class="am-dropdown-content">
+            <ul id="amDropdownContent" class="am-dropdown-content">
                 <li class="am-dropdown-content-li-begin"><span id="am-dropdown-content-span-1" class="am-dropdown-content-span iconfont">&#xe61d;</span>
                     <button id="classes-status-begin" type="button"
@@ -212,11 +212,13 @@
         <div class="am-modal am-modal-no-btn" tabindex="-1" id="end-classes-1">
             <div class="am-modal-dialog">
                 <a href="javascript: void(0)" class="am-close am-close-spin exitClose" data-am-modal-close>&times;</a>
-                <p class="p-text">确定要退出当前课堂吗?</p>
+                <p class="p-text">确定要结束当前课堂吗?</p>
                 <div class="am-modal-confirm-cancel">
-                    <button id="end" class="confirm" data-am-modal-close>结束课堂</button>
-                    <button id="end-no-exit" class="cancel-1" data-am-modal-close>退出，不结束课堂</button>
+                    <!--<button id="end" class="confirm" data-am-modal-close>结束课堂</button>-->
+                    <!--<button id="end-no-exit" class="cancel-1" data-am-modal-close>取消</button>-->
+                    <button id="end" class="exitEnsure" data-am-modal-close>确定</button>
+                    <button  class="exitCancel" data-am-modal-close>取消</button>
                 </div>
             </div>
--- a/js/McuClient.js
查看文件 @02f9ef1
+++ b/js/McuClient.js
查看文件 @02f9ef1
--- a/src/main.js
查看文件 @02f9ef1
+++ b/src/main.js
查看文件 @02f9ef1
@@ -1003,7 +1003,17 @@ function classJoinSuccess(callbackData){
     //准备主页面
     layoutView();
 }
-
+// function showClassStatus(obj) {
+//
+//     if(obj.style.display=="block")
+//     {
+//         obj.style.display=='none';
+//     }
+//     else
+//     {
+//         obj.style.display=='block';
+//     }
+// }
 //登录成功后,登录页隐藏,主页面显示
@@ -1016,13 +1026,6 @@ function layoutView( ) {
         "display":"block"
     });
-    $("#class-now").click(function () {
-        $(".am-dropdown-content").css({"z-index":"1","display":"block"});
-    });
-
-    $(".am-dropdown-content").mouseleave(function () {
-        $(".am-dropdown-content").css({"z-index":"-1","display":"block"});
-    })
     //加入课堂成功后,点击开始上课
     $("#classes-status-begin").click(function () {
@@ -1034,7 +1037,7 @@ function layoutView( ) {
         $(".span-classes").html("&#xe609;");
         $("#class-now").html("直播中");
-        $(".am-dropdown-content").css("z-index","-1");
+
         client.sendStartClass();
     });
     //暂停课堂
@@ -1044,7 +1047,7 @@ function layoutView( ) {
         $(".am-dropdown-content-li-pause").css("display","none");
         $(".am-dropdown-content-li-rest").css("display","block");
-        $(".am-dropdown-content").css("z-index","-1");
+
         client.sendPauseClass();
     });
@@ -1053,11 +1056,7 @@ function layoutView( ) {
         $(".box").css("display", "none");
         client.sendCloseClass();
     });
-    //退出,但不结束课堂,是当前这个人退出
-    $("#end-no-exit").click(function () {
-        client.leaveClass();
-        $(".box").css("display", "none");
-    });
+
     //退出,但不结束课堂,是当前这个人退出
     $("#exitClass").click(function () {
         client.leaveClass();
@@ -1070,43 +1069,11 @@ function layoutView( ) {
         $(".am-dropdown-content-li-pause").css("display","block");
         $(".span-classes").html("&#xe609;");
         $("#class-now").html("直播中");
-        $(".am-dropdown-content").css("z-index","-1");
+        // $(".am-dropdown-content").css("z-index","-1");
     });
-
-
-
-
-
-
-
-
-
-
-
-
-    // if(_type==1){
-    //     //主页面显示
-    //     $(".box").css({
-    //         "display":"block"
-    //     });
-    //     $(".zbbox").css({
-    //         "display":"none"
-    //     });
-    //
-    //
-    // }else{
-    //     $(".box").css({
-    //         "display":"none"
-    //     });
-    //     $(".zbbox").css({
-    //         "display":"block"
-    //     });
-    //
-    // }
-
     $(".showBoardBtn").click(function () {
         $(".docImage").css("z-index","none");
         $(".showImg").css("display","none");
--- a/src/nativeVideo.js 已删除 100644 → 0
查看文件 @a18b3e6
+++ b/src/nativeVideo.js 已删除 100644 → 0
查看文件 @a18b3e6
-
-var client;    //客户端
-var pubResultObj; // 存储底层给我的推流结果
-
-var playResultObj;//存储底层给我的播流结果
-
-
-var playVideoId; //播放的流的videoId
-var pushVideoId; //推流的videoId
-var playCallbackDate; //视频更新的callBack
-var nativeVideo={};
-window.nativeVideo=nativeVideo;
-
-nativeVideo.nativeInit=function (_client){
-    client=_client;
-};
-
-
-
-var u = navigator.userAgent;
-var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
-var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
-
-
-function mobileCallback(_param) {
-
-    console.log(_param);
-
-    if(isiOS){
-        console.log(isiOS);
-        _js2native(_param);
-
-    }else if (isAndroid){
-        console.log(isAndroid);
-        window.xdyAndroid._js2native(_param);
-
-    }
-}
-
-
-
-
-
-
-function teaTimeStamp() {
-    var _teatimestamp= Date.parse(new Date());
-    return _teatimestamp;
-}
-
-
-
-$(function () {
-
-    //学生视频按钮点击
-    $(".stuVideo-video").click(function (e) {
-        console.log("stuVideo-video点击");
-        console.log( $(".studentVideo").offset().left);
-
-        $("#stuVideo-video").html(" ");
-        $("#stuVideo-video").removeClass("stuVideo-video");
-        $("#stuVideo-video").addClass("stuVideo-videoBg");
-
-        $("#stuVideo-voice").html("&#xe62d;");
-        $("#stuVideo-voice").addClass("stuVideo-voice");
-        $("#stuVideo-voice").removeClass("stuVideo-voiceBg");
-
-        $(".studentVideo").css("background", "#CCCCCC");
-
-        var pcVideoTop=$(".studentVideo").offset().top;
-        var pcVideoLeft=$(".studentVideo").offset().left;
-        var pcVideoW=$(".studentVideo").width();
-        var pcVideoH=pcVideoW*3/4;
-
-        //获取位置
-        var scrollW=document.body.scrollWidth||document.documentElement.scrollWidth;
-        var videoStuXFloat=pcVideoLeft/scrollW*100;
-        var videoStuX=Math.round(videoStuXFloat*100)/100;
-
-        var scrollH=document.body.scrollHeight||document.documentElement.scrollHeight;
-        var videoStuYFloat=pcVideoTop/scrollH*100;
-        var videoStuY=Math.round(videoStuYFloat*100)/100;
-
-
-        //宽高
-        var   videoStuWFloat=pcVideoW/scrollW*100;
-        var  videoStuW=Math.round(videoStuWFloat*100)/100;
-
-        var  videoStuHFloat=pcVideoH/scrollH*100;
-        var  videoStuH=Math.round(videoStuHFloat*100)/100;
-
-        console.log(videoStuX,videoStuY,videoStuW,videoStuH);
-
-
-        //创建显示nativeVideo学生窗口,进行推流
-        var creatTeaNativeVideoObj={
-            "type":0,
-            "videoId":teaTimeStamp(),
-            "data":{
-                "wintype":'rtmp',
-                "x": videoStuX,
-                "y": videoStuY,
-                "width": videoStuW,
-                "height": videoStuH
-            }
-        };
-
-        console.log(creatTeaNativeVideoObj);
-        var creatTeaNativeVideoJson=JSON.stringify(creatTeaNativeVideoObj);
-        console.log(creatTeaNativeVideoJson);
-        mobileCallback(creatTeaNativeVideoJson);
-
-        //获取学生推流地址
-        achieveStuPushStream();
-
-    });
-
-
-    //学生挂断
-    $(".stuVideo-videoBg").click(function (e) {
-
-    })
-
-    //学生音频按钮点击
-    $("#stuVideo-voice").click(function (e) {
-        console.log("stuVideo-voice点击");
-        $("#stuVideo-video").html("&#xe62e;");
-        $("#stuVideo-video").removeClass("stuVideo-videoBg");
-        $("#stuVideo-video").addClass("stuVideo-video");
-
-        $("#stuVideo-voice").html("");
-        $("#stuVideo-voice").removeClass("stuVideo-voice");
-        $("#stuVideo-voice").addClass("stuVideo-voiceBg");
-
-    });
-
-    //根据传进来的消息,创建老师NativeVideo窗口,进行播流
-    client.on(MessageTypes.VIDEO_UPDATE,videoUpdate);
-
-
-
-
-
-});
-
-function videoUpdate(callbackDate){
-
-    playCallbackDate=callbackDate;
-
-    if ((callbackDate.status==1)&&(callbackDate.channelId!=='')){
-
-        var scrollW=document.body.scrollWidth||document.documentElement.scrollWidth;
-        var scrollH=document.body.scrollHeight||document.documentElement.scrollHeight;
-        var videoTeaXFloat=(scrollW-246)/scrollW*100;
-        var videoTeaX=Math.round(videoTeaXFloat*100)/100;
-
-        var videoTeaYFloat=241/scrollH*100;
-        var videoTeaY=Math.round(videoTeaYFloat*100)/100;
-
-        var creatStuNativeVideoObj={
-            "type":0,
-            "videoId":teaTimeStamp(),
-            "data":{
-                "x": videoTeaX,
-                "y": videoTeaY,
-                "width": 30,
-                "height": 30
-            }
-        };
-
-        var creatStuNativeVideoJson=JSON.stringify(creatStuNativeVideoObj);
-        mobileCallback(creatStuNativeVideoJson);
-
-
-        //获取播流地址
-        achievePlayStream();
-
-    }
-
-}
-
-
-//从底层获取播流地址,然后传给nativa进行播放
-function achievePlayStream(){
-
-    var paramInfo={
-        "type": "rtmp"
-    };
-    var playResult=client.getVideoPlayPath(paramInfo);
-
-    console.log("执行getVideoPlayPath,返回的结果",playResult);
-
-    playResultObj=playResult;
-    if (playResult.code==0){
-
-        var _playMsg={
-            "type": 2,
-            "videoId": teaTimeStamp(),
-            "data":{
-                "video": true, // true/false
-                "audio": true, // true/false
-                "url":playResult.publishUrl
-            }
-        };
-
-        //播流的videoId
-        playVideoId=_playMsg.videoId;
-
-        //传给native
-        mobileCallback(_playMsg);
-    }
-
-
-}
-
-//从底层获取推流地址
-function achievePushStream(){
-
-    var paramInfo={
-        "type": "live"
-    };
-    var pubResult=client.getVideoPublishPath(paramInfo);
-
-    console.log("执行getVideoPublishPath,返回的结果",pubResult)
-
-    pubResultObj=pubResult;
-
-
-    //code为0,代表成功
-    if (pubResult.code==0){
-
-        var _publishMsg={
-            "type": 10,
-            "videoId": teaTimeStamp(),
-            "data":{
-                "video": true, // true/false
-                "audio": true, // true/false
-                "url":pubResult.publishUrl
-            }
-        };
-
-
-        //推流时的VideoId
-        var pushVideoId=_publishMsg.videoId;
-
-
-        //传给native
-        mobileCallback(_publishMsg);
-
-    }
-
-};
-
-
-
-//native传给我
-nativeVideo._native2js=function (_fromNative){
-
-    var fromNative=JSON.parse(_fromNative);
-    var type=fromNative.type;
-
-    switch (type){
-        case 0: SucessError(_fromNative);break;
-        default:break;
-    }
-};
-
-function SucessError(_fromNative) {
-
-    var successErrorData=_fromNative.data;
-    //0成功  1失败
-    if (successErrorData.result==0){
-
-        //将之前底层取的推流结果传递给底层
-        var _successErrorResult= client.publishVideo(pubResultObj);
-
-        if(_successErrorResult.code==0){
-            console.log("底层广播推流成功");
-        } else if(_successErrorResult.code==1){
-            console.log("底层广播推流失败,关闭推流");
-
-            //应用层关闭流
-            var _closeStream={
-                "type": 5,
-                "videoId":pushVideoId
-            }
-
-            var paramInfo={
-                "nodeId": 0,//用户的nodeId,默认0,就是自己的
-            };
-            client.stopPublishVideo(paramInfo);
-        }
-
-
-
-
-    }
-    else if (successErrorData.result==1){
-        console.log("native失败了,错误信息是",successErrorData.errmsg);
-
-        var paramInfo={
-            "nodeId": 0,//用户的nodeId,默认0,就是自己的
-        };
-        client.stopPublishVideo(paramInfo);
-
-        //应用层出弹框提示
-        $(".pop").trigger('click');
-
-
-    }
-}
-
-
-
-
--- a/src/videoWithFlash.js
查看文件 @02f9ef1
+++ b/src/videoWithFlash.js
查看文件 @02f9ef1
@@ -146,7 +146,7 @@ $(function () {
             $(".teacherVoicing").css("display","none");
             $(".publish").css({"width":"240px","height":"180px"});
-            // $(".play").css({"width":"1px","height":"1px"});
+            $(".play").css({"width":"1px","height":"1px"});
         }
@@ -993,6 +993,7 @@ function publishURL(rtmpURL) {
 //获取老师播音视频流地址
 function achievePlayStream(_pubResultObj){
+
     console.log("_pubResultObj==========>",_pubResultObj)
     var _paramInfo={
         "type": "rtmp",