Merge pull request 'yangjie' (#33) from yangjie into master

Reviewed-on: #33

main.js

@@ -203,7 +203,7 @@ app.on('ready', () => {
                     break;
                 case 'joinChannel':
                     // 设置某个人的设备列表
-                    await connection.invoke(str, data.roomNum, data.enableMicr, data.enableCamera)
+                    await connection.invoke(str, data.roomNum, data.enableMicr, data.enableCamera, data.isRoomManager || false)
                     break;
                 case 'levelChannel':
                     // 设置某个人的设备列表
@@ -712,14 +712,14 @@ function mainWindowHide() {
 }
 
 const startSignalr = async (user) => {
-    connection = new signalR.HubConnectionBuilder().withAutomaticReconnect()
+    connection = new signalR.HubConnectionBuilder()
         .withUrl(`${env === 'development' ? 'http://192.168.2.9:5192' : 'https://meeting-api.23544.com/pc'}/session-manage`, {
             skipNegotiation: true,
             transport: signalR.HttpTransportType.WebSockets,
             accessTokenFactory: () => user.token
         })
+        .withAutomaticReconnect([0, 3000, 3000, 3000])
         .build();
-    onStart()
     mainWindow.webContents.send('changeLocalStorage', {
         isSignalr: true,
         reconnect: true,
@@ -735,13 +735,21 @@ const startSignalr = async (user) => {
             reconnect: false,
         });
     });
+    connection.start();
 }
 
 const onStart = async () => {
     if (connection) {
+        if (connection.state === signalR.HubConnectionState.Disconnected) {
+            connection.start().then(() => {
+                mainWindow.webContents.send('changeLocalStorage', {
+                    reconnect: true,
+                });
+            }).catch((err) => {
+
+            });
+        }
         if (connection.state !== signalR.HubConnectionState.Connected) {
-            connection.start();
-        } else {
             setTimeout(onStart, 3000);
         }
     }

src/page/Home/User/index.tsx

@@ -423,7 +423,7 @@ const User: React.FC = () => {
               if (!addUserFrom.UserName && isCreateUser !== 'batch') {
                 return message.error('请输入用户名称！')
               }
-              if (!addUserFrom.year) {
+              if (addUserFrom.year === '') {
                 return message.error('请输入届！')
               }
               if (isCreateUser === 'add') {

src/page/Meeting/index.tsx

@@ -166,7 +166,7 @@ const Meeting: React.FC = () => {
   const [currentLookUserAccount, setCurrentLookUserAccount] = useState<any>('')
   const [recorder, setRecorder] = useState<any>('')
   const [_currentRequestSpeakType, setCurrentRequestSpeakType] = useState<'video' | 'audio' | ''>('')
-  const [_mediaStream, setMediaStream] = useState<any>('')
+  const [_mediaStream, setMediaStream] = useState<any>([])
   const [isShare, setIsShare] = useState<any>(null)
   const [isSharePopConfirm, setIsSharePopConfirm] = useState(false)
   const [_isNetworkDisconnected, setIsNetworkDisconnected] = useState(false)
@@ -191,6 +191,7 @@ const Meeting: React.FC = () => {
   let userInfo = JSON.parse(storage.getItem('user') as string)
   const msgTips = '您不是管理员或发言人，无法开启此功能！'
   const channel = new BroadcastChannel('meeting_channel');
+  let storeDevice: any;
   useEffect(() => {
     let time: NodeJS.Timeout;
     setUser(userInfo)
@@ -841,7 +842,7 @@ const Meeting: React.FC = () => {
           const mp4Path = `${setting.recordingFilesPath}会议录制_${state.roomName}_${state.channelId}_${dayjs().format('YYYY年MM月DD日HH时mm分')}.webm`;
           await fs.writeFile(mp4Path, buffer, {});
           setRecorder('')
-          setMediaStream('')
+          setMediaStream([])
           confirm({
             title: '提示',
             icon: <ExclamationCircleFilled />,
@@ -974,12 +975,6 @@ const Meeting: React.FC = () => {
             view: null,
             channelId: connection.channelId,
           });
-          setCurrentVideoId((res: any) => {
-            if (Number(res) === remoteUid) {
-              getShowUser();
-            }
-            return res
-          })
         }
       },
       onAudioVolumeIndication: async (speakers: AudioVolumeInfo[]) => {
@@ -1036,10 +1031,15 @@ const Meeting: React.FC = () => {
       onRtcStats: async (stats: RtcStats) => {
         setNetworkOther(stats)
       },
-      onConnectionStateChanged: async (_connection: RtcConnection, stateNumber: ConnectionStateType, reason: ConnectionChangedReasonType) => {
+      onConnectionStateChanged: async (_connection: RtcConnection, state: ConnectionStateType, reason: ConnectionChangedReasonType) => {
         const reconnectingCode = [2, 16, 11, 13, 14, 12]
-        if (stateNumber === 4 && reconnectingCode.indexOf(reason) >= 0) {
+        if (state === 4 && reconnectingCode.indexOf(reason) >= 0) {
-          message.error('网络断开，请检查网络')
+
+        } else if (state === 3) {
+          meetingDisconnectedRef.current.changeModal(false)
+        }
+      },
+      onConnectionLost: () => {
         meetingDisconnectedRef.current.changeModal(true)
         setIsScreenCapture(bool => {
           if (bool) {
@@ -1048,9 +1048,6 @@ const Meeting: React.FC = () => {
           }
           return bool
         })
-        } else if (stateNumber === 3) {
-          meetingDisconnectedRef.current.changeModal(false)
-        }
       },
       onLocalVideoStateChanged: async (_source: VideoSourceType, _state: LocalVideoStreamState, reason: LocalVideoStreamReason) => {
         if (reason === 12) {
@@ -1214,6 +1211,12 @@ const Meeting: React.FC = () => {
           }
           return res
         })
+        setCurrentVideoId((res: any) => {
+          if (Number(res) === Number(item.uid)) {
+            getShowUser();
+          }
+          return res
+        })
         break;
       case 'OperAllMicr':
         setRoomUserList((res: any) => {
@@ -1489,7 +1492,7 @@ const Meeting: React.FC = () => {
             // 录制所有音频输入设备
             audioInputDevices.forEach(async device => {
               const micStream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId: { exact: device.deviceId } } });
-              setMediaStream(micStream);
+              setMediaStream((res: any) => [...res, micStream]);
               const micSoundSource = audioCtx.createMediaStreamSource(micStream);
               micSoundSource.connect(systemSoundDestination);
             })
@@ -1557,10 +1560,12 @@ const Meeting: React.FC = () => {
       return res
     })
     setMediaStream((res: any) => {
-      if (res) {
+      if (res.length) {
-        res.getTracks().forEach((track: any) => {
+        res.forEach((item: any) => {
+          item.getTracks().forEach((track: any) => {
             track.stop()
           });
+        });
       }
       return res
     })
@@ -1730,21 +1735,21 @@ const Meeting: React.FC = () => {
         break;
       case 'reconnect':
         if (e.value == true) {
-          await window.electron.onInvoke('joinChannel', {
-            roomNum: state.channelId,
-            enableMicr: !footerList[0][0].active,
-            enableCamera: !footerList[0][1].active
-          })
           message.success('网络已连接。')
           meetingDisconnectedRef.current.changeModal(false)
-          setRoomUserList((res: any) => {
+          async function setUserStatus(res: any) {
             let userItem = res.find((item: any) => item.uid === userInfo.uid)
-            if (userItem.isRoomManager) {
+            await window.electron.onInvoke('joinChannel', {
-              DeleteRoomManager({
-                roomId: state.roomId,
               roomNum: state.channelId,
-                userId: userInfo.uid
+              enableMicr: !storeDevice[0][0].active,
+              enableCamera: !storeDevice[0][1].active,
+              isRoomManager: userItem.isRoomManager
             })
+            await getRoomUser()
+            await getShowUser()
+            if (userItem.isRoomManager) {
+              await postOpenMicr(!storeDevice[0][0].active, userInfo.uid)
+              await postOpenCamera(!storeDevice[0][1].active, userInfo.uid)
             }
             setIsNetworkDisconnected(bool => {
               if (bool) {
@@ -1754,13 +1759,17 @@ const Meeting: React.FC = () => {
             })
             setIsScreenCapture(bool => {
               if (bool) {
-                allUserLook(userItem.uid, userItem.userName)
+                allUserLook(userItem.screenShareId, userItem.userName)
               }
               return bool
             })
+          }
+          setRoomUserList((res: any) => {
+            setUserStatus(res)
             return res
           })
-
+        } else {
+          storeDevice = JSON.parse(JSON.stringify(footerList))
         }
         break;
     }
@@ -2925,7 +2934,7 @@ const networkIcon = (network: number) => {
   switch (network) {
     case 0:
       return <svg width="16" height="16" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <g clip-path="url(#clip0_5499_5160)">
+        <g clipPath="url(#clip0_5499_5160)">
           <path d="M2.01914 32.4824C0.969141 32.4824 0.119141 31.6324 0.119141 30.5824V22.9824C0.119141 21.9324 0.969141 21.0824 2.01914 21.0824C3.06914 21.0824 3.91914 21.9324 3.91914 22.9824V30.5824C3.91914 31.6324 3.06914 32.4824 2.01914 32.4824ZM11.4191 32.4824C10.3691 32.4824 9.51914 31.6324 9.51914 30.5824V15.7824C9.51914 14.7324 10.3691 13.8824 11.4191 13.8824C12.4691 13.8824 13.3191 14.7324 13.3191 15.7824V30.5824C13.3191 31.6324 12.4691 32.4824 11.4191 32.4824ZM20.8191 32.4824C19.7691 32.4824 18.9191 31.6324 18.9191 30.5824V9.38242C18.9191 8.33242 19.7691 7.48242 20.8191 7.48242C21.8691 7.48242 22.7191 8.33242 22.7191 9.38242V30.5824C22.7191 31.6324 21.8691 32.4824 20.8191 32.4824ZM30.2191 32.4824C29.1691 32.4824 28.3191 31.6324 28.3191 30.5824V2.38242C28.3191 1.33242 29.1691 0.482422 30.2191 0.482422C31.2691 0.482422 32.1191 1.33242 32.1191 2.38242V30.5824C32.1191 31.6324 31.2691 32.4824 30.2191 32.4824Z" fill="#7C8280" />
           <path d="M8.98179 2.67253L6.22791 5.42641L3.47403 2.67253C3.11639 2.31489 2.52627 2.31489 2.16863 2.67253C1.81098 3.03018 1.81098 3.62029 2.16863 3.97794L4.9225 6.73182L2.16863 9.48569C1.81098 9.84334 1.81098 10.4335 2.16863 10.7911C2.52627 11.1488 3.11639 11.1488 3.47403 10.7911L6.22791 8.03723L8.98179 10.7911C9.33943 11.1488 9.92955 11.1488 10.2872 10.7911C10.6448 10.4335 10.6448 9.84334 10.2872 9.48569L7.53332 6.73182L10.2872 3.97794C10.6448 3.62029 10.6448 3.03018 10.2872 2.67253C9.92955 2.31489 9.33943 2.31489 8.98179 2.67253Z" fill="#F90000" />
         </g>

src/utils/package/agora.ts

@@ -150,7 +150,7 @@ export const agora = {
     }, 1000);
   },
   // 事件回调
-  registerEventHandler: ({ onJoinChannelSuccess, onUserJoined, onUserOffline, onAudioVolumeIndication, onNetworkQuality, onRtcStats, onConnectionStateChanged, onLocalVideoStateChanged }: any) => {
+  registerEventHandler: ({ onJoinChannelSuccess, onUserJoined, onUserOffline, onAudioVolumeIndication, onNetworkQuality, onRtcStats, onConnectionStateChanged, onLocalVideoStateChanged, onConnectionLost }: any) => {
     rtcEngine.registerEventHandler({
       // 监听本地用户加入频道事件
       onJoinChannelSuccess: async (connection: RtcConnection, elapsed: number) => {
@@ -196,6 +196,10 @@ export const agora = {
       onLocalVideoStateChanged: async (source: VideoSourceType, state: LocalVideoStreamState, reason: LocalVideoStreamReason) => {
         await onLocalVideoStateChanged?.(source, state, reason)
       },
+      // 网络连接中断，且 SDK 无法在 10 秒内连接服务器回调。
+      onConnectionLost: (_connection: RtcConnection) => {
+        onConnectionLost?.()
+      }
     });
   },
   // 获取视图模式