hhh

src/views/live/roomMeet.vue

@@ -5,31 +5,30 @@
         <el-col :span="24" class="video">
           <el-col :span="24" class="videoMeet">
             <el-col :span="18" class="one">
-              <!-- <div id="look-video" class="video-box col-div" style="justify-content: flex-end"></div> -->
-              1
+              <div id="look-video-1" class="video-box col-div lookvideomain" style="justify-content: flex-end"></div>
             </el-col>
             <el-col :span="6" class="two">
               <el-col :span="24" class="twoOne">
-                2
+                <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">
-                3
+                <div id="look-video-3" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
               </el-col>
               <el-col :span="24" class="twoOne">
-                4
+                <div id="look-video-4" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
               </el-col>
             </el-col>
             <el-col :span="6" class="three">
-              5
+              <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">
-              6
+              <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">
-              7
+              <div id="look-video-7" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
             </el-col>
             <el-col :span="6" class="three">
-              8
+              <div id="look-video-8" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
             </el-col>
           </el-col>
           <el-col :span="24" class="videoBtn">
@@ -137,7 +136,11 @@ export default {
           const remoteStream = event.stream;
           // 远端流订阅成功，播放远端音视频流
           console.log('111' + remoteStream.getType());
-          remoteStream.play('look-video');
+          i = i + 1;
+          if (i < 8) {
+            const id_ = 'look-video-' + i;
+            remoteStream.play(id_);
+          }
         });
         // 监听远端流增加事件
         this.client_.on('stream-added', event => {
@@ -163,7 +166,7 @@ export default {
       console.log('initialize local stream success');
       // publish the local stream
       await this.client_.publish(this.localStream_);
-      this.localStream_.play('look-video');
+      this.localStream_.play('look-video-8');
     },
     imgclick(url) {
       location.href = url;
@@ -194,28 +197,25 @@ export default {
 .info {
   .video {
     position: relative;
+    background: #000;
     height: 280px;
     overflow: hidden;
     .videoMeet {
       .one {
         height: 210px;
         overflow: hidden;
-        border: 1px solid red;
       }
       .two {
         height: 210px;
         overflow: hidden;
-        border: 1px solid blue;
         .twoOne {
           height: 70px;
           overflow: hidden;
-          border: 1px solid blue;
         }
       }
       .three {
         height: 70px;
         overflow: hidden;
-        border: 1px solid cyan;
       }
     }
     .videoBtn {
@@ -259,9 +259,14 @@ export default {
   height: 190px !important;
   border-radius: 10px;
 }
-#look-video {
+.lookvideomain {
   width: 100%;
-  height: 200px;
+  height: 210px;
+  grid-area: 1/1/3/4;
+}
+.lookvideo {
+  width: 100%;
+  height: 70px;
   grid-area: 1/1/3/4;
 }
 </style>