音视频功能做完

张桐
Commit 09c8ec5ed65aee1fd9e8ad0902303f0b49894678 09c8ec5e 1 parent ccf48e78
css/main.css
index.html
src/main.js
src/videoWithFlash.js
--- a/css/main.css
查看文件 @09c8ec5
+++ b/css/main.css
查看文件 @09c8ec5
@@ -1267,8 +1267,20 @@ height: 1080px;
     background: url("../images/hangupHover.gif") no-repeat center center;
 }
+.stuVideo-videoNotClick{
+    display: none;
+    position: absolute;
+    left: 3px;
+    bottom: -5px;
+    cursor: pointer;
+    color: #999;
+    margin: 0px 5px 0px  5px;
+
+}
+
 .stuVideo-voice{
+
     position: absolute;
     left:23px;
     bottom: 4px;
@@ -1298,6 +1310,20 @@ height: 1080px;
 }
+.stuVideo-voiceNotClick{
+    display: none;
+    position: absolute;
+    left:23px;
+    bottom: 4px;
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+    cursor: pointer;
+    color: #999;
+    margin: 0px 5px 0px  5px;
+}
+
+
 .teacherVideo {
@@ -1336,6 +1362,19 @@ height: 1080px;
     width: 100%;
 }
+.curUserName{
+    position: absolute;
+    left: 47px;
+    bottom: 5px;
+    width: auto;
+    height: 16px;
+    color: #333333;
+    font-size: 15px;
+
+}
+
+
+
 .teacherVideo-video{
     position: absolute;
     left: 3px;
@@ -1362,6 +1401,17 @@ height: 1080px;
     background: url("../images/hangupHover.gif") no-repeat center center;
 }
