git push

src/views/live/common.js

@@ -77,7 +77,7 @@ export function createData() {
   let device = store.state.app.liveDevice;
   let video =
     device.video.length > 0
-      ? { device: 'camera', resolution: 'vga', deviceId: device.video }
+      ? { device: 'camera', resolution: 'sif', deviceId: device.video }
       : false;
   let audio = device.audio.length > 0 ? { deviceId: device.audio } : false;
 

src/views/live/student/group.vue

@@ -21,17 +21,25 @@
       <!-- 左侧 -->
       <div class="group-container-left">
         <div class="group-discussion">
-          <div v-show="localStream" id="group-local" class="group-box"></div>
+          <!-- 本地流 -->
+          <div v-show="localStream" class="group-wrapper">
+            <div id="group-local" class="group-box"></div>
+            <div class="live-wrapper-stream">
+              {{ studentSelf.student_name }}
+            </div>
+          </div>
           <div v-show="!localStream" class="group-box student-info">
-            <el-avatar icon="el-icon-user" :src="studentSelf.student_image_url" :size="100" />
+            <el-avatar icon="el-icon-user" :src="studentSelf.student_image_url" :size="80" />
             <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, i) in streamList" :key="item.id()" class="group-wrapper">
+            <div :id="`group-${i}`" class="group-box"></div>
+            <div class="live-wrapper-stream">
+              {{ searchStudentName(item.id()) }}
+            </div>
+          </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>
@@ -314,6 +322,15 @@ export default {
       }, 5000);
     },
 
+    searchStudentName(id) {
+      let uid = id.split('-')[0];
+      if (uid) {
+        let student = this.student_list.find(item => item.room_user_id === uid);
+        return student ? student.student_name : '';
+      }
+      return '';
+    },
+
     getMyGroupInfo_Student() {
       GetMyGroupInfo_Student({
         task_id: this.task_id
@@ -424,6 +441,24 @@ $live-bc: #3d3938;
             }
           }
         }
+
+        .group-wrapper {
+          position: relative;
+
+          .live-wrapper-stream {
+            position: absolute;
+            top: 120px;
+            height: 32px;
+            width: calc(100% - 16px);
+            background-color: #000;
+            opacity: 0.7;
+            color: #fff;
+            line-height: 32px;
+            text-align: center;
+            margin: 0 8px;
+            transition: all 300ms ease-in 0s;
+          }
+        }
       }
 
       .button-group {

src/views/live/student/live.js

@@ -273,7 +273,7 @@ export function initListener(vue) {
       let device = store.state.app.liveDevice;
       let video =
         device.video.length > 0
-          ? { device: 'camera', resolution: 'vga', deviceId: device.video }
+          ? { device: 'camera', resolution: 'sif', deviceId: device.video }
           : false;
       let audio = device.audio.length > 0 ? { deviceId: device.audio } : false;
 

src/views/live/teacher/group.vue

@@ -37,12 +37,13 @@
           </template>
         </div>
         <div v-show="isGroup" class="group-discussion">
-          <div
-            v-for="(item, i) in streamList"
-            :id="`group-${i}`"
-            :key="item.id()"
-            class="group-box"
-          ></div>
+          <div v-for="(item, i) in streamList" :key="item.id()" class="group-wrapper">
+            <div :id="`group-${i}`" class="group-box"></div>
+            <div class="live-wrapper-stream">
+              {{ searchStudentName(item.id()) }}
+            </div>
+          </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>
@@ -341,6 +342,15 @@ export default {
         });
     },
 
+    searchStudentName(id) {
+      let uid = id.split('-')[0];
+      if (uid) {
+        let student = this.student_list.find(item => item.room_user_id === uid);
+        return student ? student.student_name : '';
+      }
+      return '';
+    },
+
     exitCurGroup_Teacher() {
       ExitCurGroup_Teacher({ task_id: this.task_id }).then(() => {
         this.isGroup = false;
@@ -489,6 +499,24 @@ $live-bc: #3d3938;
             }
           }
         }
+
+        .group-wrapper {
+          position: relative;
+
+          .live-wrapper-stream {
+            position: absolute;
+            top: 120px;
+            height: 32px;
+            width: calc(100% - 16px);
+            background-color: #000;
+            opacity: 0.7;
+            color: #fff;
+            line-height: 32px;
+            text-align: center;
+            margin: 0 8px;
+            transition: all 300ms ease-in 0s;
+          }
+        }
       }
 
       .button-group {

src/views/live/teacher/index.vue

@@ -419,7 +419,6 @@ export default {
             student_connection_info
           };
           this.connectStudent = student_connection_info;
-          this.roomInfo.video_mode = student_connection_info.connection_mode;
           if (student_connection_info.connection_status === 1) {
             this.callLoading = true;
           }
@@ -478,6 +477,7 @@ export default {
       GetLiveRoomInfo({ task_id: this.task_id })
         .then(({ video_mode }) => {
           let uid = student.room_user_id;
+          this.roomInfo.video_mode = mode;
           if (video_mode === mode) {
             this.inviteStudent(uid, student, mode);
           } else {
@@ -485,7 +485,6 @@ export default {
               video_mode: mode,
               roomUpdateSuccess: data => {
                 console.log(data, '连麦音视频模式更新请求成功！');
-                this.roomInfo.video_mode = mode;
                 this.inviteStudent(uid, student, mode);
               },
               roomUpdateFailed: data => {