hhh

src/views/live/roomDetail.vue

@@ -8,7 +8,10 @@
         <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" :style="{ transform: transform, height: otheheight, width: vwidth, padding: othepadding, position: 'absolute' }">
+      <div
+        id="othediv"
+        :style="{ background: background_, 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>
@@ -25,7 +28,12 @@
           <span>观看：{{ total }}</span>
         </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="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>
@@ -120,6 +128,7 @@ import Vue from 'vue';
 import { Swipe, SwipeItem, Lazyload } from 'vant';
 import { Image as VanImage } from 'vant';
 import wx from 'weixin-js-sdk';
+import _ from 'lodash';
 Vue.use(Swipe);
 Vue.use(SwipeItem);
 Vue.use(VanImage);
@@ -166,10 +175,16 @@ export default {
       queid: '',
       questInfo: {},
       switchbtn: false,
+      switchmeetbtn: false,
+      iscamera: false,
       otheheight: '70px',
       othewidth: '20%',
       bcolor: '#000',
       index_: 0,
+      userindex_: 1,
+      background_: '#000',
+      swichusers: [],
+      sbuser: '',
     };
   },
   created() {
@@ -195,6 +210,47 @@ export default {
     ...chat(['query', 'create']),
     ...quest(['questfetch']),
     ...uploadquestion({ upcreate: 'create', upquery: 'query' }),
+    zbfullbtn() {
+      const width = document.documentElement.clientWidth;
+      const lvr_ = document.getElementById('look-video-right');
+      let style = 'width:' + width + 'px;';
+      style += 'height:200px;';
+      style += 'position:absolute;top:0;left:0;';
+      style += 'z-index:1;';
+      lvr_.style.cssText = style;
+    },
+    swichposition(objid) {
+      if (!objid) {
+        return;
+      }
+      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;
+        }
+      }
+      const lvr_ = document.getElementById('look-video-right');
+      let stylel = 'width:30%;';
+      stylel += 'height:200px;';
+      lvr_.style.cssText = stylel;
+    },
     async recordSave() {
       console.log(2121);
       let data = {};
@@ -261,6 +317,9 @@ export default {
       // this.$stomp({
       //   [`/exchange/othe_publish_` + this.id]: this.onOtheMessage,
       // });
+      this.$stomp({
+        [`/exchange/switch_shmai_` + this.id]: this.onSwichShmaiMessage,
+      });
     },
     onMessage(message) {
       // console.log('receive a message: ', message.body);
@@ -291,12 +350,22 @@ export default {
         body = JSON.parse(body);
         if (body.switchrole === 'anchor' && body.userid === this.user.uid) {
           this.switchbtn = true;
-          this.roomMeetBtn();
+          this.switchmeetbtn = true;
+          //this.roomMeetBtn();
         } else {
           this.switchbtn = false;
         }
       }
     },
+    onSwichShmaiMessage() {
+      let body = _.get(message, 'body');
+      if (body) {
+        body = JSON.parse(body);
+        if (body.userid === this.user.uid) {
+          this.swichposition(body.userid);
+        }
+      }
+    },
     onOtheMessage(message) {
       let body = _.get(message, 'body');
       if (body) {
@@ -323,6 +392,43 @@ export default {
       console.log(url);
       wx.miniProgram.navigateTo({ url });
     },
+    async roomMeetSwich() {
+      if (this.iscamera) {
+        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(() => {
+              // 取消发布本地流成功
+            });
+          });
+        }
+        this.iscamera = false;
+      } else {
+        this.iscamera = true;
+        const _userid = 'meetu-' + this.userId_;
+        this.localStream_ = await TRTC.createStream({
+          audio: true,
+          video: true,
+          // cameraId: this.cameraId,
+          // microphoneId: this.microphoneId,
+          userId: _userid,
+        });
+        this.localStream_.setVideoProfile('480p');
+        await this.localStream_.initialize();
+        console.log('initialize local stream success');
+        // publish the local stream
+        await this.client_.publish(this.localStream_);
+        this.index_ = this.index_ + 1;
+        if (this.index_ < 6) {
+          const id_ = 'othe-video-' + this.index_;
+          console.log(id_);
+          this.localStream_.play(id_);
+        }
+      }
+    },
     async questSearch() {
       if (this.queid) {
         const result = await this.questfetch(this.queid);
@@ -373,6 +479,7 @@ export default {
             }
           }
         }
