update直播

src/views/live/index.vue

@@ -9,11 +9,11 @@
           <span class="live-name">{{ roomData.name }}</span>
         </div>
         <div>
-          <el-button @click="getDevice">获取设备列表</el-button>
+          <!-- <el-button @click="playAudio">开启本地流声音</el-button> -->
           <template v-if="userType === 'TEACHER'">
             <el-button v-if="!liveStat" @click="startLive">开启直播</el-button>
             <el-button v-if="liveStat" @click="closeLiveRoom">结束直播</el-button>
-            <el-button @click="publishStream">推流</el-button>
+            <el-button v-if="liveStat" @click="publishStream">推流</el-button>
           </template>
         </div>
       </div>
@@ -22,8 +22,16 @@
     <div class="live-container">
       <!-- 左侧 -->
       <div class="live-container-left">
-        <div v-show="connection" id="student"></div>
-        <div v-show="!connection" id="draw-parent">
+        <div v-show="callLoading" class="loading">
+          <div class="loading-wrapper">
+            <p class="loading-title">正在呼叫，等待对方接通...</p>
+            <!-- <div>
+                <el-button type="danger" icon="el-icon-phone-outline" circle></el-button>
+              </div> -->
+          </div>
+        </div>
+        <div v-show="connect" id="student"></div>
+        <div v-show="isDraw" id="draw-parent">
           <div v-show="isDrawSetting" class="draw-setting">
             <span class="brush-shape">
               <svg-icon icon-class="brush-shape" />
