hhh

src/views/live/roomDetail.vue

@@ -11,18 +11,16 @@
               <van-col id="look-video-left" :span="stremlist.length == 2 ? 16 : 0" :style="{ height: oheight }"> </van-col>
               <van-col id="look-video-right" :style="{ height: oheight }" :span="stremlist.length == 1 ? 24 : 8"> </van-col>
             </div>
-            <div
-              id="othediv"
-              v-show="othedivshow"
-              :style="{ transform: transform, height: otheheight, width: vwidth, padding: othepadding, position: 'absolute' }"
-            >
-              <div id="otheplaydiv" :style="{ height: otheheight, width: vwidth, background: background_ }">
-                <div id="othe-video-1" :style="{ height: otheheight, width: othewidth }" class="video-box col-div othe-video-left"></div>
-                <div id="othe-video-2" :style="{ height: otheheight, width: othewidth }" class="video-box col-div othe-video-left"></div>
-                <div id="othe-video-3" :style="{ height: otheheight, width: othewidth }" class="video-box col-div othe-video-left"></div>
-                <div id="othe-video-4" :style="{ height: otheheight, width: othewidth }" class="video-box col-div othe-video-left"></div>
-                <div id="othe-video-5" :style="{ height: otheheight, width: othewidth }" class="video-box col-div othe-video-left"></div>
-              </div>
+            <div id="othediv" v-show="othedivshow" :style="{ transform: transform, width: vwidth, padding: othepadding, position: 'absolute' }">
+              <el-col
+                :span="24"
+                id="otheplaydiv"
+                :style="{ height: otheheight, width: vwidth, background: background_ }"
+                v-for="(item, index) in stremMeetlist"
+                :key="index"
+              >
+                <div :id="item.id" :style="{ height: otheheight, width: othewidth }" class="video-box col-div othe-video-left"></div>
+              </el-col>
             </div>
           </van-overlay>
         </el-col>
@@ -395,9 +393,14 @@ export default {
         }
         if (body.switchrole === 'audience') {
           const oldstrem_ = _.find(this.stremlist, { type: 'mainr' });
-          this.stermStop(oldstrem_.strem);
-          this.stermPlay(oldstrem_.strem, 'look-video-right');
+          if (oldstrem_) {
+            this.stermStop(oldstrem_.strem);
+            this.stermPlay(oldstrem_.strem, 'look-video-right');
+          }
+          console.log('移除body.userid--' + body.userid);
+          console.log('移除this.user.uid--' + this.user.uid);
           if (body.userid === this.user.uid) {
+            console.log(this.localStream_);
             this.stermStop(this.localStream_);
             this.localStream_.muteAudio();
             this.localStream_.muteVideo();
@@ -516,7 +519,7 @@ export default {
       await this.client_.publish(this.localStream_);
       this.index_ = this.index_ + 1;
 
-      if (this.index_ < 6) {
+      if (this.index_ < 11) {
         // const otheplaydiv = document.getElementById('otheplaydiv');
         const id_ = 'othe-video-' + this.index_;
         const newdata_ = { strem: this.localStream_, index: this.index_, id: id_, swichuserid: this.userId_ };
@@ -526,7 +529,10 @@ export default {
         const newdata = { swichuserid: this.userId_, swichindex: this.index_ };
         this.swichusers.push(newdata);
         console.log('将用户push到列表里' + this.swichusers);
-        this.localStream_.play(id_);
+
+        this.$nextTick(() => {
+          this.localStream_.play(id_);
+        });
       }
     },
     async questSearch() {
@@ -730,7 +736,7 @@ export default {
             this.otheheight = '70px';
             this.iscamera = true;
             this.index_ = this.index_ + 1;
-            if (this.index_ < 6) {
+            if (this.index_ < 11) {
               const id_ = 'othe-video-' + this.index_;
               const newdata_ = { strem: remoteStream, index: this.index_, id: id_, swichuserid: userid_zs };
               this.stremMeetlist.push(newdata_);
@@ -739,12 +745,14 @@ export default {
               this.swichusers.push(newdata);
               console.log('将用户push到列表里' + newdata);
               this.stermStop(remoteStream);
-              remoteStream.play(id_);
+              this.$nextTick(() => {
+                remoteStream.play(id_);
+              });
             }
           } else if (useridsplit_ === 'wxxcx') {
             console.log('小程序进入画面' + this.index_);
             this.index_ = this.index_ + 1;
-            if (this.index_ < 6) {
+            if (this.index_ < 11) {
               const id_ = 'othe-video-' + this.index_;
               console.log(id_);
               remoteStream.play(id_);
@@ -808,14 +816,15 @@ export default {
         this.client_.on('mute-video', event => {
           const userid_ = event.userId;
           const useridsplit_ = userid_.substring(0, 5);
+          const useridzs_ = userid_.substring(6);
           if (useridsplit_ === 'wxxcx' || useridsplit_ === 'meetu') {
-            console.log('退出userid_' + useridsplit_);
-            const swichstrem = _.find(this.stremMeetlist, { swichuserid: userid_ });
-            this.stermStop(swichstrem.strem);
-            // 订阅远端音频和视频流
-            if (this.index_ > 0) {
-              this.index_ = this.index_ - 1;
-            }
+            console.log('退出userid_' + useridzs_);
+            const swichstrem = _.find(this.stremMeetlist, { swichuserid: useridzs_ });
+            // this.stermStop(swichstrem.strem);
+            // // 订阅远端音频和视频流
+            // if (this.index_ > 0) {
+            //   this.index_ = this.index_ - 1;
+            // }
           }
           console.log('退出');
           console.log(event);
@@ -827,6 +836,10 @@ export default {
     imgclick(url) {
       location.href = url;
     },
+    forOtherId(_index) {
+      const index_ = _index + 1;
+      return 'othe-video-' + index_;
+    },
     full() {
       this.show = true;
       const width = document.documentElement.clientWidth;
@@ -969,6 +982,13 @@ export default {
   grid-area: 1/1/3/4;
   justify-content: flex-end;
 }
+#othediv {
+  width: 100%;
+  min-height: 0px;
+  word-wrap: break-word;
+  word-break: break-all;
+  overflow: hidden;
+}
 .othe-video-left {
   float: left;
   background: #000;