上麦下麦

src/components/live-broadcast/event.ts

@@ -8,6 +8,8 @@ export const LIVE_EVENT_MESSAGE = {
   'RC:Chatroom:SeatsCtrl': 'SeatsCtrl',
   'RC:Chatroom:ChatBan': 'ChatBan',
   'RC:Chatroom:SeatApply': 'SeatApply',
+  'RM:RTC:TrackUnpublish': 'TrackUnpublish',
+  'RM:RTC:SwitchRole': 'SwitchRole',
 }
 
 export default mitt()

src/components/live-broadcast/index.tsx

@@ -4,6 +4,7 @@ import Header from './header'
 import ActionBar from './action-bar'
 import VideoStatus from './video-status'
 import { state } from '/src/state'
+import event, { LIVE_EVENT_MESSAGE } from './event'
 import runtime, * as RuntimeUtils from './runtime'
 import { removeMedia } from './helpers'
 import styles from './index.module.less'
@@ -33,6 +34,7 @@ export default defineComponent({
         RuntimeUtils.setSelectCamera(runtime.cameras[0])
         RuntimeUtils.setSelectMicrophone(runtime.microphones[0])
         cameraVideoTrack = await RuntimeUtils.getTrack('camera')
+        console.log(cameraVideoTrack)
         RuntimeUtils.setVideoSrcObject(runtime.videoRef, mediaStreams)
         await RuntimeUtils.setTrack([cameraVideoTrack], 'camera')
         microphoneAudioTrack = await RuntimeUtils.getTrack('microphone')
@@ -54,6 +56,16 @@ export default defineComponent({
               console.log('资源订阅失败 ->', subscribeRes.code)
             }
           },
+          onTrackUnpublish(tracks: RTC.RCRemoteTrack[]) {
+            console.log(tracks)
+            event.emit(LIVE_EVENT_MESSAGE['RM:RTC:TrackUnpublish'], tracks)
+          },
+          onSwitchRole(userId: string, role: RTC.RCRTCLiveRole) {
+            event.emit(LIVE_EVENT_MESSAGE['RM:RTC:SwitchRole'], {
+              userId,
+              role,
+            })
+          },
           onTrackReady (track: RTC.RCRemoteTrack) {
             if (track.isAudioTrack()) {
               // 音轨不需要传递播放控件

src/components/live-message/model/index.module.less

@@ -65,6 +65,7 @@
     text-align: center;
     padding: 3px 15px 1px;
     border-radius: 2px;
+    cursor: pointer;
   }
 }
 
@@ -74,4 +75,4 @@
   right: 0;
   top: 0;
   bottom: 0;
-}
+}

src/components/live-message/model/join-model.tsx

@@ -1,5 +1,6 @@
 import { defineComponent } from "vue";
 import styles from './index.module.less'
+import { ElButton } from'element-plus'
 import event, { LIVE_EVENT_MESSAGE } from '/src/components/live-broadcast/event';
 import { state } from '/src/state'
 import dayjs from 'dayjs';
@@ -9,40 +10,70 @@ import runtime, * as RuntimeUtils from '/src/components/live-broadcast/runtime'
 export default defineComponent({
   data() {
     return {
-      joinList: [] as any[], // 连麦学生列表
+      joinList: {} as {[key: string]: any}, // 连麦学生列表
       loadingJoin: false, // 连麦列表状态
     }
   },
+  computed: {
+    count() {
+      let count = 0
+      for (const key in this.joinList) {
+        if (Object.prototype.hasOwnProperty.call(this.joinList, key)) {
+          const item = this.joinList[key];
+          if (item.type === 3) {
+            count += 1
+          }
+          if (count > 3) {
+            break
+          }
+        }
+      }
+      return count
+    },
+  },
   mounted() {
     event.on(LIVE_EVENT_MESSAGE['RC:Chatroom:SeatApply'], this.onSeatApply);
+    event.on(LIVE_EVENT_MESSAGE['RM:RTC:SwitchRole'], this.onSwitchRole);
   },
   methods: {
     onSeatApply(evt: any) {
-      console.log(evt)
       if (evt.type === 3) {
-        this.joinList.push({
+        this.joinList[evt.audienceId] = {
           name: evt.audienceName,
           id: evt.audienceId,
           type: evt.type,
-        })
+        }
       }
     },
-    agree() {
-      RuntimeUtils.sendMessage({
-        audienceId: '1094335',
-        audienceName: '小伙伴',
+    agree(item: any) {
+      if (this.count > 3) {
+        return
+      }
+      const data = {
+        ...item,
+        audienceName: item.name,
+        audienceId: item.id,
         teacherId: state.user?.id,
         teacherName: state.user?.realName,
         type: 1,
-      }, 'SeatResponse')
+      }
+      this.joinList[item.id] = data
+      RuntimeUtils.sendMessage(data, 'SeatResponse')
     },
-    refuse() {},
+    refuse() {
+
+    },
+    onSwitchRole(evt: any) {
+      if (this.joinList[evt.userId] && evt.role === 2) {
+        delete this.joinList[evt.userId]
+      }
+    }
   },
   render() {
-    console.log(this.joinList.length)
+    const list = Object.values(this.joinList)
     return (
       <div style={{ minHeight: '100%', position: 'relative' }}>
-        {this.joinList.length > 0 ? this.joinList.map((item : any) => (
+        {list.length > 0 ? list.map((item : any) => (
           <div class={styles.itemContent}>
             <img src="/src/assets/home/placehorder-icon.png" alt="" />
             <div class={styles.itemInfo}>
@@ -54,14 +85,14 @@ export default defineComponent({
                   <div class={styles.join}>
                     申请连麦
                   </div>
-                  <div class={styles.btn} onClick={this.agree}>上麦</div>
+                  <ElButton size="small" disabled={this.count > 3} class={styles.btn} onClick={() => this.agree(item)}>上麦</ElButton>
                 </div>
               ) : (
                 <div class={styles.joinText}>
                   <div class={styles.join}>
                     正在连麦
                   </div>
-                  <div class={styles.btn} onClick={this.refuse}>下麦</div>
+                  <ElButton size="small" class={styles.btn} onClick={this.refuse}>下麦</ElButton>
                 </div>
               )}
             </div>