update

src/views/live/student/group.js

@@ -14,13 +14,13 @@ export {
 /**
  * 取消订阅远程流
  */
-export function unSubscribeStream(stream) {
+export function unSubscribeStream(unSubStream) {
   rtc.unSubscribeStream({
-    unSubStream: stream,
-    success: function (str) {
+    unSubStream,
+    success(str) {
       console.log('取消订阅流成功', str);
     },
-    fail: function (str) {
+    fail(str) {
       console.log(str);
     }
   });
@@ -58,12 +58,14 @@ export function initListener(vue) {
           streamName: 'picture',
           createData: createData(),
           success(stream) {
+            vue.localStream = true;
             console.log('创建本地流成功', stream);
             // 创建本地流成功，将流展示到id为 student 的dom元素盒子中
             stream.show('group-local');
             publishStream('picture'); // 如果需要立即推流，执行 publish 方法
           },
           fail(data) {
+            vue.localStream = false;
             console.log('创建本地流失败，应用层处理', data);
             // 创建本地流失败，应用层处理
             Message({
@@ -105,7 +107,7 @@ export function initListener(vue) {
             vue.is_teacher_in_group = true;
           }
         },
-        fail: function (err) {
+        fail(err) {
           console.log('订阅流失败', err);
         }
       });
@@ -113,7 +115,7 @@ export function initListener(vue) {
   });
 
   // 推流前查询直播状态失败，导致没有推流
-  rtc.on('local_stream_publish_failed', function () {
+  rtc.on('local_stream_publish_failed', () => {
     console.log('推流前查询直播状态失败，导致没有推流');
     Message({
       message: '推流前查询直播状态失败，导致没有推流',

src/views/live/student/group.vue

@@ -21,13 +21,21 @@
       <!-- 左侧 -->
       <div class="group-container-left">
         <div class="group-discussion">
-          <div id="group-local" class="group-box"></div>
+          <div v-show="localStream" id="group-local" class="group-box"></div>
+          <div v-show="!localStream" class="group-box student-info">
+            <el-avatar icon="el-icon-user" :src="studentSelf.student_image_url" :size="100" />
+            <span class="student_name">{{ studentSelf.student_name }}</span>
+          </div>
           <div
             v-for="(item, i) in streamList"
             :id="`group-${i}`"
             :key="item.id()"
             class="group-box"
           ></div>
+          <div v-for="item in noStreamList" :key="item.student_id" class="group-box student-info">
+            <el-avatar icon="el-icon-user" :src="item.student_image_url" :size="80" />
+            <span class="student_name">{{ item.student_name }}</span>
+          </div>
         </div>
         <div class="button-group">
           <div class="button-group-left"></div>
@@ -115,6 +123,7 @@ export default {
       session_id: '',
       live_room_sys_user_id: '',
       room_id: '',
+      localStream: false,
       // 定时器
       timer: null,
       rtc: null,
@@ -153,7 +162,11 @@ export default {
       // 直播状态
       liveStat: false,
       liveMenuShow: false,
-      is_teacher_in_group: false
+      is_teacher_in_group: false,
+      // 无远程流学员列表
+      noStreamList: [],
+      // 学员自身信息
+      studentSelf: {}
     };
   },
   watch: {
@@ -174,6 +187,18 @@ export default {
       }
     },
     streamList(newVal) {
+      let list = this.student_list.filter(item => {
+        if (item.is_self === 'false') {
+          let isNoStream = true;
+          for (let i = 0; i < newVal.length; i++) {
+            if (newVal[i].id().split('-')[0] === item.room_user_id) isNoStream = false;
+          }
+          return isNoStream;
+        }
+        return false;
+      });
+      this.noStreamList = list;
+
       if (newVal.length > 0) {
         this.$nextTick(() => {
           newVal[newVal.length - 1].show(`group-${newVal.length - 1}`);
@@ -301,6 +326,8 @@ export default {
         this.live_room_sys_user_id = live_room_sys_user_id;
         this.room_id = room_id;
         this.student_list = student_list;
+        this.noStreamList = student_list.filter(item => item.is_self === 'false');
+        this.studentSelf = student_list.find(item => item.is_self === 'true');
         common.downloadWebSDK(this);
       });
     }
@@ -379,6 +406,23 @@ $live-bc: #3d3938;
           width: 256px;
           height: 144px;
           margin: 8px;
+
+          &.student-info {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+            border: 2px solid #625c5b;
+
+            .el-avatar {
+              margin-top: 12px;
+            }
+
+            .student_name {
+              height: 28px;
+              color: #fff;
+            }
+          }
         }
       }
 

src/views/live/teacher/group.js

@@ -47,13 +47,13 @@ function createLocalStream() {
 /**
  * 取消订阅远程流
  */
-export function unSubscribeStream(stream) {
+export function unSubscribeStream(unSubStream) {
   rtc.unSubscribeStream({
-    unSubStream: stream,
-    success: function (str) {
+    unSubStream,
+    success(str) {
       console.log('取消订阅流成功', str);
     },
-    fail: function (str) {
+    fail(str) {
       console.log(str);
     }
   });
@@ -99,7 +99,7 @@ export function initListener(vue) {
       // 订阅远程流
       rtc.trySubscribeStream({
         tryStream: stream,
-        success: function (stream) {
+        success(stream) {
           // 订阅流成功
           let streamType = stream.streamType();
 
@@ -108,7 +108,7 @@ export function initListener(vue) {
             vue.streamList.push(stream);
           }
         },
-        fail: function (err) {
+        fail(err) {
           console.log('订阅流失败', err);
         }
       });
@@ -198,19 +198,6 @@ export function initListener(vue) {
    * 排麦监听事件
    */
 
-  // 监听自己被邀请事件
-  rtc.on('inviteUp', uid => {
-    console.log('监听自己被邀请事件', uid);
-    rtc.inviteAccept({
-      success: function (str) {
-        console.log('接受邀请成功', str);
-      },
-      fail: function (data) {
-        console.log('接受邀请失败', data);
-      }
-    });
-  });
-
   /**
    * 监听聊天事件
    */

src/views/live/teacher/group.vue

@@ -43,6 +43,10 @@
             :key="item.id()"
             class="group-box"
           ></div>
+          <div v-for="item in noStreamList" :key="item.student_id" class="group-box student-info">
+            <el-avatar icon="el-icon-user" :src="item.student_image_url" :size="80" />
+            <span class="student_name">{{ item.student_name }}</span>
+          </div>
         </div>
         <div class="button-group">
           <div class="button-group-left">
@@ -184,7 +188,9 @@ export default {
       room_id: '',
       session_id: '',
       streamList: [],
-      student_list: []
+      student_list: [],
+      // 无远程流学员列表
+      noStreamList: []
     };
   },
   watch: {
@@ -203,6 +209,16 @@ export default {
       }
     },
     streamList(newVal) {
+      let list = this.student_list.filter(item => {
+        console.log(item.room_user_id);
+        let isNoStream = true;
+        for (let i = 0; i < newVal.length; i++) {
+          if (newVal[i].id().split('-')[0] === item.room_user_id) isNoStream = false;
+        }
+        return isNoStream;
+      });
+      this.noStreamList = list;
+      console.log(list);
       if (newVal.length > 0) {
         this.$nextTick(() => {
           newVal[newVal.length - 1].show(`group-${newVal.length - 1}`);
@@ -320,6 +336,7 @@ export default {
           return GetMyGroupInfo_Teacher({ task_id: this.task_id });
         })
         .then(({ student_list }) => {
+          this.noStreamList = student_list;
           this.student_list = student_list;
         });
     },
@@ -454,6 +471,23 @@ $live-bc: #3d3938;
           width: 256px;
           height: 144px;
           margin: 8px;
+
+          &.student-info {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+            border: 2px solid #625c5b;
+
+            .el-avatar {
+              margin-top: 12px;
+            }
+
+            .student_name {
+              height: 28px;
+              color: #fff;
+            }
+          }
         }
       }