@@ -166,9 +174,13 @@ export default {
     return {
       userType: this.$store.state.user.user_type,
       task_id: this.$route.query.task_id,
-      connection: false,
+      // 已连接
+      connect: false,
+      // 等待接通
+      callLoading: false,
       dialogVisible: false,
       dialogVisibleMaterial: false,
+      // 资料信息
       material_id: '',
       material_name: '',
       material_type: '',
@@ -202,9 +214,16 @@ export default {
       drawThicknessList: ['1', '3', '5'],
       // 直播间学员列表
       student_list: [],
+      // 直播状态
       liveStat: false
     };
   },
+  computed: {
+    // 画板模式
+    isDraw() {
+      return !this.connect && !this.callLoading;
+    }
+  },
   watch: {
     loadedNumber(newValue) {
       if (newValue === 5) {
@@ -345,28 +364,43 @@ export default {
 
     // 老师邀请学生上麦
     invite(uid, mode) {
-      GetLiveRoomInfo({ task_id: this.task_id }).then(({ video_mode }) => {
-        if (video_mode === mode) {
-          common.invite(uid);
-        } else {
-          common.roomUpdate({
-            video_mode: mode,
-            roomUpdateSuccess: function (data) {
-              console.log(data, '连麦音视频模式更新请求成功！');
-              common.invite(uid);
-            },
-            roomUpdateFailed: function (data) {
-              console.log(data, '连麦音视频模式更新请求失败！ 请稍后再试!');
-              this.$message.error('连麦音视频模式更新请求失败！ 请稍后再试!');
-            }
-          });
-        }
-      });
+      this.callLoading = true;
+      GetLiveRoomInfo({ task_id: this.task_id })
+        .then(({ video_mode }) => {
+          if (video_mode === mode) {
+            common.invite(uid);
+          } else {
+            common.roomUpdate({
+              video_mode: mode,
+              roomUpdateSuccess: function (data) {
+                console.log(data, '连麦音视频模式更新请求成功！');
+                common.invite(uid);
+              },
+              roomUpdateFailed: function (data) {
+                console.log(data, '连麦音视频模式更新请求失败！ 请稍后再试!');
+                this.$message.error('连麦音视频模式更新请求失败！ 请稍后再试!');
+              }
+            });
+          }
+        })
+        .catch(() => {
+          this.callLoading = false;
+        });
     },
 
     // 下麦
     handsDown(uid) {
-      common.handsDown(uid);
+      common.handsDown({
+        uid,
+        success: str => {
+          this.callLoading = false;
+          console.log('下麦成功', str);
+          this.$message.success('下麦成功');
+        },
+        fail: data => {
+          console.log('下麦失败', data);
+        }
+      });
     },
 
     // 发消息
@@ -416,6 +450,10 @@ export default {
       common.publishStream('main');
     },
 
+    playAudio() {
+      common.playAudio();
+    },
+
     dialogClose() {
       this.dialogVisible = false;
     },
@@ -481,6 +519,11 @@ $live-bc: #3d3938;
   &-info {
     display: flex;
     justify-content: space-between;
+
+    .el-button {
+      border-radius: 4px;
+      padding: 7px 12px;
+    }
   }
 
   &-name {
@@ -498,6 +541,25 @@ $live-bc: #3d3938;
       background-color: #fff;
       border-radius: 8px;
 
+      .loading {
+        position: relative;
+        width: 100%;
+        height: 468px;
+        color: #fff;
+        background-color: #646464;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &-wrapper {
+          text-align: center;
+
+          .loading-title {
+            margin-bottom: 24px;
+          }
+        }
+      }
+
       #student {
         width: 100%;
         height: 468px;
@@ -713,10 +775,5 @@ $live-bc: #3d3938;
       }
     }
   }
-
-  .el-button {
-    border-radius: 4px;
-    padding: 7px 12px;
-  }
 }
 </style>

src/views/live/live.js

@@ -184,9 +184,16 @@ export function initListener(vue) {
         success: function (stream) {
           // 订阅流成功
           let streamType = stream.streamType();
+          // let hasVideo = stream.hasVideo();
           console.log('订阅流成功', streamType);
-          stream.show(store.state.user.user_type === 'STUDENT' ? 'live' : 'student', 'contain'); // 将流显示到id为 live 的盒子中
-          vue.connection = true;
+          let id = streamType === 0 ? 'live' : 'student';
+          // 有视频才显示
+          stream.show(id, 'contain'); // 将流显示到指定 id 的盒子中
+
+          if (streamType === 1 || streamType === 10) {
+            vue.connect = true;
+            vue.callLoading = false;
+          }
         },
         fail: function (err) {
           console.log('订阅流失败', err);
@@ -264,7 +271,7 @@ export function initListener(vue) {
   // 监听通知移除流事件
   rtc.on('stream_removed', function (stream) {
     console.log('监听通知移除流事件');
-    vue.connection = false;
+    vue.connect = false;
   });
 
   // 停止订阅流
@@ -300,8 +307,8 @@ export function initListener(vue) {
   });
 
   rtc.on('mcDown', () => {
-    closeVideo('main');
-    vue.connection = false;
+    closeVideo('picture');
+    vue.connect = false;
   });
 
   rtc.on('createLocalStream', () => {
@@ -313,14 +320,14 @@ export function initListener(vue) {
         audio: true
       };
       rtc.createLocalStream({
-        streamName: 'main',
+        streamName: 'picture',
         createData,
         success: function (stream) {
-          vue.connection = true;
+          vue.connect = true;
           console.log('创建本地流成功', stream);
           // 创建本地流成功，将流展示到id为 student 的dom元素盒子中
           stream.show('student');
-          publishStream('main'); // 如果需要立即推流，执行 publish 方法
+          publishStream('picture'); // 如果需要立即推流，执行 publish 方法
         },
         fail: function (data) {
           console.log('创建本地流失败，应用层处理', data);
@@ -401,7 +408,8 @@ export function pauseAudio() {
 export function playAudio() {
   rtc.playAudio({
     streamName: 'main',
-    success: function () {
+    success: function (data) {
+      console.log(data);
       console.log('开启本地流声音成功');
     },
     fail: function (str) {
@@ -527,16 +535,8 @@ export function handsUp(data) {
  * 下麦操作
  * @param { String } uid
  */
-export function handsDown(uid) {
-  rtc.handsDown({
-    uid,
-    success: function (str) {
-      console.log('下麦成功', str);
-    },
-    fail: function (data) {
-      console.log('下麦失败', data);
-    }
-  });
+export function handsDown(Object) {
+  rtc.handsDown(Object);
 }
 
 /**

stylelint.config.js

@@ -16,8 +16,8 @@ module.exports = {
     'function-url-no-scheme-relative': true,
     // 可组合成一个属性的写法，不允许拆开书写
     'declaration-block-no-redundant-longhand-properties': true,
-    // 选择器最大深度为4
-    'selector-max-compound-selectors': 6,
+    // 选择器最大深度
+    'selector-max-compound-selectors': 8,
     // 限制 id选择器的数目在一个选择器中
     'selector-max-id': 1,
     // 最多2个类型选择器