通信修改

src/components/live-broadcast/action-bar.tsx

@@ -43,7 +43,10 @@ export default defineComponent({
           <div class={styles['bar-btn']}>
             <div class={styles.btnInner}>
               <SvgIcon
-                onClick={() => { this.barStatus.camera = !this.barStatus.camera }}
+                onClick={() => {
+                  this.barStatus.camera = !this.barStatus.camera
+                  RuntimeUtils.toggleCamera()
+                }}
                 name={this.isCameraDisabled ? 'bar-camera-disabled' : 'bar-camera'}
                 style={{
                   width: '22px',
@@ -77,7 +80,10 @@ export default defineComponent({
           <div class={styles['bar-btn']}>
             <div class={styles.btnInner}>
               <SvgIcon
-                onClick={() => { this.barStatus.volume = !this.barStatus.volume; this.volume = 0; }}
+                onClick={() => {
+                  this.barStatus.volume = !this.barStatus.volume;
+                  this.volume = 0;
+                }}
                 name={this.isVolumeDisabled ? 'bar-volume-disabled' : 'bar-volume'}
                 style={{
                   width: '22px',
@@ -138,7 +144,10 @@ export default defineComponent({
           <div class={styles['bar-btn']}>
             <div class={styles.btnInner}>
               <SvgIcon
-                onClick={() => { this.barStatus.microphone = !this.barStatus.microphone }}
+                onClick={() => {
+                  this.barStatus.microphone = !this.barStatus.microphone
+                  RuntimeUtils.toggleMicrophone()
+                }}
                 name={this.isMicrophoneDisabled ? 'bar-mike-disabled' : 'bar-mike'}
                 style={{
                   width: '22px',

src/components/live-broadcast/event.ts

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

src/components/live-broadcast/index.tsx

@@ -30,20 +30,22 @@ export default defineComponent({
         runtime.videoRef = videoRef.value
         await RuntimeUtils.getMicrophones()
         await RuntimeUtils.getCameras()
-        runtime.mediaStreams = mediaStreams
+        // runtime.mediaStreams = mediaStreams
         RuntimeUtils.setSelectCamera(runtime.cameras[0])
         RuntimeUtils.setSelectMicrophone(runtime.microphones[0])
         cameraVideoTrack = await RuntimeUtils.getTrack('camera')
-        console.log(cameraVideoTrack)
-        RuntimeUtils.setVideoSrcObject(runtime.videoRef, mediaStreams)
+        // console.log(cameraVideoTrack)
+        runtime.videoRef && cameraVideoTrack.play(runtime.videoRef)
+        // RuntimeUtils.setVideoSrcObject(runtime.videoRef, mediaStreams)
         await RuntimeUtils.setTrack([cameraVideoTrack], 'camera')
         microphoneAudioTrack = await RuntimeUtils.getTrack('microphone')
+        runtime.videoRef && microphoneAudioTrack.play(runtime.videoRef)
         console.log(runtime.deviceStatus)
         runtime.videoStatus = 'stream'
         // runtime.mediaStreamTrack = mediaStreams.getTracks()
         // await RuntimeUtils.setTrack([microphoneAudioTrack], 'microphone')
         // w_3fi4PXQcooe5_VUseReE
-        const join = await RuntimeUtils.joinRoom('w_3fi4PXQcooe5_VUseReA', RTC.RCLivingType.VIDEO, {
+        const join = await RuntimeUtils.joinRoom('w_3fi4PXQcooe5_VUseReE', RTC.RCLivingType.VIDEO, {
           onMessageReceive(name, content) {
             console.log(name, content)
           },
@@ -73,6 +75,13 @@ export default defineComponent({
               track.play()
             }
           },
+          onUserJoin (userIds: string[]) {
+            console.log('onUserJoin', userIds)
+          },
+          onUserLeave (userIds: string[]) {
+            event.emit(LIVE_EVENT_MESSAGE['RM:RTC:UserLeave'], userIds)
+            console.log('onUserLeave', userIds)
+          },
         })
         if (join.room && join.code === RTC.RCRTCCode.SUCCESS) {
           runtime.joinedRoom = join.room

src/components/live-broadcast/runtime.ts

@@ -52,8 +52,10 @@ const runtime = reactive({
   lastLikeCount: 0,
   /** 当前活跃的数据流 */
   activeTracks: {} as ActiveTracks,
-  /** 是否允许连麦 */
+  /** 是否关闭连麦 */
   allowSeatsCtrl: true,
+  /** 是否关闭发言 */
+  allowChatCtrl: true,
   /** 当前设备获取状态 */
   deviceStatus: {
     microphone: 'init',
@@ -101,7 +103,7 @@ const Events = RongIMLib.Events
  */
  const { MESSAGES, ...RestMessage } = Events
  RongIMLib.addEventListener(Events.MESSAGES, (evt: MessageEvent) => {
-  //  console.log(evt, '收到消息')
+   console.log(evt, '收到消息')
    const { messages } = evt
    for (const message of messages) {
     //  console.log(LIVE_EVENT_MESSAGE[message.messageType], message)
@@ -273,7 +275,7 @@ export const getTrack = async (trackType: TrackType): Promise<RTC.RCLocalTrack>
 export const setTrack = async (tracks: RTC.RCLocalTrack[], trackType: TrackType, needPublish = true) => {
   for (const track of tracks) {
     // @ts-ignore
-    await runtime.mediaStreams?.addTrack(track._msTrack)
+    // await runtime.mediaStreams?.addTrack(track._msTrack)
     runtime.activeTracks[trackType] = track
   }
   if (needPublish) {
@@ -287,7 +289,10 @@ export const setTrack = async (tracks: RTC.RCLocalTrack[], trackType: TrackType,
 export const removeTrack = async (tracks: RTC.RCLocalTrack[], trackType: TrackType, needPublish = true) => {
   for (const track of tracks) {
     // @ts-ignore
-    await runtime.mediaStreams?.removeTrack(track._msTrack)
+    // await runtime.mediaStreams?.removeTrack(track._msTrack)
+    // runtime.activeTracks[trackType].destroy()
+    // console.log(runtime.activeTracks[trackType])
+    // track.destroy()
     runtime.activeTracks[trackType] = null
   }
   if (needPublish) {
@@ -398,3 +403,37 @@ export const sendMessage = async (msg: any, type: SendMessageType = 'text') => {
   console.log(msg)
   await RongIMLib.sendMessage(conversation, message)
 }
+
+export const toggleMicrophone = async () => {
+  if (runtime.videoStatus === 'liveing' && runtime.joinedRoom) {
+    if (runtime.activeTracks['microphone']) {
+      await removeTrack([runtime.activeTracks['microphone']] as RTC.RCLocalTrack[], 'microphone')
+    } else {
+      const track = await getTrack('microphone')
+      await setTrack([track], 'microphone')
+    }
+  }
+}
+
+export const toggleCamera = async () => {
+  const track = runtime.activeTracks['camera']
+  console.log(track)
+  if (track) {
+    if (runtime.videoStatus === 'liveing') {
+      await removeTrack([track] as RTC.RCLocalTrack[], 'camera')
+    }
+    track.destroy()
+    if (runtime.videoRef) {
+      // console.log(runtime.videoRef.srcObject.removeTrack(runtime.videoRef.srcObject?.getVideoTracks?.()[0]))
+      // runtime.videoRef.srcObject = null
+    }
+  } else {
+    const track = await getTrack('camera')
+    if (runtime.videoStatus === 'liveing') {
+      await setTrack([track], 'camera')
+    }
+    if (runtime.videoRef) {
+      track.play(runtime.videoRef)
+    }
+  }
+}

src/components/live-message/message.tsx

@@ -12,19 +12,21 @@ export default defineComponent({
     }
   },
   methods: {
-    SeatsCtrl() {
-      RuntimeUtils.sendMessage({seatBan: !runtime.allowSeatsCtrl, ...RuntimeUtils.getSendMessageUser()}, 'SeatsCtrl')
+    async SeatsCtrl() {
+      await RuntimeUtils.sendMessage({seatBan: runtime.allowSeatsCtrl, ...RuntimeUtils.getSendMessageUser()}, 'SeatsCtrl')
+      runtime.allowSeatsCtrl = !runtime.allowSeatsCtrl
     },
-    ChatBan() {
-      RuntimeUtils.sendMessage({chatBan: !runtime.allowSeatsCtrl, ...RuntimeUtils.getSendMessageUser()}, 'ChatBan')
+    async ChatBan() {
+      await RuntimeUtils.sendMessage({chatBan: runtime.allowChatCtrl, ...RuntimeUtils.getSendMessageUser()}, 'ChatBan')
+      runtime.allowChatCtrl = !runtime.allowChatCtrl
     },
   },
   render() {
     return (
       <div class={styles.message}>
         <div class={styles.buttonGroup}>
-          <div onClick={this.SeatsCtrl} class={[this.options === 'ALL' ? styles.active : null, styles.btn]}>全体禁言</div>
-          <div onClick={this.ChatBan} class={styles.btn}>禁止连麦</div>
+          <div onClick={this.ChatBan} class={[this.options === 'ALL' ? styles.active : null, styles.btn]}>全体禁言</div>
+          <div onClick={this.SeatsCtrl} class={styles.btn}>禁止连麦</div>
         </div>
       </div>
     )

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

@@ -39,10 +39,18 @@ export default defineComponent({
   },
   mounted() {
     event.on(LIVE_EVENT_MESSAGE['RC:Chatroom:SeatApply'], this.onSeatApply);
+    event.on(LIVE_EVENT_MESSAGE['RM:RTC:UserLeave'], this.onSeatApply);
     event.on(LIVE_EVENT_MESSAGE['RM:RTC:SwitchRole'], this.onSwitchRole);
   },
   methods: {
     onSeatApply(evt: any) {
+      if (Array.isArray(evt)) {
+        for (const id of evt) {
+          delete this.joinList[id]
+        }
+        return
+      }
+      // 申请连麦
       if (evt.type === 3) {
         this.joinList[evt.audienceId] = {
           name: evt.audienceName,
@@ -50,6 +58,12 @@ export default defineComponent({
           type: evt.type,
         }
       }
+      // 取消连麦
+      if (evt.type === 4) {
+        if (this.joinList[evt.audienceId]) {
+          delete this.joinList[evt.audienceId]
+        }
+      }
     },
     agree(item: any) {
       if (this.count > 3) {
@@ -66,8 +80,17 @@ export default defineComponent({
       this.joinList[item.id] = data
       RuntimeUtils.sendMessage(data, 'SeatResponse')
     },
-    refuse() {
-
+    refuse(item: any) {
+      const data = {
+        ...item,
+        audienceName: item.name,
+        audienceId: item.id,
+        teacherId: state.user?.id,
+        teacherName: state.user?.realName,
+        type: 5,
+      }
+      this.joinList[item.id] = data
+      RuntimeUtils.sendMessage(data, 'SeatApply')
     },
     onSwitchRole(evt: any) {
       if (this.joinList[evt.userId] && evt.role === 2) {
@@ -98,7 +121,7 @@ export default defineComponent({
                   <div class={styles.join}>
                     正在连麦
                   </div>
-                  <ElButton size="small" class={styles.btn} onClick={this.refuse}>下麦</ElButton>
+                  <ElButton size="small" class={styles.btn} onClick={() => this.refuse(item)}>下麦</ElButton>
                 </div>
               )}
             </div>

src/pages/login/index.tsx

@@ -171,4 +171,4 @@ export default defineComponent({
       </div>
     )
   }
-})
+})

vite.config.ts

@@ -6,7 +6,7 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 const vueJsx = require('@vitejs/plugin-vue-jsx')
 const legacy = require('@vitejs/plugin-legacy')
 
-const proxyUrl = "https://test.dayaedu.com/"; // test 环境
+const proxyUrl = "http://dev.dayaedu.com/"; // test 环境
 // https://vitejs.dev/config/
 export default defineConfig({
   base: "./",