将开启直播和推流都放到加入房间成功的事件回调里

src/views/live/index.vue

@@ -1,14 +1,19 @@
 <template>
-  <div class="live-container">
+  <div class="live">
     <div>
-      <div class="page-title">直播间</div>
-      <div class="title"></div>
-      <div id="live"></div>
+      <div class="live-page-title">直播间</div>
+      <div class="live-desc">{{ roomData.desc }}{{ roomData.name }}</div>
     </div>
-    <div class="button-group">
-      <button @click="startLive">开启直播</button>
-      <button @click="stopLive">结束直播</button>
-      <button @click="publishStream">推流</button>
+    <div>
+      <div class="live-left-container">
+        <div id="live"></div>
+        <div class="button-group">
+          <el-button @click="stopLive">结束直播</el-button>
+        </div>
+      </div>
+      <div class="live-right-container">
+        <div class="live-teacher-lens"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -24,7 +29,9 @@ export default {
       roomid: 'DCDD385394BFEDEB9C33DC5901307461',
       sessionid: 'E8AD39C4C49765A5E118B74B638E57EF8F94A71FB34D5E8F56ADEF86B20D826E',
       rtc: null,
-      roomData: null,
+      roomData: {
+        desc: ''
+      },
       loadedNumber: 0
     };
   },
@@ -65,22 +72,18 @@ export default {
       return script;
     },
     initSDK() {
-      common.initSDK({
+      this.rtc = common.initSDK({
         userid: this.userid,
         roomid: this.roomid,
         sessionid: this.sessionid
       });
-      common.initListener(); // 注册监听事件
-      window.rtc = this.rtc;
-    },
-    startLive() {
-      common.startLive(); // 开启直播
+      const that = this;
+      common.initListener(that); // 注册监听事件
     },
+
+    // 结束直播
     stopLive() {
-      common.stopLive(); // 结束直播
-    },
-    publishStream() {
-      common.publishStream(); // 推流
+      common.stopLive();
     }
   }
 };
