修改了直播

src/layouts/components/Header.vue

@@ -76,7 +76,6 @@ export default {
   .el-header {
     height: $header-h !important;
     line-height: $header-h;
-    background-color: $bacColor;
     text-align: center;
 
     .sign-out {

src/layouts/index.vue

@@ -37,6 +37,7 @@ export default {
     min-height: calc(100vh - #{$header-h});
     width: 100%;
     position: relative;
+    // background-color: #f9f9f9;
   }
 }
 </style>

src/views/live/index.vue

@@ -8,7 +8,6 @@
     <div class="button-group">
       <button @click="startLive">开启直播</button>
       <button @click="stopLive">结束直播</button>
-      <button @click="createLocalStream">创建本地流</button>
       <button @click="publishStream">推流</button>
     </div>
   </div>
@@ -23,7 +22,7 @@ export default {
     return {
       userid: '53A22FC29AD2216D',
       roomid: 'DCDD385394BFEDEB9C33DC5901307461',
-      sessionid: 'C94A8844123446A560B4B9BAD28543A1C206D3CB38AEB9A330590FFD7863F3D3',
+      sessionid: 'E8AD39C4C49765A5E118B74B638E57EF8F94A71FB34D5E8F56ADEF86B20D826E',
       rtc: null,
       roomData: null,
       loadedNumber: 0
@@ -31,7 +30,7 @@ export default {
   },
   watch: {
     loadedNumber(newValue) {
-      if (newValue === 2) {
+      if (newValue === 3) {
         this.initSDK();
       }
     }
@@ -40,17 +39,22 @@ export default {
     this.downloadWebSDK();
   },
   methods: {
+    // 加载直播所需 SDK，加载完成后才能初始化
     downloadWebSDK() {
       let script = this.createScript('https://class.csslcloud.net/static/dist/js/websdk_4.0.js');
 
       script.onload = () => {
         this.loadedNumber = this.loadedNumber + 1;
-        let classMode = this.createScript(
-          'https://class.csslcloud.net/static/dist/js/classMode.js'
-        );
-        classMode.onload = () => {
-          this.loadedNumber = this.loadedNumber + 1;
-        };
+        let scriptArray = [
+          'https://class.csslcloud.net/static/dist/js/classMode.js',
+          'https://class.csslcloud.net/static/dist/js/classUpdateChat.js'
+        ];
+        for (let i = 0; i < scriptArray.length; i++) {
+          let classMode = this.createScript(scriptArray[i]);
+          classMode.onload = () => {
+            this.loadedNumber = this.loadedNumber + 1;
+          };
+        }
       };
     },
     createScript(url) {
@@ -75,9 +79,6 @@ export default {
     stopLive() {
       common.stopLive(); // 结束直播
     },
-    createLocalStream() {
-      common.createLocalStream(); // 创建本地流
-    },
     publishStream() {
       common.publishStream(); // 推流
     }

src/views/live/live.js

@@ -15,12 +15,39 @@ export function initSDK(data) {
 }
 
 /**
+ * @method createLocalStram
+ * @description 创建本地流
+ */
+function createLocalStream() {
+  const createData = {
+    video: true,
+    audio: true
+  };
+  rtc.createLocalStream({
+    streamName: 'main',
+    createData,
+    success: function (stream) {
+      // 创建本地流成功，将流展示到id为 live 的dom元素盒子中
+      stream.show('live');
+      // publish(stream); // 如果需要立即推流，执行 publish 方法
+      alert('创建本地流成功');
+    },
+    fail: function (data) {
+      // 创建本地流失败，应用层处理
+      console.log(data);
+      alert('创建本地流失败');
+    }
+  });
+}
+
+/**
  * @method initListener
  * @description 初始化监听事件
  */
 export function initListener() {
   rtc.on('login_success', data => {
     console.log('登录成功', data);
+
     alert('登录成功：' + JSON.stringify(data));
   });
 
@@ -29,9 +56,11 @@ export function initListener() {
     alert('登录失败：' + JSON.stringify(data));
   });
 
+  // 必须在加入房间成功的“conference_join”事件回调里创建本地流
   rtc.on('conference_join', function () {
     // 有监听就是加入房间成功
     console.log('加入房间成功');
+    createLocalStream();
   });
 
   rtc.on('conference_join_failed', function (err) {
@@ -39,6 +68,19 @@ export function initListener() {
     console.log('加入房间失败', err);
   });
 
+  // 房间全量信息事件
+  rtc.on('room_context', function (roomData) {
+    console.log(JSON.parse(roomData));
+  });
+
+  rtc.on('publish_stream', function (str) {
+    console.log('直播已开启', str);
+  });
+
+  rtc.on('end_stream', function (str) {
+    console.log('直播已关闭', str);
+  });
+
   rtc.on('switch_user_settings', function (settingData) {
     // 单个用户配置监听
     console.log(settingData);
@@ -69,6 +111,20 @@ export function initListener() {
     console.log('推流意外终止:' + data.streamName);
     // 直播开启状态下，尝试重推这条流
   });
+
+  // 视频无法自动播放
+  rtc.on('playError', function (data) {
+    console.log(data);
+  });
+
+  // 监听聊天事件
+  rtc.on('chat_message', function (data) {
+    let dat = JSON.parse(data);
+    // data数据需要解析
+    if (dat.isFilterChat && dat.isFilterChat === 1) {
+      return;
+    }
+  });
 }
 
 /**
@@ -104,28 +160,6 @@ export function stopLive() {
 }
 
 /**
- * @method createLocalStram
- * @description 创建本地流
- */
-export function createLocalStream() {
-  rtc.createLocalStream({
-    streamName: 'main',
-    success: function (stream) {
-      // 创建本地流成功，将流展示到id为 live 的dom元素盒子中
-      stream.show('live');
-      // publish(stream); // 如果需要立即推流，执行publish方法
-      console.log(stream);
-      alert('创建本地流成功');
-    },
-    fail: function (data) {
-      // 创建本地流失败，应用层处理
-      console.log(data);
-      alert('创建本地流失败');
-    }
-  });
-}
-
-/**
  * @method closeVideo
  * @description 结束本地流
  */
@@ -150,30 +184,21 @@ export function publishStream() {
     streamName: 'main',
     // 推流成功，更新上麦结果
     success: function (stream) {
-      rtc.updateMcResult({
-        pid: 1,
-        stid: stream.id(),
-        success: function (data) {
-          alert('更新上麦结果请求成功，此处可处理应用层逻辑' + JSON.stringify(data));
-        },
-        fail: function (data) {
-          alert('更新上麦结果请求失败，此处可处理应用层逻辑' + JSON.stringify(data));
-        }
-      });
+      console.log(stream);
+      // rtc.updateMcResult({
+      //   pid: 1,
+      //   stid: stream.id(),
+      //   success: function (data) {
+      //     alert('更新上麦结果请求成功，此处可处理应用层逻辑' + JSON.stringify(data));
+      //   },
+      //   fail: function (data) {
+      //     alert('更新上麦结果请求失败，此处可处理应用层逻辑' + JSON.stringify(data));
+      //   }
+      // });
     },
-    fail: function (stream) {
+    fail: function (str) {
       // 推流失败，更新上麦结果
-      rtc.updateMcResult({
-        pid: 0,
-        stid: stream.id(),
-        success: function (data) {
-          console.log('更新上麦结果请求成功，此处可处理应用层逻辑', data);
-        },
-        fail: function (data) {
-          console.log('更新上麦结果请求失败，此处可处理应用层逻辑', data);
-        }
-      });
-      alert('推流失败，此处可处理应用层逻辑');
+      alert(str);
     }
   });
 }
@@ -249,3 +274,48 @@ export function playVideo() {
     }
   });
 }
+
+/**
+ * @description 查询直播是否开启
+ */
+export function getLiveStat() {
+  rtc.getLiveStat({
+    success: function (data) {
+      console.log('直播开启状态');
+      console.log(data);
+    },
+    fail: function (str) {
+      console.log('直播关闭状态或查询直播失败', str);
+    }
+  });
+}
+
+/**
+ * @description 开启、结束、暂停、恢复录制
+ * @param { String } status: 'start' 开启, 'end' 结束, 'pause' 暂停, 'resume' 恢复
+ */
+export function liveRecord(status) {
+  rtc.liveRecord({
+    status: status,
+    success: function (data) {
+      console.log('成功', data);
+    },
+    fail: function (str) {
+      console.log(str);
+    }
+  });
+}
+
+// 聊天组件
+
+/**
+ * @descrption 发送聊天
+ * @param {String} msg length不能超过400
+ */
+export function sendMsg(msg) {
+  rtc.sendMsg(msg);
+}
+
+export function roomUpdate() {
+  rtc.roomUpdate();
+}