hhh

src/views/live/roomDetail.vue

@@ -1,19 +1,21 @@
 <template>
   <div id="roomsDetail">
     <el-row>
-      <el-col :span="24" class="video"> </el-col>
+      <el-col :span="24" class="video" :style="{ height: oheight }"> </el-col>
     </el-row>
-    <van-overlay :show="show" style="{ height: oheight, width: '100%' }">
+    <van-overlay :show="show" :style="{ height: oheight, width: '100%' }">
       <div id="transformid" class="wrapper" :style="{ transform: transform, height: vheight, width: vwidth, padding: vpadding, position: 'absolute' }">
         <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" v-show="othedivshow" :style="{ transform: transform, height: otheheight, width: vwidth, padding: othepadding, position: 'absolute' }">
-        <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 :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>
       <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>
@@ -26,11 +28,6 @@
         </el-col>
         <el-col :span="12" class="meetBtn">
           <el-button v-show="switchbtn" type="warning" round size="small" @click="roomMeetBtn()">小程序<i class="el-icon-camera el-icon--right"></i></el-button>
-          <el-button v-show="switchmeetbtn" type="warning" round @click="roomMeetSwich()" size="mini"
-            >普通<i class="el-icon-camera el-icon--right"></i
-          ></el-button>
-          <el-button type="warning" round size="small" @click="zbfullbtn()">测试<i class="el-icon-camera el-icon--right"></i></el-button>
-          <el-button type="warning" round size="small" @click="swichposition()">切换<i class="el-icon-camera el-icon--right"></i></el-button>
         </el-col>
       </el-col>
     </el-row>
@@ -148,7 +145,7 @@ export default {
       sendmemo: '',
       total: 0,
       transform: 'rotate(0)',
-      oheight: '270px',
+      oheight: '200px',
       vwidth: '100%',
       vheight: '200px',
       rheight: '200px',
@@ -174,7 +171,7 @@ export default {
       switchbtn: false,
       switchmeetbtn: false,
       iscamera: false,
-      otheheight: '70px',
+      otheheight: '10px',
       othewidth: '20%',
       bcolor: '#000',
       index_: 0,
@@ -219,25 +216,36 @@ export default {
     },
     swichposition(objid) {
       console.log('in swichposition---' + objid);
-      if (!objid) {
-        return;
-      }
-      console.log(this.swichusers);
-      const width = document.documentElement.clientWidth;
-      for (const elm of this.swichusers) {
-        if (elm.swichuserid === objid) {
-          const id_ = 'othe-video-' + elm.swichindex;
-          const thr_ = document.getElementById(id_);
-          let style = 'width:70%;';
-          style += 'height:200px;';
-          //style += 'background: blue;';
-          style += 'position:absolute;top:0;left:0;';
-          style += 'z-index:1;';
-          thr_.style.cssText = style;
-        } else {
-          const id_ = 'othe-video-' + elm.swichindex;
+      if (objid) {
+        console.log(this.swichusers);
+        const width = document.documentElement.clientWidth;
+        for (const elm of this.swichusers) {
+          if (elm.swichuserid === objid) {
+            const id_ = 'othe-video-' + elm.swichindex;
+            const thr_ = document.getElementById(id_);
+            let style = 'width:70%;';
+            style += 'height:200px;';
+            //style += 'background: blue;';
+            style += 'position:absolute;top:0;left:0;';
+            style += 'z-index:1;';
+            thr_.style.cssText = style;
+          } else {
+            const id_ = 'othe-video-' + elm.swichindex;
+            const thr_ = document.getElementById(id_);
+            const left_ = (width / 5) * (elm.swichindex - 1);
+            let style = 'width:20%;';
+            style += 'height:70px;';
+            style += 'background: blue;';
+            style += 'position:absolute;top:200;';
+            style = 'left:' + left_ + 'px;';
+            thr_.style.cssText = style;
+          }
+        }
+      } else {
+        for (const i = 1; i < 6; i++) {
+          const id_ = 'othe-video-' + i;
           const thr_ = document.getElementById(id_);
-          const left_ = (width / 5) * (elm.swichindex - 1);
+          const left_ = (width / 5) * (i - 1);
           let style = 'width:20%;';
           style += 'height:70px;';
           style += 'background: blue;';
@@ -355,6 +363,18 @@ export default {
           this.roomMeetSwich();
         } else {
           this.switchbtn = false;
+          this.switchmeetbtn = false;
+          const videoTrack = this.localStream_.getVideoTrack();
+          if (videoTrack) {
+            this.localStream_.removeTrack(videoTrack).then(() => {
+              console.log('remove video call success');
+              // 关闭摄像头
+              videoTrack.stop();
+              this.client_.unpublish(this.localStream_).then(() => {
+                // 取消发布本地流成功
+              });
+            });
+          }
         }
       }
     },
@@ -395,6 +415,8 @@ export default {
     },
     async roomMeetSwich() {
       this.othedivshow = true;
+      this.oheight = '270px';
+      this.otheheight = '70px';
       if (this.iscamera) {
         const videoTrack = this.localStream_.getVideoTrack();
         if (videoTrack) {
@@ -525,6 +547,7 @@ export default {
           console.log('222--->' + useridsplit_);
           if (useridsplit_ === 'share') {
             this.lvideoid_ = 'video_' + remoteStream.getId();
+            this.swichposition();
             remoteStream
               .play('look-video-left')
               .then(() => {
@@ -734,7 +757,6 @@ export default {
   top: 0;
   left: 0;
   width: 100%;
-  height: 270px;
 }
 .content {
   padding: 10px;