update

package.json

@@ -17,6 +17,7 @@
     "moment": "^2.26.0",
     "naf-core": "^0.1.2",
     "qrcode": "^1.4.4",
+    "trtc-js-sdk": "^4.6.1",
     "vant": "^2.8.3",
     "vue": "^2.6.11",
     "vue-meta": "^2.3.2",

src/layout/class/groupList.vue

@@ -31,8 +31,7 @@
                   >
                 </el-col>
                 <el-col :span="1"></el-col>
-                <el-col :span="6" v-if="user.job === '班长'">
-                </el-col>
+                <el-col :span="6" v-if="user.job === '班长'"> </el-col>
               </el-col>
             </template>
             <el-col :span="8" class="studentslist" v-for="(itemStrudent, indexStudent) in item.students" :key="indexStudent">

src/views/user/live/detail.vue

@@ -3,9 +3,7 @@
     <el-row>
       <el-col :span="24" class="main">
         <el-col :span="24" class="num"> 房间号：{{ liveInfo.number }} </el-col>
-        <el-col :span="24" class="video">
-          直播页面
-        </el-col>
+        <el-col :span="24" class="video" id="liveScreen"> </el-col>
         <el-col :span="24" class="info">
           <p>
             直播课程：<span>{{ liveInfo.subname }}</span>
@@ -20,6 +18,7 @@
 </template>
 
 <script>
+import TRTC from 'trtc-js-sdk';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'detail',
@@ -28,10 +27,112 @@ export default {
   },
   components: {},
   data: function() {
-    return {};
+    return {
+      client_: {},
+      sdkAppId: '1400414461',
+      userMainId: '',
+      cameras: [],
+      microphones: [],
+      localStream_: [], //流
+      isInit: false,
+    };
   },
   created() {},
-  methods: {},
+  methods: {
+    // 初始化
+    async initclient() {
+      this.userMainId = 'sub-' + this.user.userid;
+      console.log(this.userMainId);
+      // const res = await this.gensignFetch({ userid: this.userMainId });
+      // if (this.$checkRes(res)) {
+      this.client_ = await TRTC.createClient({
+        mode: 'live',
+        sdkAppId: this.sdkAppId,
+        userId: this.userMainId,
+        userSig:
+          'eJwtzsEOgjAQBNB-6VnJtt22lsSDB08YjYAJHgVa0iCIgMRo-HcVOO6byWTfJN5F3mBa4hPmAVmMt8tN3TvrRu4e6VJYnqUZSiktZTa1GpXWBsTc7-Ly0jQuJz5FAKSIkk6JeTauNT8XQjAAmLR31Wh6xbgWDOcVV-y-SJKAhucCVHTAvTnxa5qYVt3LV3DcVpmob3zYxKHtFazJ5wuINTci',
+      });
+      this.toLook();
+    },
+    // 调用设备
+    async getDevices() {
+      this.cameras = await TRTC.getCameras();
+      this.microphones = await TRTC.getMicrophones();
+    },
+    async toLook() {
+      console.log(`roomid:98${this.liveInfo.number}89`);
+      await this.client_.join({ roomId: `98${this.liveInfo.number}89`, role: 'anchor' });
+      // 订阅其他用户音视频
+      this.client_.on('stream-subscribed', event => {
+        const remoteStream = event.stream;
+        console.log(remoteStream);
+        // 远端流订阅成功，播放远端音视频流
+        const usertempid_ = remoteStream.getUserId();
+        console.log('111' + remoteStream.getUserId());
+        remoteStream.play('liveScreen');
+        // if (usertempid_) {
+        //   const usersplit_ = usertempid_.substring(0, 5);
+        //   if (usersplit_ === 'other') {
+        //     const id_ = 'othe-video-' + usertempid_;
+        //     remoteStream.play(id_);
+        //   } else if (usersplit_ === 'wxxcx') {
+        //     const id_ = 'look-video-' + usertempid_;
+        //     remoteStream.play(id_);
+        //   } else if (usersplit_ === 'meetu') {
+        //     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('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;
+          }
+        }
+      });
+    },
+  },
+  watch: {
+    liveInfo: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        console.log(val);
+        if (val && val.number && !this.init) {
+          this.initclient();
+          this.getDevices();
+          this.init = true;
+        }
+      },
+    },
+  },
   computed: {
     ...mapState(['user']),
     pageTitle() {