hh

src/views/live/roomDetail.vue

@@ -8,6 +8,13 @@
         <div :style="{ height: lheight, width: lwidth }" id="look-video-left" class="video-box col-div look-video-left"></div>
         <div id="look-video-right" :style="{ height: rheight, width: rwidth }" class="video-box col-div look-video-right"></div>
       </div>
+      <div id="othediv" class="wrapper" :style="{ transform: transform, height: otheheight, width: vwidth, padding: othepadding, position: 'absolute' }">
+        <div id="othe-video-1" :style="{ background: bcolor, height: otheheight, width: othewidth }" class="video-box col-div othe-video-left"></div>
+        <div id="othe-video-2" :style="{ color: bcolor, height: otheheight, width: othewidth }" class="video-box col-div othe-video-left"></div>
+        <div id="othe-video-3" :style="{ color: bcolor, height: otheheight, width: othewidth }" class="video-box col-div othe-video-left"></div>
+        <div id="othe-video-4" :style="{ color: bcolor, height: otheheight, width: othewidth }" class="video-box col-div othe-video-left"></div>
+        <div id="othe-video-5" :style="{ color: bcolor, height: otheheight, width: othewidth }" class="video-box col-div othe-video-left"></div>
+      </div>
       <div class="videoBtn" id="videobtnid" :style="{ top: btop, right: bright }">
         <el-button type="warning" round @click="full()" size="mini"><i class="el-icon-rank"></i></el-button>
       </div>
@@ -136,7 +143,7 @@ export default {
       sendmemo: '',
       total: 0,
       transform: 'rotate(0)',
-      oheight: '200px',
+      oheight: '270px',
       vwidth: '100%',
       vheight: '200px',
       rheight: '200px',
@@ -145,6 +152,7 @@ export default {
       lwidth: '70%',
       show: true,
       vpadding: '0',
+      othepadding: '200px 0 0 0',
       btop: '167px',
       bright: '10px',
       isscreen: false,
@@ -158,6 +166,10 @@ export default {
       queid: '',
       questInfo: {},
       switchbtn: false,
+      otheheight: '70px',
+      othewidth: '20%',
+      bcolor: '#F56C6C',
+      index_: 0,
     };
   },
   created() {
@@ -246,6 +258,9 @@ export default {
       this.$stomp({
         [`/exchange/switch_role_` + this.user.uid]: this.onSwichMessage,
       });
+      // this.$stomp({
+      //   [`/exchange/othe_publish_` + this.id]: this.onOtheMessage,
+      // });
     },
     onMessage(message) {
       // console.log('receive a message: ', message.body);
@@ -282,6 +297,18 @@ export default {
         }
       }
     },
+    onOtheMessage(message) {
+      let body = _.get(message, 'body');
+      if (body) {
+        body = JSON.parse(body);
+        if (body.otheid) {
+          this.switchbtn = true;
+          this.roomMeetBtn();
+        } else {
+          this.switchbtn = false;
+        }
+      }
+    },
     async userswichrole() {
       // 根据房间id查询房间详细信息
       let result = await this.lookuserswichrole({ roomid: this.id, userid: this.user.uid });
@@ -415,6 +442,12 @@ export default {
                   }
                 });
             }
+          } else {
+            this.index_ = index_ + 1;
+            if (this.index < 8) {
+              const id_ = 'othe-video-' + this.index_;
+              remoteStream.play(id_);
+            }
           }
         });
         // 监听远端流增加事件
@@ -431,6 +464,18 @@ export default {
           console.log('stop----');
           remoteStream.stop();
         });
+        this.client_.on('mute-video', event => {
+          const remoteStream = event.stream;
+          const userid_ = remoteStream.getUserId();
+          const useridsplit_ = userid_.substring(0, 5);
+          if (useridsplit_ !== 'wxxcx') {
+            // 订阅远端音频和视频流
+            if (this.index_ > 1) {
+              this.index_ = this.index_ - 1;
+            }
+          }
+          console.log('333--index---->' + this.index);
+        });
       }
     },
     imgclick(url) {
@@ -455,17 +500,30 @@ export default {
         this.transform = 'rotate(90deg)';
         // this.vwidth = height;
         console.log(height);
-        this.vheight = `${width}px`;
+        this.vheight = `${width - 70}px`;
         this.vwidth = `${height}px`;
-        this.lheight = `${width}px`;
-        this.rheight = `${width}px`;
+        this.lheight = `${width - 70}px`;
+        this.rheight = `${width - 70}px`;
 
         this.btop = `${height - 40}px`;
         this.bright = `${width - 50}px`;
+
+        const othediv_ = document.getElementById('othediv');
+        let styleothe = 'width:' + height + 'px;';
+        styleothe += 'height:' + 70 + 'px;';
+        styleothe += '-webkit-transform: rotate(90deg); transform: rotate(90deg);';
+        // // 注意旋转中点的处理
+        styleothe += '-webkit-transform-origin: ' + width / 2 + 'px ' + width / 2 + 'px;';
+        styleothe += 'transform-origin: ' + width / 2 + 'px ' + width / 2 + 'px;';
+        othediv_.style.cssText = styleothe;
+        this.otheheight = '70px';
+        this.othewidth = '20%';
+        const ppp_ = `${width - 70}px`;
+        this.othepadding = `${width - 70}px 0 0 0`;
       } else {
         console.log('退出全屏');
         this.isscreen = false;
-        this.oheight = '200px';
+        this.oheight = '270px';
         const transformid_ = document.getElementById('transformid');
         let style = 'width:' + width + 'px;';
         style += 'height: 200px;';
@@ -480,6 +538,16 @@ export default {
 
         this.btop = `167px`;
         this.bright = `10px`;
+
+        const othediv_ = document.getElementById('othediv');
+        let styleothe = 'width:' + width + 'px;';
+        styleothe += 'height:' + 70 + 'px;';
+        // // 注意旋转中点的处理
+        othediv_.style.cssText = styleothe;
+        this.otheheight = '70px';
+        this.othewidth = '20%';
+        const ppp_ = `${width - 70}px`;
+        this.othepadding = '200px 0 0 0';
       }
     },
   },
@@ -506,7 +574,7 @@ export default {
   top: 0;
   left: 0;
   width: 100%;
-  height: 200px;
+  height: 270px;
 }
 .content {
   padding: 10px;
@@ -527,8 +595,8 @@ export default {
     padding: 10px;
   }
   .chat {
-    min-height: 21px;
-    max-height: 395px;
+    min-height: 280px;
+    max-height: 300px;
     overflow-y: auto;
     padding: 0 0 50px 0;
     .chatInfo {
@@ -583,6 +651,12 @@ export default {
   grid-area: 1/1/3/4;
   justify-content: flex-end;
 }
+.othe-video-left {
+  float: left;
+  background: #f56c6c;
+  grid-area: 1/1/3/4;
+  justify-content: flex-end;
+}
 .wrapper {
   background: #000;
   position: absolute;
@@ -602,8 +676,8 @@ export default {
   position: absolute;
 }
 .userList {
-  height: 380px;
-  min-height: 380px;
+  height: 300px;
+  min-height: 300px;
   overflow-y: auto;
   padding: 0 10px;
   margin: 0 0 10px 0;