连麦等

src/components/live-broadcast/index.tsx

@@ -39,14 +39,27 @@ export default defineComponent({
         console.log(runtime.deviceStatus)
         runtime.videoStatus = 'stream'
         // runtime.mediaStreamTrack = mediaStreams.getTracks()
-        await RuntimeUtils.setTrack([microphoneAudioTrack], 'microphone')
+        // await RuntimeUtils.setTrack([microphoneAudioTrack], 'microphone')
         const join = await RuntimeUtils.joinRoom('w_3fi4PXQcooe5_VUseReE', RTC.RCLivingType.VIDEO, {
           onMessageReceive(name, content) {
             console.log(name, content)
           },
           onKickOff(byServer: boolean) {
             console.log(byServer)
-          }
+          },
+          async onTrackPublish (tracks: RTC.RCRemoteTrack[]) {
+            const subscribeRes = await join?.room?.subscribe(tracks)
+            console.log(subscribeRes)
+            if (subscribeRes?.code && subscribeRes.code !== RTC.RCRTCCode.SUCCESS) {
+              console.log('资源订阅失败 ->', subscribeRes.code)
+            }
+          },
+          onTrackReady (track: RTC.RCRemoteTrack) {
+            if (track.isAudioTrack()) {
+              // 音轨不需要传递播放控件
+              track.play()
+            }
+          },
         })
         if (join.room && join.code === RTC.RCRTCCode.SUCCESS) {
           runtime.joinedRoom = join.room

src/components/live-broadcast/runtime.ts

@@ -79,6 +79,13 @@ const MessageSeatsCtrl = RongIMLib.registerMessageType('RC:Chatroom:SeatsCtrl',
 // 控制是否允许发言
 const MessageChatBan = RongIMLib.registerMessageType('RC:Chatroom:ChatBan', true, true)
 
+// 连麦消息
+const MessageSeatApply = RongIMLib.registerMessageType('RC:Chatroom:SeatApply', true, true)
+
+// 响应连麦消息
+const MessageSeatResponse = RongIMLib.registerMessageType('RC:Chatroom:SeatResponse', true, true)
+
+
 type MessageProps = {
   messageType: 'RC:Chatroom:Welcome' | 'RC:TxtMsg' | 'RC:Chatroom:Barrage' | 'RC:Chatroom:Like' | 'RC:Chatroom:SeatsCtrl' | 'RC:Chatroom:ChatBan' | 'RC:Chatroom:SeatApply',
   content: any,
@@ -94,9 +101,10 @@ 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)
      if (LIVE_EVENT_MESSAGE[message.messageType]) {
       event.emit(LIVE_EVENT_MESSAGE[message.messageType], {...message.content, $EventMessage: message})
      }
@@ -288,7 +296,7 @@ export const removeTrack = async (tracks: RTC.RCLocalTrack[], trackType: TrackTy
 }
 
 export const joinRoom = async (roomId: string, type: RTC.RCLivingType, listenEvents: RTC.IRoomEventListener | null) => {
-  await RongIMLib.joinChatRoom(roomId, {count: 0})
+  await RongIMLib.joinChatRoom(roomId, {count: -1})
   const join = await runtime.rtcClient?.joinLivingRoom(roomId, type)
   if (join?.code != RTC.RCRTCCode.SUCCESS) throw Error('加入房间失败')
   join.room?.registerRoomEventListener(listenEvents)
@@ -304,6 +312,7 @@ export const startLive = async () => {
   const room = runtime.joinedRoom
   if (room) {
     const microphoneAudioTrack = await getTrack('microphone')
+    console.log(microphoneAudioTrack)
     const cameraVideoTrack = await getTrack('camera')
     await setTrack([cameraVideoTrack], 'camera')
     runtime.videoStatus = 'liveing'
@@ -347,7 +356,7 @@ export const loopSyncLike = async () => {
   }, 1000 * 60)
 }
 
-type SendMessageType = 'text' | 'image' | 'audio' | 'video' | 'file' | 'SeatsCtrl' | 'ChatBan'
+type SendMessageType = 'text' | 'image' | 'audio' | 'video' | 'file' | 'SeatsCtrl' | 'ChatBan' | 'SeatApply' | 'SeatResponse'
 
 export const getSendMessageUser = () => {
   return {
@@ -380,6 +389,10 @@ export const sendMessage = async (msg: any, type: SendMessageType = 'text') => {
     message = new MessageSeatsCtrl(msg)
   } else if (type === 'ChatBan') {
     message = new MessageChatBan(msg)
+  } else if (type === 'SeatApply') {
+    message = new MessageSeatApply(msg)
+  } else if (type === 'SeatResponse') {
+    message = new MessageSeatResponse(msg)
   }
   if (!message) return
   console.log(msg)

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

@@ -4,6 +4,7 @@ import event, { LIVE_EVENT_MESSAGE } from '/src/components/live-broadcast/event'
 import { state } from '/src/state'
 import dayjs from 'dayjs';
 import Empty from "/src/components/empty";
+import runtime, * as RuntimeUtils from '/src/components/live-broadcast/runtime'
 
 export default defineComponent({
   data() {
@@ -12,7 +13,33 @@ export default defineComponent({
       loadingJoin: false, // 连麦列表状态
     }
   },
+  mounted() {
+    event.on(LIVE_EVENT_MESSAGE['RC:Chatroom:SeatApply'], this.onSeatApply);
+  },
+  methods: {
+    onSeatApply(evt: any) {
+      console.log(evt)
+      if (evt.type === 3) {
+        this.joinList.push({
+          name: evt.audienceName,
+          id: evt.audienceId,
+          type: evt.type,
+        })
+      }
+    },
+    agree() {
+      RuntimeUtils.sendMessage({
+        audienceId: '1094335',
+        audienceName: '小伙伴',
+        teacherId: state.user?.id,
+        teacherName: state.user?.realName,
+        type: 1,
+      }, 'SeatResponse')
+    },
+    refuse() {},
+  },
   render() {
+    console.log(this.joinList.length)
     return (
       <div style={{ minHeight: '100%', position: 'relative' }}>
         {this.joinList.length > 0 ? this.joinList.map((item : any) => (
@@ -20,18 +47,27 @@ export default defineComponent({
             <img src="/src/assets/home/placehorder-icon.png" alt="" />
             <div class={styles.itemInfo}>
               <div class={styles.itemName}>
-                <p class={styles.userName}>唐老师 </p>
+                <p class={styles.userName}>{item.name}</p>
               </div>
-              <div class={styles.joinText}>
-                <div class={styles.join}>
-                  申请连麦
+              {item.type === 3 ? (
+                <div class={styles.joinText}>
+                  <div class={styles.join}>
+                    申请连麦
+                  </div>
+                  <div class={styles.btn} onClick={this.agree}>上麦</div>
                 </div>
-                <div class={styles.btn}>下麦</div>
-              </div>
+              ) : (
+                <div class={styles.joinText}>
+                  <div class={styles.join}>
+                    正在连麦
+                  </div>
+                  <div class={styles.btn} onClick={this.refuse}>下麦</div>
+                </div>
+              )}
             </div>
           </div>
         )) : this.loadingJoin ? <div class={styles.loadingStyle} v-loading={this.loadingJoin} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty text="暂无学员发起连麦！" icon="noData-no-join" />}
       </div>
     )
   }
-})
+})