hh

src/layout/live/detailInfo.vue

@@ -23,13 +23,17 @@
             </el-col>
           </el-col>
           <el-col :span="24" class="leftDown">
+            <el-col :span="8" class="btn" @click.native="lookuserBtn()">
+              <i class="el-icon-user"></i>
+              <p>成员</p>
+            </el-col>
             <el-col :span="8" class="btn" @click.native="queBtn()">
               <i class="el-icon-question"></i>
               <p>问卷</p>
             </el-col>
-            <el-col :span="16" class="btn" @click.native="queCloseBtn()">
+            <el-col :span="8" class="btn" @click.native="queCloseBtn()">
               <i class="el-icon-circle-close"></i>
-              <p>关闭问卷</p>
+              <p>停卷</p>
             </el-col>
           </el-col>
         </el-col>
@@ -95,6 +99,23 @@
         </el-col>
       </el-row>
     </el-dialog>
+    <el-dialog title="成员" :visible.sync="lookuserDia" width="60%" height="450px" :before-close="handleClose" :close-on-click-modal="(clo = false)">
+      <el-row>
+        <el-col :span="24" class="sudoku_row">
+          <el-col :span="24" class="sudoku_item" v-for="(item, index) in userList" :key="index">
+            <div :id="forId(item.userid)" class="video-box col-div lookvideo" style="justify-content: flex-end"></div>
+            <p>
+              <i class="el-icon-user"></i>
+              <span class="selfColor">{{ item.username }}</span>
+              <span v-if="item.switchrole === 'anchor'"
+                ><el-button type="primary" size="mini" @click="lookuserUpdate(item.id, 'audience')">移除</el-button></span
+              >
+              <span v-else><el-button type="primary" size="mini" @click="lookuserUpdate(item.id, 'anchor')">连麦</el-button></span>
+            </p>
+          </el-col>
+        </el-col>
+      </el-row>
+    </el-dialog>
   </div>
 </template>
 
@@ -104,6 +125,7 @@ import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: gensign } = createNamespacedHelpers('gensign');
 const { mapActions: chat } = createNamespacedHelpers('chat');
 const { mapActions: room } = createNamespacedHelpers('room');
+const { mapActions: lookuser } = createNamespacedHelpers('lookuser');
 import TRTC from 'trtc-js-sdk';
 export default {
   name: 'detailInfo',
@@ -134,6 +156,8 @@ export default {
       dataList: [],
       isrecord: false,
       shareid: '',
+      userList: [],
+      lookuserDia: false,
     };
   },
   created() {
@@ -148,6 +172,7 @@ export default {
     ...gensign(['gensignFetch']),
     ...chat(['query', 'create', 'fetch']),
     ...room(['startrecord', 'stoprecord', 'roomquest', 'roomquestclose', 'questquery']),
+    ...lookuser(['lookquery', 'lookupdate']),
     async queCreate() {
       const data = {};
       data.roomid = this.id;
@@ -161,6 +186,33 @@ export default {
         });
       }
     },
+    async lookuserBtn() {
+      this.lookuserDia = true;
+      this.lookuserSearch();
+    },
+    async lookuserSearch({ skip = 0, limit = 1000 } = {}) {
+      const info = { roomid: this.id };
+      let res = await this.lookquery({ skip, limit, ...info });
+      console.log(res.data);
+      this.$set(this, `userList`, res.data);
+    },
+    async lookuserUpdate(_id, _switchrole) {
+      console.log(_id);
+      let data = {};
+      data.id = _id;
+      data.switchrole = _switchrole;
+      const res = await this.lookupdate(data);
+      if (this.$checkRes(res)) {
+        console.log(res.data);
+        this.$message({
+          message: '操作成功',
+          type: 'success',
+        });
+        this.lookuserSearch();
+      } else {
+        this.$message.error(res.errmsg);
+      }
+    },
     async recordclick() {
       console.log(this.isrecord);
       if (this.isrecord) {
@@ -258,6 +310,31 @@ export default {
       await this.client_.publish(this.localStream_);
       this.localStream_.play('main-video');
       //$('#mask_main').appendTo($('#player_' + this.localStream_.getId()));
+
+      // 订阅其他用户音视频
+      this.client_.on('stream-subscribed', event => {
+        const remoteStream = event.stream;
+        // 远端流订阅成功，播放远端音视频流
+        const usertempid_ = remoteStream.getUserId();
+        console.log('111' + remoteStream.getUserId());
+        if (usertempid_) {
+          const id_ = 'look-video-' + usertempid_;
+          remoteStream.play(id_);
+        }
+      });
+      // 监听远端流增加事件
+      this.client_.on('stream-added', event => {
+        const remoteStream = event.stream;
+        console.log('222' + remoteStream.getType());
+        // 订阅远端音频和视频流
+        this.client_.subscribe(remoteStream, { audio: true, video: true }).catch(e => {
+          console.error('failed to subscribe remoteStream');
+        });
+      });
+      this.client_.on('mute-video', event => {
+        const remoteStream = event.stream;
+        // 订阅远端音频和视频流
+      });
     },
     async shareon() {
       const shareId = 'share-' + this.userId_;
@@ -308,10 +385,10 @@ export default {
       }
     },
     async cameraChange() {
-      await this.localStream_.switchDevice('video', this.cameraId);
+      //await this.localStream_.switchDevice('video', this.cameraId);
     },
     async micrChange() {
-      await this.localStream_.switchDevice('audio', this.microphoneId);
+      //await this.localStream_.switchDevice('audio', this.microphoneId);
     },
     // 选择打开摄像头
     shexiangBtn() {
@@ -340,6 +417,9 @@ export default {
         });
       }
     },
+    forId(itemid) {
+      return 'look-video-' + itemid;
+    },
     // 关闭摄像头&麦克风
     handleClose(done) {
       done();
@@ -463,4 +543,27 @@ export default {
     padding: 20px 0;
   }
 }
+.sudoku_row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 430px;
+  flex-wrap: wrap;
+  overflow-y: auto;
+}
+.sudoku_item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 30%;
+  padding: 10px 10px 10px 10px;
+}
+.lookvideo {
+  width: 100%;
+  height: 160px;
+  min-height: 160px;
+  background-color: black;
+  grid-area: 1/1/3/4;
+}
 </style>

src/layout/live/detailmetting.vue

@@ -229,6 +229,7 @@ export default {
       if (this.$checkRes(res)) {
         console.log(res.data);
         this.client_ = TRTC.createClient({
+          useCloud: 1,
           mode: 'live',
           sdkAppId: this.sdkAppId_,
           userId: this.userId_,