+.teacherVideo-videoNotClick{
+    display: none;
+    position: absolute;
+    left: 3px;
+    bottom: -5px;
+    color: #999;
+    margin: 0px 5px 0px  5px;
+
+}
+
+
 .teacherVideo-voice{
       position: absolute;
@@ -1391,7 +1441,18 @@ height: 1080px;
 .teacherVideo-voiceBg:hover{
     background: url("../images/hangupHover.gif") no-repeat center center;
 }
+.teacherVideo-voiceNotClick{
+    display: none;
+    position: absolute;
+    left:23px;
+    bottom: 4px;
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+    color: #999;
+    margin: 0px 5px 0px  5px;
+}
--- a/index.html
查看文件 @09c8ec5
+++ b/index.html
查看文件 @09c8ec5
@@ -16,8 +16,8 @@
     <script type="text/javascript" src="js/xdyEvent.js"></script>
     <script type="text/javascript" src="js/drag.js"></script>
-    <!--<script type="text/javascript" src="js/McuClient.js?v=1.0.0303.10"></script>-->
-    <script type="text/javascript" src="http://192.168.1.140/McuClient/McuClient.js?722898936"></script>
+    <script type="text/javascript" src="js/McuClient.js?v=1.0.0303.10"></script>
+    <!--<script type="text/javascript" src="http://192.168.1.140/McuClient/McuClient.js?722898936"></script>-->
     <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
     <script type="text/javascript" src="src/main.js"></script>
@@ -173,7 +173,6 @@
                 <li><span id="am-dropdown-content-span-1" class="am-dropdown-content-span iconfont">&#xe61d;</span>
                     <button id="classes-status-1" type="button"
                             class="am-btn am-btn-primary am-dropdown-content-button"
-                            data-am-modal="{target: '#begin-classes', closeViaDimmer: 0, width: 340, height: 172}"
                             href="#">开始上课
                     </button>
                 </li>
@@ -190,19 +189,6 @@
             </ul>
         </div>
-        <!--弹出层-正在上课-->
-        <div class="am-modal am-modal-no-btn" tabindex="-1" id="begin-classes">
-            <div class="am-modal-dialog">
-
-                <p id="p-text" class="p-text">确定开始录制吗?</p>
-
-                <div class="am-modal-confirm-cancel">
-                    <button id="confirm" class="confirm" data-am-modal-close>确定</button>
-                    <button class="cancel" data-am-modal-close>取消</button>
-                </div>
-
-            </div>
-        </div>
         <!--弹出层-结束课堂-->
         <div class="am-modal am-modal-no-btn" tabindex="-1" id="end-classes">
@@ -388,10 +374,15 @@
                     <div id="stuPlay"></div>
                 </div>
                 <img class="stuVideoBg"/>
-                <div id="stuVideo-video" class="stuVideo-video iconfont">&#xe62e;</div>
+                <div id="stuVideo-video" class="stuVideo-video iconfont" title="发起学生视频">&#xe62e;</div>
                 <div id="stuVideo-videoBg" class="stuVideo-videoBg iconfont"></div>
-                <div id="stuVideo-voice" class="stuVideo-voice iconfont">&#xe62d;</div>
+                <div id="stuVideo-videoNotClick" class="stuVideo-videoNotClick iconfont" title="当前不能点击">&#xe62e;</div>
+
+
+                <div id="stuVideo-voice" class="stuVideo-voice iconfont" title="发起学生音频">&#xe62d;</div>
                 <div id="stuVideo-voiceBg" class="stuVideo-voiceBg iconfont"></div>
+                <div id="stuVideo-voiceNotClick" class="stuVideo-voiceNotClick iconfont" title="当前不能点击">&#xe62d;</div>
+
                 <!--<span>lucy</span>-->
             </div>
             <div class="teacherVideo">
@@ -403,10 +394,14 @@
                 </div>
                 <img class="teacherVideoBg"/>
                 <img class="teacherVoicing"/>
-                <div id="teacherVideo-video" class="teacherVideo-video iconfont">&#xe62e;</div>
+                <div class="curUserName"></div>
+                <div id="teacherVideo-video" class="teacherVideo-video iconfont" title="发起视频">&#xe62e;</div>
                 <div id="teacherVideo-videoBg" class="teacherVideo-videoBg iconfont"></div>
-                <div id="teacherVideo-voice" class="teacherVideo-voice iconfont">&#xe62d;</div>
+                <div id="teacherVideo-videoNotClick" class="teacherVideo-videoNotClick iconfont" title="当前不能点击">&#xe62e;</div>
+
+                <div id="teacherVideo-voice" class="teacherVideo-voice iconfont" title="发起音频">&#xe62d;</div>
                 <div id="teacherVideo-voiceBg" class="teacherVideo-voiceBg iconfont"></div>
+                <div id="teacherVideo-voiceNotClick" class="teacherVideo-voiceNotClick iconfont" title="当前不能点击">&#xe62d;</div>
             </div>
@@ -842,54 +837,54 @@
     var classesStatus2 = document.getElementById('classes-status-2');
     var amDrospanIcon = document.getElementById('am-dropdown-content-span-1');
-    confirm.onclick = function changeStatus() {
-        if (flag == '0') {
-            flag++;
-            console.log(flag);
-            spaniconfont.innerHTML = '&#xe609;';
-            classnow.innerHTML = '直播中';
-            aStatus.innerHTML = '直播中';
-            aStatus.style.color = '#d95136';
-            ptext.innerHTML = '确定暂停录制吗'
-            noStart.style.display = 'none';
-            oLive.style.display = 'block';
-            amDrospanIcon.innerHTML = "&#xe60a;";
-            classesStatus1.innerHTML = '课间休息';
-            console.log(classesStatus1.innerHTML);
-            classesStatus2.innerHTML = '结束课堂';
-            console.log(classesStatus2.innerHTML);
-
-
-        }
-        else if (flag == '1') {
-            console.log(flag);
-            ptext.innerHTML = '确定继续上课吗'
-            spaniconfont.innerHTML = '&#xe60a;';
-            classnow.innerHTML = '休息';
-            aStatus.innerHTML = '休息';
-            aStatus.style.color = '#333333';
-            noStart.style.display = 'block';
-            oLive.style.display = 'none';
-            amDrospanIcon.innerHTML = "&#xe61d;";
-            classesStatus1.innerHTML = '继续上课';
-            console.log(classesStatus1.innerHTML);
-            classesStatus2.innerHTML = '结束课堂';
-            console.log(classesStatus2.innerHTML);
-            flag--;
-        }
-
-
-    }
-    end.onclick = function endStatus() {
-        spaniconfont.innerHTML = '&#xe609;';
-        classnow.innerHTML = '结束';
-        aStatus.innerHTML = '结束';
-        oLive.style.display = 'none';
-        spaniconfont.innerHTML = '&#xe607;';
-        noStart.innerHTML = "&#xe62b;";
-        noStart.style.display = 'block';
-        aStatus.style.color = '#333333';
-    }
+//    confirm.onclick = function changeStatus() {
+//        if (flag == '0') {
+//            flag++;
+//            console.log(flag);
+//            spaniconfont.innerHTML = '&#xe609;';
+//            classnow.innerHTML = '直播中';
+//            aStatus.innerHTML = '直播中';
+//            aStatus.style.color = '#d95136';
+//            ptext.innerHTML = '确定暂停录制吗'
+//            noStart.style.display = 'none';
+//            oLive.style.display = 'block';
+//            amDrospanIcon.innerHTML = "&#xe60a;";
+//            classesStatus1.innerHTML = '课间休息';
+//            console.log(classesStatus1.innerHTML);
+//            classesStatus2.innerHTML = '结束课堂';
+//            console.log(classesStatus2.innerHTML);
+//
+//
+//        }
+//        else if (flag == '1') {
+//            console.log(flag);
+//            ptext.innerHTML = '确定继续上课吗'
+//            spaniconfont.innerHTML = '&#xe60a;';
+//            classnow.innerHTML = '休息';
+//            aStatus.innerHTML = '休息';
+//            aStatus.style.color = '#333333';
+//            noStart.style.display = 'block';
+//            oLive.style.display = 'none';
+//            amDrospanIcon.innerHTML = "&#xe61d;";
+//            classesStatus1.innerHTML = '继续上课';
+//            console.log(classesStatus1.innerHTML);
+//            classesStatus2.innerHTML = '结束课堂';
+//            console.log(classesStatus2.innerHTML);
+//            flag--;
+//        }
+//
+//
+//    }
+//    end.onclick = function endStatus() {
+//        spaniconfont.innerHTML = '&#xe609;';
+//        classnow.innerHTML = '结束';
+//        aStatus.innerHTML = '结束';
+//        oLive.style.display = 'none';
+//        spaniconfont.innerHTML = '&#xe607;';
+//        noStart.innerHTML = "&#xe62b;";
+//        noStart.style.display = 'block';
+//        aStatus.style.color = '#333333';
+//    }
 </script>
--- a/src/main.js
查看文件 @09c8ec5
+++ b/src/main.js
查看文件 @09c8ec5
@@ -78,11 +78,14 @@ function listenClass() {
         // // //点击开始上课
         //
+        // $("#classes-status-1").click(function (e){
+        //
         //     if($("#classes-status-1").html()=="开始上课"){
-        //         $("#classes-status-1").click(function (e){
-        //             client.sendStartClass();
-        //         });
+        //         client.sendStartClass();
         //     }
+        //
+        // });
+
         //     if($("#classes-status-1").html()=="课间休息"){
         //         $("#classes-status-1").click(function (e){
         //             client.sendPauseClass();
--- a/src/videoWithFlash.js
查看文件 @09c8ec5
+++ b/src/videoWithFlash.js
查看文件 @09c8ec5
@@ -42,6 +42,8 @@ $(function () {
     //学生视频按钮点击
     $("#stuVideo-video").click(function (e) {
         console.log("stuVideo-video点击");
+        $(".stuVideo-voiceNotClick").css("display","block");
+        $(".stuVideo-voice").css("display","none");
         if (classAllInfo.userRole=="host"){
             $(".stuVideoBg").css("display","none");
@@ -63,6 +65,8 @@ $(function () {
     //学生视频关闭按钮点击
     $("#stuVideo-videoBg").click(function (e) {
+        $(".stuVideo-voiceNotClick").css("display","none");
+        $(".stuVideo-voice").css("display","block");
     var paramInfo={
         "actionType":2,
@@ -80,8 +84,9 @@ $(function () {
     //学生音频按钮点击
     $("#stuVideo-voice").click(function (e) {
-
         console.log("stuVideo-voice点击");
+        $(".stuVideo-videoNotClick").css("display","block");
+        $(".stuVideo-video").css("display","none");
         if (classAllInfo.userRole=="host"){
             $(".stuVideoBg").css("display","none");
@@ -107,6 +112,8 @@ $(function () {
     });
     //学生音频关闭按钮点击
     $("#stuVideo-voiceBg").click(function(e){
+        $(".stuVideo-videoNotClick").css("display","none");
+        $(".stuVideo-video").css("display","block");
         var paramInfo={
             "actionType":2,
             "toNodeId":stuNodeId,
@@ -118,24 +125,14 @@ $(function () {
             $("#stuVideo-voiceBg").css("display","none");
         }
-        // if (classAllInfo.userRole=="normal"){
-        //     $(".stuVideo-voice").css("display","none");
-        //     $(".stuVideo-video").css("display","none");
-        // }
-
     });
     //老师视频按钮点击
     $("#teacherVideo-video").click(function (e) {
         console.log("teacherVideo-video点击");
-        $(".teacherVideo-voice").css("color","#cccccc");
-        // $(".teacherVideo-voice").unbind("click");//音频按钮不可点
-
-        // var teaVoiceDisplay= $(".teacherVideo-voiceBg").css("display");
-        // if(teaVoiceDisplay=="block"){
-        //     $("#teacherVideo-voiceBg").trigger("click");
-        // }
+        $(".teacherVideo-voice").css("display","none");
+        $(".teacherVideo-voiceNotClick").css("display","block");
         if (classAllInfo.userRole=="host"){
             $(".teacherVideo-videoBg").css("display","block");
             $(".teacherVideo-video").css("display","none");
@@ -143,7 +140,6 @@ $(function () {
             $("#teacherVideo-voice").addClass("teacherVideo-voice");
             $("#teacherVideo-voice").removeClass("teacherVideo-voiceBg");
             $(".teacherVideoBg").css("display","none");
-            // $(".teacherVideo").css("background", "#CCCCCC");
             $(".teacherVideo-voice").css("bottom","4px");
             $(".teacherVoicing").css("display","none");
@@ -156,7 +152,8 @@ $(function () {
     //老师视频关闭按钮点击
     $("#teacherVideo-videoBg").click(function (e) {
-        $(".teacherVideo-voice").css("color","#333333");
+        $(".teacherVideo-voice").css("display","block");
+        $(".teacherVideo-voiceNotClick").css("display","none");
         if(window.publishflash) {
             const stopInfo = JSON.stringify({
                 type: 5,
@@ -190,10 +187,8 @@ $(function () {
     //老师音频按钮点击
     $("#teacherVideo-voice").click(function (e) {
         console.log("teacherVideo-voice点击");
-        // var teaVideoDisplay= $(".teacherVideo-videoBg").css("display");
-        // if(teaVideoDisplay=="block"){
-        //
-        // }
+        $(".teacherVideo-video").css("display","none");
+        $(".teacherVideo-videoNotClick").css("display","block");
         if (classAllInfo.userRole=="host"){
             $(".publish").css({"width":"240px","height":"180px"});
@@ -203,6 +198,7 @@ $(function () {
             $(".teacherVideoBg").css("display","none");
         }
+
         // /获取老师只推音频地址
         achieveTeaAudioStream();
@@ -211,6 +207,8 @@ $(function () {
     $("#teacherVideo-voiceBg").click(function (e) {
         console.log("teacherVideo-voice点击");
+        $(".teacherVideo-video").css("display","block");
+        $(".teacherVideo-videoNotClick").css("display","none");
         if (classAllInfo.userRole=="host"){
             $(".publish").css({"width":"1px","height":"1px"});
@@ -237,21 +235,6 @@ $(function () {
 });
-//老师音频点击事件
-function teaAudioClick(){
-    console.log("teacherVideo-voice点击");
-
-    if (classAllInfo.userRole=="host"){
-        $(".publish").css({"width":"240px","height":"180px"});
-        $(".play").css({"width":"1px","height":"1px"});
-        $("#teacherVideo-voice").css("display","none");
-        $("#teacherVideo-voiceBg").css("display","block");
-        $(".teacherVideoBg").css("display","none");
-    }
-
-    // /获取老师只推音频地址
-    achieveTeaAudioStream();
-}
 //监听学生视频更新
@@ -359,7 +342,7 @@ function userListUpdate(callbackData) {
     console.log("人员进入",callbackData);
     if (classAllInfo.nodeId==callbackData.nodeId){
-
+            $(".curUserName").html(callbackData.nodeData.name);
     }else{
         console.log("callbackData.nodeId================>",callbackData.nodeId)
         stuNodeId=callbackData.nodeId;
@@ -786,7 +769,7 @@ function achieveTeaAudioStream() {
                     console.log(' [publish] native 2 js', msg);
                     var _msg=JSON.parse(msg);
                     console.log("_msg===========>",_msg);
-                    if(_msg.data.result == 0){
+                    if((_msg.data.result == 0)&&(_msg.data.type == 10)){
                         //将之前底层取的推流结果传递给底层
                         var _successErrorResult= client.publishAudio(pushTeaAudioResult);
                         console.log("_successErrorResult======>",_successErrorResult)
@@ -797,7 +780,11 @@ function achieveTeaAudioStream() {
                             console.log("底层广播推流失败,关闭推流");
                         }
-                    }else {
+                    } else if((_msg.data.result == 0)&&(_msg.data.type == 5)){
+                        console.log("5,flash把推老师音频流关闭");
+
+                    }
+                    else {
                         console.error('publish error');
                     }
                 }
@@ -814,7 +801,7 @@ function achieveTeaAudioStream() {
 }
-//推老师音频   js2native
+    //推老师音频   js2native
 function publishTeaAudioURL(rtmpURL) {
     const msg = JSON.stringify({
         type: 10,
@@ -828,7 +815,7 @@ function publishTeaAudioURL(rtmpURL) {
     console.log(publishflashAudio._js2native(msg));
 }
-    //获取老师推流音视频地址
+    //获取老师推音视频流地址
 function achieveTeaVideoStream(){
         $(".publish").css({"width":"240px","height":"180px"});
         $(".play").css({"width":"1px","height":"1px"});
@@ -858,7 +845,8 @@ function achieveTeaVideoStream(){
                     console.log(' [publish] native 2 js', msg);
                     var _msg=JSON.parse(msg);
                     console.log("_msg===========>",_msg);
-                    if(_msg.data.result == 0){
+
+                    if((_msg.data.result == 0)&&(_msg.data.type == 10)){
                         //将之前底层取的推流结果传递给底层
                         console.log("之前的推流结果",pushTeaResult);
                         var _successErrorResult= client.publishVideo(pushTeaResult);
@@ -869,7 +857,11 @@ function achieveTeaVideoStream(){
                             console.log("底层广播推流失败,关闭推流");
                         }
-                    }else {
+                    }
+                    else if ((_msg.data.result == 0)&&(_msg.data.type == 5)){
+                        console.log("5,flash把老师的推音视频流关闭");
+                    }
+                    else {
                         console.error('publish error');
                     }
                 }
@@ -901,7 +893,7 @@ function publishURL(rtmpURL) {
-   //获取播放音频地址
+   //获取老师播放音频流地址
 function achievePlayAudioStream(_pubResultObj){
     console.log("_pubResultObj==========>",_pubResultObj)
@@ -916,6 +908,7 @@ function achievePlayAudioStream(_pubResultObj){
     var streamInfo=client.getAudioPlayPath(_paramInfo);
     console.log("result是=============>",streamInfo);
     $(".play").css({"width":"240px","height":"180px"});
+    $(".publish").css({"width":"1px","height":"1px"});
     $(".teacherVideoBg").css("display","none");
@@ -937,15 +930,25 @@ function achievePlayAudioStream(_pubResultObj){
                 playAudioURL(streamInfo.playUrl);
             },
             function (msg) {
-                console.log(' [play] native 2 js', msg);
+                console.log(' [playAudio] native 2 js', msg);
+                var _msg=JSON.parse(msg);
+                console.log("playAudio_msg===========>",_msg);
+                if((_msg.data.result == 0)&&(_msg.data.type == 2)){
+                    console.log("2,老师播音频流");
+
+                }
+                else if ((_msg.data.result == 0)&&(_msg.data.type == 5)){
+                    console.log("5,flash把老师的播音频流关闭");
+                }
+                else {
+                    console.error('playAudio error');
+                }
             }
         )
     }
     else {
         playAudioURL(streamInfo.playUrl);
     }
-
-
 }
 function playAudioURL(rtmpURL){
@@ -960,7 +963,7 @@ function playAudioURL(rtmpURL){
     console.log(playflashAudio._js2native(msg));
 }
-   //获取老师音视频播流地址
+   //获取老师播音视频流地址
  function achievePlayStream(_pubResultObj){
        console.log("_pubResultObj==========>",_pubResultObj)
      var _paramInfo={
@@ -974,6 +977,7 @@ function playAudioURL(rtmpURL){
      var streamInfo=client.getVideoPlayPath(_paramInfo);
      console.log("result是=============>",streamInfo);
      $(".play").css({"width":"240px","height":"180px"});
+     $(".publish").css({"width":"1px","height":"1px"});
      $(".teacherVideoBg").css("display","none");
      $(".teacherVideo-voice").css("bottom","4px");
@@ -993,6 +997,20 @@ function playAudioURL(rtmpURL){
              },
              function (msg) {
                  console.log(' [play] native 2 js', msg);
+                 var _msg=JSON.parse(msg);
+                 console.log("play_msg===========>",_msg);
+                 if((_msg.data.result == 0)&&(_msg.data.type == 2)){
+                     console.log("老师播流成功");
+
+                 }
+                 else if ((_msg.data.result == 0)&&(_msg.data.type == 5)){
+                     console.log("5,flash把老师的播音视频流关闭");
+                 }
+                 else {
+                     console.error('play error');
+                 }
+
+
              }
          )
      }