+        // 根据是否上麦进行上麦判断
       }
     },
     async lookusercountsel() {
@@ -387,7 +494,7 @@ export default {
       console.log(this.sendmemo);
     },
     async initclient() {
-      this.userId_ = '12345';
+      this.userId_ = this.user.uid;
       const res = await this.gensignFetch({ userid: this.userId_ });
       if (this.$checkRes(res)) {
         this.client_ = TRTC.createClient({
@@ -396,7 +503,7 @@ export default {
           userId: this.userId_,
           userSig: res.data,
         });
-        await this.client_.join({ roomId: this.roomname, role: 'audience' });
+        await this.client_.join({ roomId: this.roomname, role: 'anchor' });
         this.client_.on('stream-subscribed', event => {
           const remoteStream = event.stream;
           // 远端流订阅成功，播放远端音视频流
@@ -409,45 +516,73 @@ export default {
           const res_ = userid_.indexOf('-');
           const useridsplit_ = userid_.substring(0, 5);
           console.log('222--->' + useridsplit_);
-          if (useridsplit_ !== 'wxxcx') {
-            if (useridsplit_ !== 'share') {
-              console.log('333');
-              this.rvideoid_ = 'video_' + remoteStream.getId();
-              remoteStream
-                .play('look-video-right')
-                .then(() => {
-                  // autoplay success
-                })
-                .catch(e => {
-                  const errorCode = e.getCode();
-                  if (errorCode === 0x4043) {
-                    // PLAY_NOT_ALLOWED,引导用户手势操作恢复音视频播放
-                    remoteStream.resume();
-                  }
-                });
-            } else {
-              this.lvideoid_ = 'video_' + remoteStream.getId();
-              remoteStream
-                .play('look-video-left')
-                .then(() => {
-                  // autoplay success
-                  // 播放成功时调用css属性
-                  const _lvideoid_ = document.getElementById(this.lvideoid_);
-                  const style = 'width: 100%; height: 100%; position: absolute; transform: rotateY(0); object-fit: fill';
-                  _lvideoid_.style.cssText = style;
-                })
-                .catch(e => {
-                  const errorCode = e.getCode();
-                  if (errorCode === 0x4043) {
-                    // PLAY_NOT_ALLOWED,引导用户手势操作恢复音视频播放
-                    remoteStream.resume();
-                  }
-                });
+          if (useridsplit_ === 'share') {
+            this.lvideoid_ = 'video_' + remoteStream.getId();
+            remoteStream
+              .play('look-video-left')
+              .then(() => {
+                // autoplay success
+                // 播放成功时调用css属性
+                const _lvideoid_ = document.getElementById(this.lvideoid_);
+                const style = 'width: 100%; height: 100%; position: absolute; transform: rotateY(0); object-fit: fill';
+                _lvideoid_.style.cssText = style;
+              })
+              .catch(e => {
+                const errorCode = e.getCode();
+                if (errorCode === 0x4043) {
+                  // PLAY_NOT_ALLOWED,引导用户手势操作恢复音视频播放
+                  remoteStream.resume();
+                }
+              });
+          } else if (useridsplit_ === 'mainr') {
+            console.log('333');
+            this.rvideoid_ = 'video_' + remoteStream.getId();
+            remoteStream
+              .play('look-video-right')
+              .then(() => {
+                // autoplay success
+              })
+              .catch(e => {
+                const errorCode = e.getCode();
+                if (errorCode === 0x4043) {
+                  // PLAY_NOT_ALLOWED,引导用户手势操作恢复音视频播放
+                  remoteStream.resume();
+                }
+              });
+          } else if (useridsplit_ === 'other') {
+            console.log('333');
+            this.rvideoid_ = 'video_' + remoteStream.getId();
+            remoteStream
+              .play('look-video-right')
+              .then(() => {
+                // autoplay success
+              })
+              .catch(e => {
+                const errorCode = e.getCode();
+                if (errorCode === 0x4043) {
+                  // PLAY_NOT_ALLOWED,引导用户手势操作恢复音视频播放
+                  remoteStream.resume();
+                }
+              });
+          } else if (useridsplit_ === 'meetu') {
+            console.log('333');
+            console.log('公众号进入画面' + this.index_);
+            this.index_ = this.index_ + 1;
+            if (this.index_ < 6) {
+              const id_ = 'othe-video-' + this.index_;
+              console.log(id_);
+              const swichuserid = useridsplit_.substring(1);
+              const newdata = { swichuserid: useridsplit_.substring(1), swichindex: this.index_ };
+              this.swichusers.push(newdata);
+              if (this.user.uid === useridsplit_.substring(1)) {
+                this.userindex_ = this.index_;
+              }
+              remoteStream.play(id_);
             }
-          } else {
+          } else if (useridsplit_ === 'wxxcx') {
             console.log('小程序进入画面' + this.index_);
             this.index_ = this.index_ + 1;
-            if (this.index_ < 5) {
+            if (this.index_ < 6) {
               const id_ = 'othe-video-' + this.index_;
               console.log(id_);
               remoteStream.play(id_);
@@ -468,7 +603,7 @@ export default {
           console.log('stop----');
           const userid_ = remoteStream.getUserId();
           const useridsplit_ = userid_.substring(0, 5);
-          if (useridsplit_ === 'wxxcx') {
+          if (useridsplit_ === 'wxxcx' || useridsplit_ === 'meetu') {
             console.log('退出userid_' + useridsplit_);
             // 订阅远端音频和视频流
             if (this.index_ > 0) {
@@ -485,7 +620,7 @@ export default {
           const useridsplit_ = userid_.substring(0, 5);
           console.log('退出userid_' + userid_);
 
-          if (useridsplit_ === 'wxxcx') {
+          if (useridsplit_ === 'wxxcx' || useridsplit_ === 'meetu') {
             console.log('退出userid_' + useridsplit_);
             // 订阅远端音频和视频流
             if (this.index_ > 0) {
@@ -665,7 +800,7 @@ export default {
 }
 .look-video-right {
   float: right;
-  background: #000;
+  background: red;
   grid-area: 1/1/3/4;
   justify-content: flex-end;
 }