优化加入频道设置

src/components/JoinSetting/index.tsx

@@ -8,6 +8,7 @@ import { PostRefresh } from '@/api/Login';
 import Avatar from '@/components/Avatar';
 import { useNavigate } from 'react-router-dom';
 import agora from '@/utils/package/agora';
+let time = null as any;
 const JoinSetting = forwardRef((_props: any, ref: any) => {
   useImperativeHandle(ref, () => ({
     changeModal: (roomNum: string = '') => {
@@ -21,10 +22,15 @@ const JoinSetting = forwardRef((_props: any, ref: any) => {
       if (location.hash.indexOf('/meeting') === -1) {
         agora.init()
       }
+      getDeviceList()
     }
   }))
   const navigate = useNavigate();
   const [user, setUser] = useState<any>({});
+  const [deviceList, setDeviceList] = useState<any>({
+    audioList: [],
+    videoList: [],
+  });
   const [joinRoomSettingModal, setJoinRoomSettingModal] = useState(false)
   const [joinRoomSettingForm, setJoinRoomSettingForm] = useState({
     list: [
@@ -43,6 +49,37 @@ const JoinSetting = forwardRef((_props: any, ref: any) => {
     ],
     roomNum: '',
   })
+  const getDeviceList = (): void => {
+    time = setInterval(async () => {
+      const list = [...joinRoomSettingForm.list]
+      await agora.getAudioMediaList().then(res => {
+        setDeviceList({
+          ...deviceList,
+          audioList: res.ecordingList
+        })
+        if (!res.ecordingList.length) {
+          list[0].active = false
+          setJoinRoomSettingForm({
+            ...joinRoomSettingForm,
+            list
+          })
+        }
+      })
+      await agora.getVideoDeviceManager().then(res => {
+        setDeviceList({
+          ...deviceList,
+          videoList: res.list
+        })
+        if (!res.list.length) {
+          list[1].active = false
+          setJoinRoomSettingForm({
+            ...joinRoomSettingForm,
+            list
+          })
+        }
+      })
+    }, 1000)
+  }
   const isGetCheckoutRoomNum = async (roomNum: string, callBack: Function): Promise<void> => {
     await GetCheckoutRoomNum(roomNum).then(res => {
       if (res.code === 200) {
@@ -72,6 +109,7 @@ const JoinSetting = forwardRef((_props: any, ref: any) => {
         footer={null} centered
         width={'500px'}
         onCancel={() => {
+          clearInterval(time)
           agora.release()
           setJoinRoomSettingModal(false)
         }}>
@@ -104,6 +142,17 @@ const JoinSetting = forwardRef((_props: any, ref: any) => {
               {
                 joinRoomSettingForm.list.map((item, index) => {
                   return <div key={index} onClick={async () => {
+                    if (index === 0) {
+                      if (!deviceList.audioList.length) {
+                        message.error('未检测到麦克风!')
+                        return
+                      }
+                    } else {
+                      if (!deviceList.videoList.length) {
+                        message.error('未检测到摄像头!')
+                        return
+                      }
+                    }
                     const list = [...joinRoomSettingForm.list]
                     list[index].active = !list[index].active
                     setJoinRoomSettingForm({
@@ -134,6 +183,7 @@ const JoinSetting = forwardRef((_props: any, ref: any) => {
                       getRoomRtcToken(joinRoomSettingForm.roomNum, (token: string) => {
                         if (token) {
                           postRefresh(() => {
+                            clearInterval(time)
                             setJoinRoomSettingModal(false)
                             GetRoomInfo(joinRoomSettingForm.roomNum).then(async (res) => {
                               if (res.code === 200) {