update

src/api/live.js

@@ -299,3 +299,18 @@ export function DealStudentConnection(data) {
     data
   });
 }
+
+/**
+ * 得到处于连线状态下的学员信息（等待连线或连线中）
+ * @param {Object} data
+ */
+export function GetStudentInfo_Connection(data) {
+  let params = getRequestParams('live_room-live_room_dispatch-GetStudentInfo_Connection');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params,
+    data
+  });
+}

src/views/live/common.js

@@ -1,3 +1,4 @@
+import store from '@/store';
 import { Message } from 'element-ui';
 
 /**
@@ -70,16 +71,29 @@ export function publishStream(streamName) {
 }
 
 /**
+ * 得到创建本地流参数对象
+ */
+export function createData() {
+  let device = store.state.app.liveDevice;
+  let video =
+    device.video.length > 0
+      ? { device: 'camera', resolution: 'vga', deviceId: device.video }
+      : false;
+  let audio = device.audio.length > 0 ? { deviceId: device.audio } : false;
+
+  return {
+    video,
+    audio
+  };
+}
+
+/**
  * 创建本地流
  */
 export function createLocalStream(streamName) {
-  const createData = {
-    video: true,
-    audio: true
-  };
   rtc.createLocalStream({
     streamName,
-    createData,
+    createData: createData(),
     success(stream) {
       console.log('创建本地流成功', stream);
       // 创建本地流成功，将流展示到id为 live 的dom元素盒子中
@@ -102,10 +116,10 @@ export function createLocalStream(streamName) {
 export function closeVideo(streamName) {
   rtc.closeVideo({
     streamName,
-    success: function () {
+    success() {
       console.log('结束本地流成功');
     },
-    fail: function (str) {
+    fail(str) {
       console.log(str);
     }
   });
@@ -130,10 +144,10 @@ export function reconnection() {
 export function pauseAudio() {
   rtc.pauseAudio({
     streamName: 'main',
-    success: function () {
+    success() {
       console.log('关闭本地流声音成功');
     },
-    fail: function (str) {
+    fail(str) {
       console.log(str);
     }
   });
@@ -145,11 +159,11 @@ export function pauseAudio() {
 export function playAudio() {
   rtc.playAudio({
     streamName: 'main',
-    success: function (data) {
+    success(data) {
       console.log(data);
       console.log('开启本地流声音成功');
     },
-    fail: function (str) {
+    fail(str) {
       console.log(str);
     }
   });
@@ -161,10 +175,10 @@ export function playAudio() {
 export function pauseVideo() {
   rtc.pauseVideo({
     streamName: 'main',
-    success: function () {
+    success() {
       console.log('关闭本地流视频画面成功');
     },
-    fail: function (str) {
+    fail(str) {
       console.log(str);
     }
   });
@@ -176,10 +190,10 @@ export function pauseVideo() {
 export function playVideo() {
   rtc.playVideo({
     streamName: 'main',
-    success: function () {
+    success() {
       console.log('开启本地流视频画面成功');
     },
-    fail: function (str) {
+    fail(str) {
       console.log(str);
     }
   });

src/views/live/student/group.js

@@ -1,6 +1,5 @@
-import store from '@/store';
 import { Message } from 'element-ui';
-import { rtc, publishStream, closeVideo } from '@/views/live/common';
+import { rtc, publishStream, closeVideo, createData } from '@/views/live/common';
 export {
   initSDK,
   sendMsg,
@@ -54,19 +53,10 @@ export function initListener(vue) {
       success: str => {
         console.log('举手成功', str);
         console.log('创建本地流推流');
-        let device = store.state.app.liveDevice;
-        let video =
-          device.video.length > 0
-            ? { device: 'camera', resolution: 'vga', deviceId: device.video }
-            : false;
-        let audio = device.audio.length > 0 ? { deviceId: device.audio } : false;
-        const createData = {
-          video,
-          audio
-        };
+
         rtc.createLocalStream({
           streamName: 'picture',
-          createData,
+          createData: createData(),
           success(stream) {
             console.log('创建本地流成功', stream);
             // 创建本地流成功，将流展示到id为 student 的dom元素盒子中

src/views/live/student/index.vue

@@ -164,7 +164,10 @@ export default {
       // 已连接
       connect: false,
       invite: false,
-      connectStudent: '',
+      connectStudent: {},
+      // 连线状态
+      connection_status: 0,
+      connection_mode: 1,
       // 等待接通
       callLoading: false,
       dialogVisibleMaterial: false,
@@ -264,8 +267,6 @@ export default {
     }
   },
   created() {
-    CreateEnterLiveRoomSession({ task_id: this.task_id });
-
     GetGroupStatus({ task_id: this.task_id }).then(({ is_enable_group }) => {
       if (is_enable_group === 'true') {
         this.$router.push({
@@ -277,9 +278,16 @@ export default {
           text: '加载直播所需SDK中...',
           background: '#fff'
         });
-        common.downloadWebSDK(this);
         this.getLiveRoomStudentList();
         this.getLiveRoomInfo();
+
+        CreateEnterLiveRoomSession({
+          task_id: this.task_id
+        }).then(({ connection_status, connection_mode }) => {
+          common.downloadWebSDK(this);
+          this.connection_status = connection_status;
+          this.connection_mode = connection_mode;
+        });
       }
     });
   },
@@ -307,7 +315,8 @@ export default {
           course_name,
           teacher_name,
           student_count,
-          teacher_image_url
+          teacher_image_url,
+          student_connection_info
         }) => {
           this.roomInfo = {
             room_id,
@@ -319,6 +328,7 @@ export default {
             student_count,
             teacher_image_url
           };
+          this.connectStudent = student_connection_info;
         }
       );
     },

src/views/live/student/live.js

@@ -40,14 +40,14 @@ export function handsUp(data) {
 /**
  * 取消订阅远程流
  */
-function unSubscribeStream(stream) {
+function unSubscribeStream(unSubStream) {
   rtc.unSubscribeStream({
-    unSubStream: stream,
-    success: function (str) {
+    unSubStream,
+    success(str) {
       console.log('取消订阅流成功', str);
     },
 
-    fail: function (str) {
+    fail(str) {
       console.log(str);
     }
   });
@@ -124,14 +124,14 @@ export function initListener(vue) {
   });
 
   // 新增订阅流事件
-  rtc.on('allow_sub', stream => {
-    if (stream.isMixed()) {
+  rtc.on('allow_sub', tryStream => {
+    if (tryStream.isMixed()) {
       console.log('是混合流,不订阅');
     } else {
       // 订阅远程流
       rtc.trySubscribeStream({
-        tryStream: stream,
-        success: stream => {
+        tryStream,
+        success(stream) {
           // 订阅流成功
           let streamType = stream.streamType();
           vue.remoteStreamType = streamType;
@@ -143,7 +143,7 @@ export function initListener(vue) {
             vue.callLoading = false;
           }
         },
-        fail: function (err) {
+        fail(err) {
           console.log('订阅流失败', err);
         }
       });
@@ -225,16 +225,20 @@ export function initListener(vue) {
   });
 
   // 监听通知移除流事件
-  rtc.on('stream_removed', function (stream) {
-    console.log('监听通知移除流事件');
-    vue.connect = false;
-    vue.remoteStreamType = -1;
-    vue.connectStudent = '';
+  rtc.on('stream_removed', stream => {
+    console.log('监听通知移除流事件', stream);
+    if (stream.streamType() === 10) {
+      vue.connect = false;
+      vue.remoteStreamType = -1;
+    }
+    if (stream.streamType() === 1) {
+      vue.connect = false;
+    }
   });
 
   // 停止订阅流
-  rtc.on('unSub', function (stream) {
-    console.log('停止订阅流');
+  rtc.on('unSub', stream => {
+    console.log('停止订阅流', stream);
     unSubscribeStream(stream);
   });
 
@@ -250,8 +254,10 @@ export function initListener(vue) {
     vue.invite = true;
   });
 
+  // 下麦成功后的监听事件
   rtc.on('mcDown', () => {
     closeVideo('picture');
+    vue.dealStudentConnection(vue.room_user_id, 0, vue.roomInfo.video_mode);
     vue.connect = false;
     vue.invite = false;
   });

src/views/live/teacher/group.js

@@ -1,6 +1,5 @@
-import store from '@/store';
 import { Message } from 'element-ui';
-import { rtc, updateMcResult, createScript } from '@/views/live/common';
+import { rtc, updateMcResult, createScript, createData } from '@/views/live/common';
 export { initSDK, sendMsg, closeVideo, roomUpdate, chatRoll } from '@/views/live/common';
 
 /**
@@ -26,19 +25,9 @@ function publishStream(streamName) {
  * 创建本地流
  */
 function createLocalStream() {
-  let device = store.state.app.liveDevice;
-  let video =
-    device.video.length > 0
-      ? { device: 'camera', resolution: 'vga', deviceId: device.video }
-      : false;
-  let audio = device.audio.length > 0 ? { deviceId: device.audio } : false;
-  const createData = {
-    video,
-    audio
-  };
   rtc.createLocalStream({
     streamName: 'main',
-    createData,
+    createData: createData(),
     success(stream) {
       console.log('创建本地流成功', stream);
       // 创建本地流成功，将流展示到id为 live 的 dom 元素盒子中

src/views/live/teacher/index.vue

@@ -217,7 +217,8 @@ import {
   StudentExitLiveRoom,
   StartGroup,
   GetGroupStatus,
-  DealStudentConnection
+  DealStudentConnection,
+  GetStudentInfo_Connection
 } from '@/api/live';
 import { app } from '@/store/mutation-types';
 import SelectMaterial from '@/components/live/SelectMaterial.vue';
@@ -236,6 +237,7 @@ export default {
       task_id: this.$route.query.task_id,
       // 连麦
       connect: false,
+      // 连线学员信息
       connectStudent: {},
       // 等待接通
       callLoading: false,
@@ -267,7 +269,8 @@ export default {
         cs_item_name: '',
         course_name: '',
         teacher_name: '',
-        student_count: 0
+        student_count: 0,
+        student_connection_info: {}
       },
       loadedNumber: 0,
       speakData: {},
@@ -314,12 +317,7 @@ export default {
       return '#38d514';
     },
     connectUid() {
-      let connect = this.student_list.find(item => item.connection_status !== 0);
-      let room_user_id = connect ? connect.room_user_id : '';
-
-      return 'room_user_id' in this.connectStudent
-        ? this.connectStudent.room_user_id
-        : room_user_id;
+      return 'room_user_id' in this.connectStudent ? this.connectStudent.room_user_id : '';
     }
   },
   watch: {
@@ -407,7 +405,8 @@ export default {
           cs_item_name,
           course_name,
           teacher_name,
-          student_count
+          student_count,
+          student_connection_info
         }) => {
           this.roomInfo = {
             room_id,
@@ -416,8 +415,17 @@ export default {
             cs_item_name,
             course_name,
             teacher_name,
-            student_count
+            student_count,
+            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;
+          }
+          if (student_connection_info.connection_status === 2) {
+            this.connect = true;
+          }
         }
       );
     },
@@ -433,6 +441,12 @@ export default {
       common.startLive();
     },
 
+    getStudentInfo_Connection() {
+      return GetStudentInfo_Connection({ task_id: this.task_id }).then(
+        ({ room_user_id }) => room_user_id
+      );
+    },
+
     getLiveStat() {
       common.getLiveStat({
         success: data => {
@@ -538,6 +552,7 @@ export default {
           this.dealStudentConnection(connectUid, 0, this.connectStudent.connection_mode);
 
           this.callLoading = false;
+          this.connect = false;
           common.updateMcResult('', 0);
           this.$message.success('下麦成功');
           this.connectStudent = {};

src/views/live/teacher/live.js

@@ -1,6 +1,6 @@
 import { Message } from 'element-ui';
 import store from '@/store';
-import { rtc, updateMcResult, getDevice } from '@/views/live/common';
+import { rtc, updateMcResult, getDevice, createData } from '@/views/live/common';
 export {
   initSDK,
   downloadWebSDK,
@@ -42,20 +42,9 @@ function publishStream(streamName) {
  * 创建本地流
  */
 export function createLocalStream() {
-  let device = store.state.app.liveDevice;
-  let video =
-    device.video.length > 0
-      ? { device: 'camera', resolution: 'vga', deviceId: device.video }
-      : false;
-  let audio = device.audio.length > 0 ? { deviceId: device.audio } : false;
-
-  const createData = {
-    video,
-    audio
-  };
   rtc.createLocalStream({
     streamName: 'main',
-    createData,
+    createData: createData(),
     success(stream) {
       console.log('创建本地流成功', stream);
       // 创建本地流成功，将流展示到id为 live 的 dom 元素盒子中
@@ -263,11 +252,11 @@ export function initListener(vue) {
   // 监听通知移除流事件
   rtc.on('stream_removed', stream => {
     console.log('监听通知移除流事件', stream);
-    vue.connect = false;
-    vue.remoteStreamType = -1;
-    if ('room_user_id' in vue.connectStudent && stream.streamType() === 10) {
+    if ('room_user_id' in vue.connectStudent && stream.streamType() === 10 && vue.connect) {
       vue.handsDown();
     }
+    vue.connect = false;
+    vue.remoteStreamType = -1;
   });
 
   // 停止订阅流