hhh

src/views/live/roomDetail.vue

@@ -5,8 +5,8 @@
     </el-row>
     <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>
+        <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_ }">
@@ -145,7 +145,7 @@ export default {
       sendmemo: '',
       total: 0,
       transform: 'rotate(0)',
-      oheight: '200px',
+      oheight: '270px',
       vwidth: '100%',
       vheight: '200px',
       rheight: '200px',
@@ -181,6 +181,8 @@ export default {
       sbuser: '',
       othedivshow: false,
       shmaiindex: 0,
+      stremlist: [],
+      stremMeetlist: [],
     };
   },
   created() {
@@ -206,6 +208,18 @@ export default {
     ...chat(['query', 'create']),
     ...quest(['questfetch']),
     ...uploadquestion({ upcreate: 'create', upquery: 'query' }),
+    reviewVideo(newstrem, newid, oldstrem, oldid) {
+      oldstrem.stop();
+      oldstrem.play(newid);
+      newstrem.stop();
+      newstrem.play(oldid);
+    },
+    stermPlay(strem, id) {
+      strem.play(id);
+    },
+    stermStop(strem) {
+      strem.stop();
+    },
     zbfullbtn() {
       const width = document.documentElement.clientWidth;
       const lvr_ = document.getElementById('look-video-right');
@@ -230,54 +244,22 @@ export default {
       console.log('in swichposition---' + objid);
       if (objid) {
         console.log(this.swichusers);
-        const width = document.documentElement.clientWidth;
-        for (const elm of this.swichusers) {
+        const oldstrem_ = _.find(this.stremlist, { type: 'mainr' });
+        for (const elm of this.stremMeetlist) {
           if (elm.swichuserid === objid) {
-            console.log('elm--->' + elm);
-            const id_ = 'othe-video-' + elm.swichindex;
-            this.shmaiindex = elm.swichindex;
-            const thr_ = document.getElementById(id_);
-            let style = 'width:70%;';
-            style += 'height:200px;';
-            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 += 'position:absolute;top:200;';
-            style = 'left:' + left_ + 'px;';
-            thr_.style.cssText = style;
+            reviewVideo(elm.strem, elm.id, oldstrem_.strem, 'look-video-right');
           }
         }
       } else {
         console.log('share--' + this.othedivshow);
+        const oldstrem_ = _.find(this.stremlist, { type: 'mainr' });
+        stermPlay(oldstrem_.strem, 'look-video-right');
         if (this.othedivshow) {
-          if (this.shmaiindex !== 0) {
-            const id_ = 'othe-video-' + this.shmaiindex;
-            const thr_ = document.getElementById(id_);
-            const left_ = (width / 5) * (i - 1);
-            let style = 'width:20%;';
-            style += 'height:70px;';
-            style += 'background: blue;';
-            style += 'position:absolute;top:200px;';
-            style = 'left:' + left_ + 'px;';
-            thr_.style.cssText = style;
+          for (const elm of this.stremMeetlist) {
+            stermStop(elm.strem);
           }
         }
-        console.log('share设置大小--' + this.shmaiindex);
-        const lvl_ = document.getElementById('look-video-left');
-        let stylell = 'width:70%;';
-        stylell += 'height:200px;';
-        lvl_.style.cssText = stylell;
       }
-      const lvr_ = document.getElementById('look-video-right');
-      let stylel = 'width:30%;';
-      stylel += 'height:200px;';
-      lvr_.style.cssText = stylel;
     },
     async recordSave() {
       console.log(2121);
@@ -458,6 +440,8 @@ export default {
       if (this.index_ < 6) {
         // const otheplaydiv = document.getElementById('otheplaydiv');
         const id_ = 'othe-video-' + this.index_;
+        const newdata_ = { strem: this.localStream_, index: this.index_, id: id_, swichuserid: this.userId_ };
+        this.stremMeetlist.push(newdata_);
         // const newdiv = '<div id="' + id_ + '" style="height: 70px, width: 20%" class="video-box col-div othe-video-left"></div>';
         // otheplaydiv.appendChild(newdiv);
         const newdata = { swichuserid: this.userId_, swichindex: this.index_ };
@@ -558,6 +542,8 @@ export default {
           console.log('555--->' + userid_zs);
           if (useridsplit_ === 'share') {
             console.log('进入分享模式' + useridsplit_);
+            const newdata_ = { strem: remoteStream, type: 'share' };
+            this.stremlist.push(newdata_);
             this.lvideoid_ = 'video_' + remoteStream.getId();
             //this.zbfpbtn();
             this.swichposition();
@@ -585,6 +571,8 @@ export default {
             console.log('333');
             this.rvideoid_ = 'video_' + remoteStream.getId();
             // this.zbfullbtn();
+            const newdata_ = { strem: remoteStream, type: 'mainr' };
+            this.stremlist.push(newdata_);
             remoteStream
               .play('look-video-right')
               .then(() => {
@@ -622,13 +610,12 @@ export default {
             this.index_ = this.index_ + 1;
             if (this.index_ < 6) {
               const id_ = 'othe-video-' + this.index_;
+              const newdata_ = { strem: remoteStream, index: this.index_, id: id_, swichuserid: this.userId_ };
+              this.stremMeetlist.push(newdata_);
               console.log(id_);
               const newdata = { swichuserid: userid_zs, swichindex: this.index_ };
               this.swichusers.push(newdata);
               console.log('将用户push到列表里' + newdata);
-              if (this.user.uid === userid_zs) {
-                this.userindex_ = this.index_;
-              }
               remoteStream.play(id_);
             }
           } else if (useridsplit_ === 'wxxcx') {