hhh

src/layout/live/detailInfo.vue

@@ -46,7 +46,11 @@
           </el-col>
           <el-col :span="2" class="noVideo"> </el-col>
           <el-col :span="20" class="video">
-            <div id="main-video" class="video-box col-div" style="justify-content: flex-end"></div>
+            <el-col :span="24" class="videoMeet">
+              <el-col :span="18" class="one">
+                <div id="main-video" class="video-box col-div" style="justify-content: flex-end"></div>
+              </el-col>
+            </el-col>
           </el-col>
           <el-col :span="2" class="noVideo"> </el-col>
           <el-col :span="24" class="rightDown">
@@ -158,6 +162,15 @@ export default {
       shareid: '',
       userList: [],
       lookuserDia: false,
+      index_: 0,
+      ov1: '',
+      ov2: '',
+      ov3: '',
+      ov4: '',
+      ov5: '',
+      ov6: '',
+      ov7: '',
+      showbtn_: false,
     };
   },
   created() {
@@ -171,7 +184,7 @@ export default {
   methods: {
     ...gensign(['gensignFetch']),
     ...chat(['query', 'create', 'fetch']),
-    ...room(['startrecord', 'stoprecord', 'roomquest', 'roomquestclose', 'questquery']),
+    ...room(['startrecord', 'stoprecord', 'roomquest', 'roomquestclose', 'questquery', 'updateanchor']),
     ...lookuser(['lookquery', 'lookupdate']),
     async queCreate() {
       const data = {};
@@ -273,7 +286,12 @@ export default {
     },
     async initclient() {
       console.log(this.user.uid);
-      this.userId_ = this.user.uid;
+      if (this.anchorid === this.user.uid) {
+        this.showbtn_ = true;
+        this.userId_ = 'mainr-' + this.user.uid;
+      } else {
+        this.userId_ = 'other-' + this.user.uid;
+      }
       const res = await this.gensignFetch({ userid: this.userId_ });
       if (this.$checkRes(res)) {
         console.log(res.data);
@@ -318,8 +336,32 @@ export default {
         const usertempid_ = remoteStream.getUserId();
         console.log('111' + remoteStream.getUserId());
         if (usertempid_) {
-          const id_ = 'look-video-' + usertempid_;
-          remoteStream.play(id_);
+          const usersplit_ = usertempid_.substring(0, 5);
+          if (usersplit_ === 'other') {
+            this.index_ = this.index_ + 1;
+            const id_ = 'othe-video-' + this.index_;
+            const ovid = usertempid_.substring(5);
+            if (this.index_ === 1) {
+              this.ov1 = ovid;
+            } else if (this.index_ === 2) {
+              this.ov2 = ovid;
+            } else if (this.index_ === 3) {
+              this.ov3 = ovid;
+            } else if (this.index_ === 4) {
+              this.ov4 = ovid;
+            } else if (this.index_ === 5) {
+              this.ov5 = ovid;
+            } else if (this.index_ === 6) {
+              this.ov6 = ovid;
+            } else if (this.index_ === 7) {
+              this.ov7 = ovid;
+            }
+            this.ov1 = '';
+            remoteStream.play(id_);
+          } else if (usersplit_ === 'wxxcx') {
+            const id_ = 'look-video-' + usertempid_;
+            remoteStream.play(id_);
+          }
         }
       });
       // 监听远端流增加事件
@@ -331,9 +373,28 @@ export default {
           console.error('failed to subscribe remoteStream');
         });
       });
+      this.client_.on('stream-removed', event => {
+        const remoteStream = event.stream;
+        console.log('stop----');
+        const usertempid_ = remoteStream.getUserId();
+        if (usertempid_) {
+          const usersplit_ = usertempid_.substring(0, 5);
+          if (usersplit_ === 'other') {
+            this.index_ = this.index_ - 1;
+          }
+        }
+        remoteStream.stop();
+      });
       this.client_.on('mute-video', event => {
         const remoteStream = event.stream;
         // 订阅远端音频和视频流
+        const usertempid_ = remoteStream.getUserId();
+        if (usertempid_) {
+          const usersplit_ = usertempid_.substring(0, 4);
+          if (usersplit_ === 'othe') {
+            this.index_ = this.index_ - 1;
+          }
+        }
       });
     },
     async shareon() {
@@ -384,6 +445,32 @@ export default {
         }
       }
     },
+    async roomAnchorid(type) {
+      const data = {};
+      data.roomid = this.id;
+      if (type === 'othe1') {
+        data.otheid = this.ov1;
+      } else if (type === 'othe2') {
+        data.otheid = this.ov2;
+      } else if (type === 'othe3') {
+        data.otheid = this.ov3;
+      } else if (type === 'othe4') {
+        data.otheid = this.ov4;
+      } else if (type === 'othe5') {
+        data.otheid = this.ov5;
+      } else if (type === 'othe6') {
+        data.otheid = this.ov6;
+      } else if (type === 'othe7') {
+        data.otheid = this.ov7;
+      }
+      const res = await this.updateanchor(data);
+      if (this.$checkRes(res)) {
+        this.$message({
+          message: '操作成功',
+          type: 'success',
+        });
+      }
+    },
     async cameraChange() {
       //await this.localStream_.switchDevice('video', this.cameraId);
     },
@@ -433,6 +520,9 @@ export default {
     name() {
       return this.$route.query.name;
     },
+    anchorid() {
+      return this.$route.query.anchorid;
+    },
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
@@ -493,6 +583,26 @@ export default {
     .video {
       min-height: 640px;
       background-color: #000;
+      overflow: hidden;
+      position: relative;
+      .videoMeet {
+        .one {
+          height: 480px;
+          overflow: hidden;
+        }
+        .two {
+          height: 480px;
+          overflow: hidden;
+          .twoOne {
+            height: 160px;
+            overflow: hidden;
+          }
+        }
+        .three {
+          height: 160px;
+          overflow: hidden;
+        }
+      }
     }
     .noVideo {
       min-height: 640px;

src/layout/live/liveList.vue

@@ -36,9 +36,9 @@ export default {
     detaiBtn(item) {
       if (item.status == '1') {
         if (item.type == '0') {
-          this.$router.push({ path: '/live/detail', query: { id: item.id, name: item.name } });
+          this.$router.push({ path: '/live/detail', query: { id: item.id, name: item.name, anchorid: item.anchorid } });
         } else {
-          this.$router.push({ path: '/live/meetingDetail', query: { id: item.id, name: item.name } });
+          this.$router.push({ path: '/live/meetingDetail', query: { id: item.id, name: item.name, anchorid: item.anchorid } });
         }
       } else {
         this.$message({

src/store/room.js

@@ -57,6 +57,10 @@ const actions = {
     const res = await this.$axios.$post(`${api.roomInfo}/roomquest`, info);
     return res;
   },
+  async updateanchor({ commit }, info) {
+    const res = await this.$axios.$post(`${api.roomInfo}/updateanchor`, info);
+    return res;
+  },
   async roomquestclose({ commit }, info) {
     const res = await this.$axios.$post(`${api.roomInfo}/roomquestclose`, info);
     return res;

src/views/live/index.vue

@@ -37,7 +37,7 @@ export default {
   methods: {
     ...room(['query', 'delete', 'update', 'fetch']),
     async searchInfo({ skip = 0, limit = 10, ...info } = {}) {
-      let res = await this.query({ skip, limit, anchorid: this.user.uid, ...info });
+      let res = await this.query({ skip, limit, ...info });
       if (this.$checkRes(res)) {
         var arr = res.data.filter(item => item.status != '2');
         this.$set(this, `list`, arr);