优化

src/components/JoinSetting/index.tsx

@@ -123,31 +123,35 @@ const JoinSetting = forwardRef((_props: any, ref: any) => {
               {
                 joinRoomSettingForm.map((item, index) => {
                   return <div key={index} onClick={async () => {
-                    let msg = '';
+                    if (user.roleId === '1'){
-                    if (index === 0) {
+                      let msg = '';
-                      await agora.getAudioMediaList().then(res => {
+                      if (index === 0) {
-                        if (!res.ecordingList.length) {
+                        await agora.getAudioMediaList().then(res => {
-                          msg = '未检测到麦克风!'
+                          if (!res.ecordingList.length) {
-                        }
+                            msg = '未检测到麦克风!'
-                      })
+                          }
-                    } else {
+                        })
-                      await agora.getVideoDeviceManager().then(res => {
+                      } else {
-                        if (!res.list.length) {
+                        await agora.getVideoDeviceManager().then(res => {
-                          msg = '未检测到摄像头!'
+                          if (!res.list.length) {
-                        }
+                            msg = '未检测到摄像头!'
-                      })
+                          }
-                    }
+                        })
-                    if (msg) {
-                      message.error('未检测到麦克风!')
-                      return
-                    }
-                    const list = [...joinRoomSettingForm]
-                    list[index].active = !list[index].active
-                    setJoinRoomSettingForm(list)
-                    if (index === 1) {
-                      if (list[index].active) {
-                        agora.startPreview('videoPreview', Number(user.account))
                       }
+                      if (msg) {
+                        message.error('未检测到麦克风!')
+                        return
+                      }
+                      const list = [...joinRoomSettingForm]
+                      list[index].active = !list[index].active
+                      setJoinRoomSettingForm(list)
+                      if (index === 1) {
+                        if (list[index].active) {
+                          agora.startPreview('videoPreview', Number(user.account))
+                        }
+                      }
+                    }else{
+                      message.error('您不是管理员，无法开启此功能！')
                     }
                   }}>
                     <img src={item.active ? item.icon : item.iconActive} alt="" />

src/page/Meeting/index.tsx

@@ -122,6 +122,7 @@ const Meeting: React.FC = () => {
   const [isShareUser, setIsShareUser] = useState<any>(null)
   const [currentLookUserStatus, setCurrentLookUserStatus] = useState<0 | 1 | 2 | 3 | 4>(1)
   let userInfo = JSON.parse(storage.getItem('user') as string)
+  const msgTips = '您不是管理员，无法开启此功能！'
   useEffect(() => {
     let time = null as any;
     setUser(userInfo)
@@ -188,6 +189,7 @@ const Meeting: React.FC = () => {
       channelId: state.channelId,
       uid: userInfo.uid,
       token: state.token,
+      roleId: userInfo.roleId,
     })
     storage.setItem('noViewChatList', 0)
     window.addEventListener('customStorageChange', handleCustomStorageChange);
@@ -227,18 +229,6 @@ const Meeting: React.FC = () => {
       const item = roomUserList.find((item: any) => item.screenShareId === String(isShare))
       setIsShareUser(item || null)
     }
-    function moveObjectToFront(arr: any, objToMove: any) {
-      const index = arr.findIndex((item: any) => {
-        return item.uid === objToMove.uid;
-      });
-
-      if (index !== -1) {
-        const movedObj = arr.splice(index, 1)[0];
-        arr.unshift(movedObj);
-      }
-      return arr;
-    }
-    setRoomUserList(moveObjectToFront(roomUserList, userInfo))
   }, [isShare, roomUserList]);
 
   useEffect(() => {
@@ -306,7 +296,7 @@ const Meeting: React.FC = () => {
         case 'OperCamera':
           setAllUserListData('OperCamera', item)
           break;
-        // 管理员用户信息刷新
+        // 主讲人用户信息刷新
         case 'ManagerRefresh':
           setAllUserListData('ManagerRefresh', item)
           break;
@@ -351,6 +341,24 @@ const Meeting: React.FC = () => {
   }, [recorder])
 
   const changeAgoraDevice = () => {
+    function moveAdminsAndSpeakersToFront(arr: any[]): any[] {
+      // 创建一个新的数组来存放管理员和主讲人
+      const adminsAndSpeakers = [] as any;
+      // 创建一个新的数组来存放其他用户
+      const otherUsers = [] as any;
+      // 遍历原始数组
+      arr.forEach((item: any) => {
+        if (item.role === '1' || item.isRoomManager) {
+          // 如果是管理员或主讲人，添加到 adminsAndSpeakers 数组
+          adminsAndSpeakers.push(item);
+        } else {
+          // 否则，添加到 otherUsers 数组
+          otherUsers.push(item);
+        }
+      });
+      // 将管理员和主讲人放在数组的最前面
+      return [...adminsAndSpeakers, ...otherUsers];
+    }
     setRoomUserList((res: any) => {
       res.forEach((item: any) => {
         if (item.uid === userInfo.uid) {
@@ -373,7 +381,7 @@ const Meeting: React.FC = () => {
           item.isShow = true;
         }
       });
-      return res
+      return moveAdminsAndSpeakersToFront(res)
     })
   }
   // 替换数据
@@ -709,17 +717,43 @@ const Meeting: React.FC = () => {
   }
   // 开关麦克风
   const postOpenMicr = async (enableMicr: boolean, uid: string, isAll?: boolean): Promise<void> => {
-    if (isAll) {
+    if (user.roleId === '1') {
-      await PostMuteAll({
+      if (isAll) {
-        roomNum: state.channelId,
+        await PostMuteAll({
-        enableMicr
+          roomNum: state.channelId,
-      })
+          enableMicr
+        })
+      } else {
+        let msg = '';
+        if (uid === user.uid) {
+          await agora.getAudioMediaList().then(res => {
+            if (!res.ecordingList.length) {
+              msg = '未检测到麦克风!'
+            }
+          })
+        }
+        if (msg) {
+          message.error(msg)
+          return
+        }
+        await PostOpenMicr({
+          roomNum: state.channelId,
+          uid,
+          enableMicr
+        })
+      }
     } else {
+      message.error(msgTips)
+    }
+  }
+  // 开关视频
+  const postOpenCamera = async (enableCamera: boolean, uid: string): Promise<void> => {
+    if (user.roleId === '1') {
       let msg = '';
       if (uid === user.uid) {
-        await agora.getAudioMediaList().then(res => {
+        await agora.getVideoDeviceManager().then(res => {
-          if (!res.ecordingList.length) {
+          if (!res.list.length) {
-            msg = '未检测到麦克风!'
+            msg = '未检测到摄像头!'
           }
         })
       }
@@ -727,37 +761,19 @@ const Meeting: React.FC = () => {
         message.error(msg)
         return
       }
-      await PostOpenMicr({
+      if (enableCamera) {
+        await agora.startCameraCapture()
+      } else {
+        await agora.stopCameraCapture();
+      }
+      await PostOpenCamera({
         roomNum: state.channelId,
         uid,
-        enableMicr
+        enableCamera
       })
-    }
-  }
-  // 开关视频
-  const postOpenCamera = async (enableCamera: boolean, uid: string): Promise<void> => {
-    let msg = '';
-    if (uid === user.uid) {
-      await agora.getVideoDeviceManager().then(res => {
-        if (!res.list.length) {
-          msg = '未检测到摄像头!'
-        }
-      })
-    }
-    if (msg) {
-      message.error(msg)
-      return
-    }
-    if (enableCamera) {
-      await agora.startCameraCapture()
     } else {
-      await agora.stopCameraCapture();
+      message.error(msgTips)
     }
-    await PostOpenCamera({
-      roomNum: state.channelId,
-      uid,
-      enableCamera
-    })
   }
   // 演讲者模式
   // const changeSpeakerMode = (): void => {
@@ -910,9 +926,9 @@ const Meeting: React.FC = () => {
                     {String(isShare) === item.screenShareId ? <div className={styles.meetingContentSwiperCardShare}>
                       屏幕分享中
                     </div> : null}
-                    <Popover placement="bottom" title={''} content={
+                    {user.roleId === '1' ? <Popover placement="bottom" title={''} content={
                       <div className={styles.meetingContentSwiperCardPopover}>
-                        {user.roleId === '1' ? <Button
+                        <Button
                           type="primary"
                           className='m-ant-btn'
                           size={'small'}
@@ -920,8 +936,8 @@ const Meeting: React.FC = () => {
                             event.stopPropagation();
                             setAllUserLook(item)
                           }}
-                        >全员看Ta</Button> : ''}
+                        >全员看Ta</Button>
-                        {item.uid !== user.uid && user.roleId === '1' ? <Button
+                        {item.uid !== user.uid ? <Button
                           type="primary"
                           className='m-ant-btn'
                           size={'small'}
@@ -930,7 +946,7 @@ const Meeting: React.FC = () => {
                             GetRoomKickout(state.channelId, item.uid)
                           }}
                         >踢出房间</Button> : null}
-                        {item.uid !== user.uid && user.roleId === '1' ? <Button
+                        {item.uid !== user.uid ? <Button
                           type="primary"
                           className='m-ant-btn'
                           size={'small'}
@@ -950,7 +966,7 @@ const Meeting: React.FC = () => {
                               })
                             }
                           }}
-                        >{item.isRoomManager ? '取消房间管理员' : '设为房间管理员'}</Button> : null}
+                        >{item.isRoomManager ? '取消房间主讲人' : '设为房间主讲人'}</Button> : null}
                         <Button
                           type="primary"
                           className='m-ant-btn'
@@ -977,7 +993,7 @@ const Meeting: React.FC = () => {
                           fontSize: '20px'
                         }} />
                       </div>
-                    </Popover>
+                    </Popover> : null}
                     <div className={styles.meetingContentSwiperCardBorder}>
                       {item.enableMicr ? <div id={`micr-${item.uid}`}></div> : null}
                     </div>
@@ -1120,7 +1136,7 @@ const Meeting: React.FC = () => {
                                             })
                                           }
                                         }}
-                                      >{item.isRoomManager ? '取消房间管理员' : '设为房间管理员'}</Button>
+                                      >{item.isRoomManager ? '取消房间主讲人' : '设为房间主讲人'}</Button>
                                       <Button
                                         type="primary"
                                         className='m-ant-btn'

src/utils/package/agora.ts

@@ -13,7 +13,8 @@ const option: any = {
   appId: 'dcfc466a6ecb4a1f972630065dfb1e75',
   token: '',
   channelId: '',
-  uid: ''
+  uid: '',
+  roleId: ''
 }
 let rtcEngine: any = '';
 
@@ -185,16 +186,22 @@ const agora = {
     agora.release()
   },
   // 加入频道
-  joinChannel: () => {
+  joinChannel: async () => {
-    rtcEngine.enableAudioVolumeIndication(100, 1, true)
+    await rtcEngine.enableAudioVolumeIndication(100, 1, true)
-    rtcEngine.joinChannel(option.token, option.channelId, option.uid, {
+    await rtcEngine.joinChannel(option.token, option.channelId, option.uid, {
       autoSubscribeAudio: true,//设置是否自动订阅所有音频流
       autoSubscribeVideo: true,//设置是否自动订阅所有视频流
       publishMicrophoneTrack: true,//设置是否发布麦克风采集到的音频
       publishCameraTrack: true,//设置是否发布摄像头采集的视频
-      clientRoleType: ClientRoleType.ClientRoleBroadcaster, //用户角色  ClientRoleBroadcaster 主播  ClientRoleAudience 观众
       publishScreenTrack: false,//设置是否发布屏幕采集的视频
     });
+    await agora.updateChannelMediaOptions()
+  },
+  // 更新频道配置
+  updateChannelMediaOptions: async () => {
+    await rtcEngine.updateChannelMediaOptions({
+      clientRoleType: option.roleId === '1' ? ClientRoleType.ClientRoleBroadcaster : ClientRoleType.ClientRoleAudience,  //用户角色  ClientRoleBroadcaster 主播  ClientRoleAudience 观众
+    })
   },
   // 共享屏幕单独用户
   joinChannelEx: async (uid: any) => {
@@ -242,7 +249,8 @@ const agora = {
     option.token = data.token;
     option.channelId = data.channelId;
     option.uid = Number(data.uid);
-    agora.joinChannel()
+    option.roleId = data.roleId;
+    await agora.joinChannel()
   },
   // 桌面捕获音频和视频的媒体源的信息
   getDesktopCapturerVideo: async () => {