@@ -89,19 +92,30 @@ export default {
 <style lang="scss">
 @import '~@/styles/mixin.scss';
 
-.live-container {
+.live {
   @include container;
 
-  .page-title {
+  &-page-title {
     font-size: 12px;
   }
-  #live {
-    width: 100%;
-    height: 300px;
+  &-desc {
+    margin: 17px 0 8px;
   }
-  .button-group {
-    button {
-      margin-right: 20px;
+
+  &-left-container {
+    width: 661px;
+    margin-top: 17px;
+
+    #live {
+      width: 100%;
+      height: 331px;
+      margin-bottom: 14px;
+    }
+
+    .button-group {
+      button {
+        margin-right: 20px;
+      }
     }
   }
 }

src/views/live/live.js

@@ -15,10 +15,54 @@ export function initSDK(data) {
 }
 
 /**
+ * @method startLive
+ * @description 开启直播
+ */
+export function startLive() {
+  rtc.startLive({
+    success(data) {
+      console.log(data);
+      alert('开启直播成功');
+    },
+    fail(data) {
+      alert(`开启直播失败：${data}`);
+    }
+  });
+}
+
+/**
+ * @method publishStream
+ * @description 推送本地流
+ */
+export function publishStream() {
+  rtc.publish({
+    streamName: 'main',
+    // 推流成功，更新上麦结果
+    success: function (stream) {
+      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 (str) {
+      // 推流失败，更新上麦结果
+      alert(str);
+    }
+  });
+}
+
+/**
  * @method createLocalStram
  * @description 创建本地流
  */
-function createLocalStream() {
+export function createLocalStream() {
   const createData = {
     video: true,
     audio: true
@@ -27,10 +71,11 @@ function createLocalStream() {
     streamName: 'main',
     createData,
     success: function (stream) {
+      console.log('创建本地流成功', stream);
       // 创建本地流成功，将流展示到id为 live 的dom元素盒子中
       stream.show('live');
-      // publish(stream); // 如果需要立即推流，执行 publish 方法
-      alert('创建本地流成功');
+      startLive();
+      publishStream(stream); // 如果需要立即推流，执行 publish 方法
     },
     fail: function (data) {
       // 创建本地流失败，应用层处理
@@ -44,11 +89,10 @@ function createLocalStream() {
  * @method initListener
  * @description 初始化监听事件
  */
-export function initListener() {
+export function initListener(vue) {
   rtc.on('login_success', data => {
     console.log('登录成功', data);
-
-    alert('登录成功：' + JSON.stringify(data));
+    vue.roomData = data;
   });
 
   rtc.on('login_failed', data => {
@@ -57,40 +101,39 @@ export function initListener() {
   });
 
   // 必须在加入房间成功的“conference_join”事件回调里创建本地流
-  rtc.on('conference_join', function () {
+  rtc.on('conference_join', () => {
     // 有监听就是加入房间成功
-    console.log('加入房间成功');
     createLocalStream();
   });
 
-  rtc.on('conference_join_failed', function (err) {
+  rtc.on('conference_join_failed', err => {
     // 加入房间失败  err为错误原因
     console.log('加入房间失败', err);
   });
 
   // 房间全量信息事件
-  rtc.on('room_context', function (roomData) {
+  rtc.on('room_context', roomData => {
     console.log(JSON.parse(roomData));
   });
 
-  rtc.on('publish_stream', function (str) {
+  rtc.on('publish_stream', str => {
     console.log('直播已开启', str);
   });
 
-  rtc.on('end_stream', function (str) {
+  rtc.on('end_stream', str => {
     console.log('直播已关闭', str);
   });
 
-  rtc.on('switch_user_settings', function (settingData) {
+  rtc.on('switch_user_settings', settingData => {
     // 单个用户配置监听
     console.log(settingData);
   });
 
-  rtc.on('speak_context', function (speakData) {
+  rtc.on('speak_context', speakData => {
     console.log(speakData); // 人员列表事件（人员麦序变化时广播）
   });
 
-  rtc.on('switch_settings', function (data) {
+  rtc.on('switch_settings', data => {
     console.log(data); // 房间设置事件
   });
 
@@ -107,18 +150,18 @@ export function initListener() {
     });
   });
 
-  rtc.on('publishStreamErr', function (data) {
+  rtc.on('publishStreamErr', data => {
     console.log('推流意外终止:' + data.streamName);
     // 直播开启状态下，尝试重推这条流
   });
 
   // 视频无法自动播放
-  rtc.on('playError', function (data) {
+  rtc.on('playError', data => {
     console.log(data);
   });
 
   // 监听聊天事件
-  rtc.on('chat_message', function (data) {
+  rtc.on('chat_message', data => {
     let dat = JSON.parse(data);
     // data数据需要解析
     if (dat.isFilterChat && dat.isFilterChat === 1) {
@@ -128,23 +171,6 @@ export function initListener() {
 }
 
 /**
- * @method startLive
- * @description 开启直播
- */
-export function startLive() {
-  rtc.startLive({
-    success(data) {
-      console.log(data);
-      alert('开启直播成功：' + JSON.stringify(data));
-    },
-    fail(data) {
-      console.log(data);
-      alert('开启直播失败：' + JSON.stringify(data));
-    }
-  });
-}
-
-/**
  * @method stopLive
  * @description 结束直播
  */
@@ -176,34 +202,6 @@ export function closeVideo() {
 }
 
 /**
- * @method publishStream
- * @description 推送本地流
- */
-export function publishStream() {
-  rtc.publish({
-    streamName: 'main',
-    // 推流成功，更新上麦结果
-    success: function (stream) {
-      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 (str) {
-      // 推流失败，更新上麦结果
-      alert(str);
-    }
-  });
-}
-
-/**
  * @method handsUp
  * @description 申请连麦
  */