hh

src/layout/live/detailmetting.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="detailInfo">
+  <div id="detailmetting">
     <el-row>
       <el-col :span="24" class="info">
         <el-col :span="4" class="left">
@@ -26,12 +26,37 @@
           </el-col>
           <el-col :span="2" class="noVideo"> </el-col>
           <el-col :span="20" class="video">
-            <div id="main-video" class="video-box col-div" style="justify-content: flex-end"></div>
+            <el-col :span="24" class="videoMeet">
+              <el-col :span="18" class="one">
+                <div id="main-video" class="video-box col-div" style="justify-content: flex-end"></div>
+              </el-col>
+              <el-col :span="6" class="two">
+                <el-col :span="24" class="twoOne">
+                  <div id="look-video-1" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
+                </el-col>
+                <el-col :span="24" class="twoOne">
+                  <div id="look-video-2" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
+                </el-col>
+                <el-col :span="24" class="twoOne">
+                  <div id="look-video-3" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
+                </el-col>
+              </el-col>
+              <el-col :span="6" class="three">
+                <div id="look-video-4" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
+              </el-col>
+              <el-col :span="6" class="three">
+                <div id="look-video-5" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
+              </el-col>
+              <el-col :span="6" class="three">
+                <div id="look-video-6" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
+              </el-col>
+              <el-col :span="6" class="three">
+                <div id="look-video-7" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
+              </el-col>
+            </el-col>
           </el-col>
           <el-col :span="2" class="noVideo"> </el-col>
-          <el-col :span="24" class="rightDown">
-            <!-- 开始直播 -->
-          </el-col>
+          <el-col :span="24" class="rightDown"> <!-- 开始直播 --> </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -53,7 +78,7 @@ import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: gensign } = createNamespacedHelpers('gensign');
 import TRTC from 'trtc-js-sdk';
 export default {
-  name: 'detailInfo',
+  name: 'detailmetting',
   props: {
     roomInfo: null,
   },
@@ -125,36 +150,29 @@ export default {
       await this.client_.publish(this.localStream_);
       this.localStream_.play('main-video');
       //$('#mask_main').appendTo($('#player_' + this.localStream_.getId()));
+      this.shareon();
     },
     async shareon() {
-      const shareId = 'share-' + this.userId_;
-      const res = await this.gensignFetch({ userid: 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: true, screen: true });
-        //localStream.setScreenProfile({ width: 200, height: 200, float: 'left', frameRate: 5, bitrate: 1600 /* kbps */ });
-        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);
-          }
+      let i = 0;
+      this.client_.on('stream-subscribed', event => {
+        const remoteStream = event.stream;
+        // 远端流订阅成功，播放远端音视频流
+        console.log('111' + remoteStream.getType());
+        i = i + 1;
+        if (i < 8) {
+          const id_ = 'look-video-' + i;
+          remoteStream.play(id_);
+        }
+      });
+      // 监听远端流增加事件
+      this.client_.on('stream-added', event => {
+        const remoteStream = event.stream;
+        console.log('222' + remoteStream.getType());
+        // 订阅远端音频和视频流
+        this.client_.subscribe(remoteStream, { audio: true, video: true }).catch(e => {
+          console.error('failed to subscribe remoteStream');
         });
-      }
+      });
     },
     async liveclose() {
       // 关闭视频通话
@@ -260,6 +278,26 @@ export default {
     .video {
       min-height: 640px;
       background-color: #000;
+      overflow: hidden;
+      position: relative;
+      .videoMeet {
+        .one {
+          height: 480px;
+          overflow: hidden;
+        }
+        .two {
+          height: 480px;
+          overflow: hidden;
+          .twoOne {
+            height: 160px;
+            overflow: hidden;
+          }
+        }
+        .three {
+          height: 160px;
+          overflow: hidden;
+        }
+      }
     }
     .noVideo {
       min-height: 640px;
@@ -277,8 +315,8 @@ export default {
 #main-video {
   float: left;
   width: 100%;
-  height: 640px;
-  min-height: 600px;
+  height: 480px;
+  min-height: 480px;
   grid-area: 1/1/3/4;
 }
 </style>