关闭麦克风视频

src/api/Meeting/index.ts

@@ -38,3 +38,17 @@ export const GetRoomUser = (roomNum: string) =>
     url: `/room/user?roomNum=${roomNum}`,
     method: 'get'
   })
+
+
+export const PostOpenMicr = (data: any) =>
+  request({
+    url: `/room/oper-micr?roomNum=${data.roomNum}&enableMicr=${data.enableMicr}&uid=${data.uid}`,
+    method: 'post',
+  })
+
+export const PostOpenCamera = (data: any) =>
+  request({
+    url: `/room/oper-camera?roomNum=${data.roomNum}&enableCamera=${data.enableCamera}&uid=${data.uid}`,
+    method: 'post',
+    data
+  })

src/page/Meeting/index.tsx

@@ -6,7 +6,7 @@ import { DeleteOutlined, LoadingOutlined, ProfileOutlined, ReloadOutlined, Searc
 import { useLocation, useNavigate } from 'react-router-dom';
 import { thumbImageBufferToBase64 } from '@/utils/package/base64'
 import { storage } from '@/utils';
-import { GetRoomFile, PostRoomFile, DeleteRoomFile, GetRoomUpFileurl, GetRoomFileDwUrl, GetRoomUser } from '@/api/Meeting';
+import { GetRoomFile, PostRoomFile, DeleteRoomFile, GetRoomUpFileurl, GetRoomFileDwUrl, GetRoomUser, PostOpenMicr, PostOpenCamera } from '@/api/Meeting';
 import axios from 'axios';
 import ImageUrl from '@/utils/package/imageUrl'
 import agora from '@/utils/package/agora'
@@ -158,7 +158,15 @@ const Meeting: React.FC = () => {
 
   useEffect(() => {
     onSignalr((item: any) => {
-      setChatList((newChatList: any) => [...newChatList, item])
+      switch (item.key) {
+        case 'ReceiveMessage':
+          setChatList((newChatList: any) => [...newChatList, item])
+          break;
+        case 'RefreshUserList':
+          getRoomUser()
+          break;
+      }
+
     })
   }, [])
 
@@ -207,48 +215,28 @@ const Meeting: React.FC = () => {
         footerListTemplate[itemIndex][rowIndex].active = true
         setFooterList(footerListTemplate)
         agora.muteLocalAudioStream(true)
-        await onInvoke('joinChannel', {
-          roomNum: state.channelId,
-          isMute: false,
-          isCloseCamera: true
-        })
-        getRoomUser()
+        postOpenMicr(false)
         break;
       case '开启声音':
         footerListTemplate[itemIndex][rowIndex].title = '关闭声音'
         footerListTemplate[itemIndex][rowIndex].active = false
         setFooterList(footerListTemplate)
         agora.muteLocalAudioStream(false)
-        await onInvoke('joinChannel', {
-          roomNum: state.channelId,
-          isMute: true,
-          isCloseCamera: true
-        })
-        getRoomUser()
+        postOpenMicr(true)
         break;
       case '关闭视频':
         footerListTemplate[itemIndex][rowIndex].title = '开启视频'
         footerListTemplate[itemIndex][rowIndex].active = true
         setFooterList(footerListTemplate)
         agora.muteLocalVideoStream(true)
-        await onInvoke('joinChannel', {
-          roomNum: state.channelId,
-          isMute: true,
-          isCloseCamera: false
-        })
-        getRoomUser()
+        postOpenCamera(false)
         break;
       case '开启视频':
         footerListTemplate[itemIndex][rowIndex].title = '关闭视频'
         footerListTemplate[itemIndex][rowIndex].active = false
         setFooterList(footerListTemplate)
         agora.muteLocalVideoStream(false)
-        await onInvoke('joinChannel', {
-          roomNum: state.channelId,
-          isMute: true,
-          isCloseCamera: true
-        })
-        getRoomUser()
+        postOpenCamera(true)
         break;
       case '设置向导':
         stupWizardRef.current.changeIsStupWizard()
@@ -338,8 +326,8 @@ const Meeting: React.FC = () => {
       if (e.value) {
         await onInvoke('joinChannel', {
           roomNum: state.channelId,
-          isMute: true,
-          isCloseCamera: true
+          enableMicr: true,
+          enableCamera: true
         })
         getRoomUser()
       } else {
@@ -370,6 +358,27 @@ const Meeting: React.FC = () => {
       message.success('请输入内容！')
     }
   }
+
+  // 开关麦克风
+  const postOpenMicr = async (enableMicr: boolean): Promise<void> => {
+    await PostOpenMicr({
+      roomNum: state.channelId,
+      uid: user.uid,
+      enableMicr
+    }).then(res => {
+      getRoomUser()
+    })
+  }
+  // 开关视频
+  const postOpenCamera = async (enableCamera: boolean): Promise<void> => {
+    await PostOpenCamera({
+      roomNum: state.channelId,
+      uid: user.uid,
+      enableCamera
+    }).then(res => {
+      getRoomUser()
+    })
+  }
   return (
     <>
       <div className={styles.meeting}>
@@ -407,7 +416,7 @@ const Meeting: React.FC = () => {
                       </div>
                     </div>
                     {meetingContentUser(item)}
-                    {item.isCloseCamera ? null : meetingContentError()}
+                    {item.enableCamera ? null : meetingContentError()}
                   </div>
                 )}
               </div>
@@ -732,7 +741,7 @@ const meetingContentUser = (item: any) => {
           <img src={ImageUrl.icon32} alt="" />
         </div> : null}
         <div className={styles.meetingContentUserName}>
-          <img src={item.isMute ? ImageUrl.icon22 : ImageUrl.icon22Active} alt="" />
+          <img src={item.enableMicr ? ImageUrl.icon22 : ImageUrl.icon22Active} alt="" />
           <span>{item.userName}</span>
         </div>
       </div>

src/utils/package/signalr.ts

@@ -19,14 +19,21 @@ export const startSignalr = () => {
 export const onSignalr = (callBack: Function) => {
   connection.on("ReceiveMessage", (uid: string, userName: string, message: string) => {
     callBack({
+      key:'ReceiveMessage',
       uid, message, userName
     })
   });
+  connection.on("RefreshUserList", () => {
+    callBack({
+      key: 'ReceiveMessage'
+    })
+  });
+
 }
 export const onInvoke = async (str: string, data: any) => {
   switch (str) {
     case 'joinChannel':
-      await connection.invoke(str, data.roomNum, data.isMute, data.isCloseCamera)
+      await connection.invoke(str, data.roomNum, data.enableMicr, data.enableCamera)
       break;
     case 'levelChannel':
       await connection.invoke(str, data.roomNum)