增加直播

src/layout/live/detailInfo.vue

@@ -14,23 +14,23 @@
               </p>
               <div class="two">
                 <el-col :span="16" class="select">
-                  <el-select v-model="value" filterable placeholder="请选择摄像头">
-                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                  <el-select v-model="cameraId" filterable placeholder="请选择摄像头">
+                    <el-option v-for="item in cameras" :key="item.deviceId" :label="item.label" :value="item.deviceId"> </el-option>
                   </el-select>
-                  <el-select v-model="value" filterable placeholder="请选择麦克风">
-                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                  <el-select v-model="microphoneId" filterable placeholder="请选择麦克风">
+                    <el-option v-for="item in microphones" :key="item.deviceId" :label="item.label" :value="item.deviceId"> </el-option>
                   </el-select>
                 </el-col>
                 <el-col :span="8" class="btn">
-                  <span><i class="iconfont iconfenxiang"></i>分享</span>
-                  <span><i class="iconfont iconshexiangtou"></i>摄像头</span>
+                  <span @click="shareon"><i class="iconfont iconfenxiang"></i>分享</span>
+                  <span @click="liveon"><i class="iconfont iconshexiangtou"></i>摄像头</span>
                   <span><i class="iconfont iconmaikefeng"></i>麦克风</span>
                 </el-col>
               </div>
             </el-col>
           </el-col>
           <el-col :span="24" class="video">
-            直播画面
+            <div id="main-video" class="video-box col-div" style="justify-content: flex-end"></div>
           </el-col>
         </el-col>
         <el-col :span="10" class="right">
@@ -45,6 +45,8 @@
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: gensign } = createNamespacedHelpers('gensign');
+import TRTC from 'trtc-js-sdk';
 export default {
   name: 'detailInfo',
   props: {
@@ -53,14 +55,100 @@ export default {
   components: {},
   data: function() {
     return {
-      options: [],
-      value: '',
+      client_: '',
+      localStream_: '',
+      sdkAppId_: '1400380125',
+      cameras: [],
+      microphones: [],
+      cameraId: '',
+      microphoneId: '',
+      userSig_: '',
     };
   },
-  created() {},
-  methods: {},
+  created() {
+    this.initclient();
+    this.getDevices();
+  },
+  methods: {
+    ...gensign(['gensignFetch']),
+    async getDevices() {
+      this.cameras = await TRTC.getCameras();
+      this.microphones = await TRTC.getMicrophones();
+    },
+    async initclient() {
+      const res = await this.gensignFetch(this.id);
+      if (this.$checkRes(res)) {
+        this.userSig_ = res.data;
+        console.log(res);
+        this.client_ = TRTC.createClient({
+          mode: 'live',
+          sdkAppId: this.sdkAppId_,
+          userId: this.user.uid,
+          userSig: res.data,
+        });
+      }
+    },
+    async liveon() {
+      if (this.cameraId === '' || this.microphoneId === '') {
+        this.$message({
+          message: '请选择摄像头和麦克风',
+          type: 'warning',
+        });
+        return;
+      }
+      await this.client_.join({ roomId: this.name, role: 'anchor' });
+      const localStream_ = TRTC.createStream({
+        audio: true,
+        video: true,
+        cameraId: this.cameraId,
+        microphoneId: this.microphoneId,
+        userId: this.userId_,
+      });
+      await localStream_.initialize();
+      console.log('initialize local stream success');
+      // publish the local stream
+      await this.client_.publish(localStream_);
+      localStream_.play('main-video');
+      //$('#mask_main').appendTo($('#player_' + this.localStream_.getId()));
+    },
+    async shareon() {
+      const shareId = 'share-' + this.userId_;
+      const res = await this.gensignFetch(shareId);
+      if (this.$checkRes(res)) {
+        const shareClient = TRTC.createClient({
+          mode: 'videoCall',
+          sdkAppId: this.sdkAppId_,
+          userId: shareId,
+          userSig: res.data,
+        });
+        shareClient.setDefaultMuteRemoteStreams(true);
+        await shareClient.join({ roomId: this.name });
+        const localStream = TRTC.createStream({ audio: false, screen: true });
+        await localStream.initialize();
+        console.log('initialize share stream success');
+        await shareClient.publish(localStream);
+        this.client_.on('stream-added', event => {
+          const remoteStream = event.stream;
+          const remoteUserId = remoteStream.getUserId();
+          if (remoteUserId === shareId) {
+            // 取消订阅自己的屏幕分享流
+            this.client_.unsubscribe(remoteStream);
+          } else {
+            // 订阅其他一般远端流
+            this.client_.subscribe(remoteStream);
+          }
+        });
+      }
+    },
+  },
   computed: {
     ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+    name() {
+      return this.$route.query.name;
+    },
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
@@ -133,10 +221,17 @@ export default {
     }
   }
   .right {
-    width: 40%;
+    width: 39%;
     min-height: 800px;
     border: 1px solid cyan;
     margin: 0 0 0 20px;
   }
+  #main-video {
+    float: left;
+    width: 100%;
+    height: 600px;
+    min-height: 600px;
+    grid-area: 1/1/3/4;
+  }
 }
 </style>

src/views/live/detail.vue

@@ -18,7 +18,6 @@ import topInfo from '@/layout/public/top.vue';
 import detailInfo from '@/layout/live/detailInfo.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: room } = createNamespacedHelpers('room');
-const { mapActions: gensign } = createNamespacedHelpers('gensign');
 export default {
   name: 'detail',
   props: {},
@@ -36,17 +35,15 @@ export default {
   },
   methods: {
     ...room(['query', 'delete', 'update', 'fetch']),
-    ...gensign(['gensignFetch']),
     async searchInfo() {
       let res = await this.fetch(this.id);
       if (this.$checkRes(res)) {
         this.$set(this, `roomInfo`, res.data);
       }
-      res = await this.gensignFetch(this.id);
-      console.log(res);
     },
   },
   computed: {
+    ...mapState(['user']),
     id() {
       return this.$route.query.id;
     },