hh

src/views/live/parts/roomsDetail.vue

@@ -4,11 +4,11 @@
       <el-col :span="24" class="info">
         <el-col :span="24" class="video">
           <el-col :span="24" class="videoLeft">
-            <div id="look-video" class="video-box col-div" style="justify-content: flex-end"></div>
+            <div id="look-video-left" class="video-box col-div" style="justify-content: flex-end"></div>
+          </el-col>
+          <el-col :span="9" class="videoRight">
+            <div id="look-video-right" class="video-box col-div" style="justify-content: flex-end"></div>
           </el-col>
-          <!-- <el-col :span="9" class="videoRight">
-            右侧
-          </el-col> -->
         </el-col>
         <el-col :span="24" class="chat">
           <el-col :span="24" class="chatList">
@@ -63,18 +63,21 @@ export default {
           userSig: res.data,
         });
         await this.client_.join({ roomId: this.roomname, role: 'audience' });
-        this.client_.set
+        this.client_.set;
         this.client_.on('stream-subscribed', event => {
           const remoteStream = event.stream;
           // 远端流订阅成功，播放远端音视频流
-          remoteStream.setVideoProfile({ width: '50%', height: 200, float: 'left', frameRate: 15, bitrate: 900 /* kpbs */});
-          remoteStream.play('look-video');
+          console.log(remoteStream.getType());
+          if (remoteStream.getType() === 'main') {
+            remoteStream.play('look-video-right');
+          } else {
+            remoteStream.play('look-video-left');
+          }
         });
         // 监听远端流增加事件
         this.client_.on('stream-added', event => {
           const remoteStream = event.stream;
           // 订阅远端音频和视频流
-          remoteStream.setScreenProfile({ width: '50%', height: 200, float: 'left', frameRate: 5, bitrate: 1600 /* kbps */});
           this.client_.subscribe(remoteStream, { audio: false, video: true }).catch(e => {
             console.error('failed to subscribe remoteStream');
           });
@@ -142,14 +145,14 @@ export default {
   height: 190px !important;
   border-radius: 10px;
 }
-#look-video {
-  float: left;
+#look-video-left {
+  width: 100%;
+  height: 200px;
+  grid-area: 1/1/3/4;
+}
+#look-video-right {
   width: 100%;
   height: 200px;
   grid-area: 1/1/3/4;
-  div {
-    float: left;
-    width: 50%;
-  }
 }
 </style>