分享屏幕

src/App.tsx

@@ -65,7 +65,7 @@ const App: React.FC = () => {
     });
     try {
       window.electron.getIsMaximized().then((res: boolean) => {
-        const dom = document.getElementById('root') as any;
+        const dom = document.getElementById('root') as HTMLElement;
         dom.style.borderRadius = res ? '0px' : '10px'
       })
     } catch { }

src/page/Login/index.tsx

@@ -12,7 +12,6 @@ import ImageUrl from '@/utils/package/imageUrl'
 const Login: React.FC = () => {
   const navigate = useNavigate();
   const [accountPasswordStatus, setAccountPasswordStatus] = useState<boolean>(false);
-  const [accountStatus, setAccountStatus] = useState<boolean>(false);
   const [operation, setOperation] = useState<{
     isRememberPassword: boolean;
     isAutoLogin: boolean;
@@ -62,11 +61,6 @@ const Login: React.FC = () => {
           ...data,
         })
       }
-      GetCheckUser(login.account).then(res => {
-        if (res.code === 200) {
-          setAccountStatus(res.data)
-        }
-      })
     }
   }, []);
 
@@ -86,7 +80,11 @@ const Login: React.FC = () => {
   }
   // 继续
   const continueClick = (): void => {
-    setAccountPasswordStatus(true);
+    GetCheckUser(operation.account).then(res => {
+      if (res.code === 200) {
+        res.data ? setAccountPasswordStatus(true) : message.error('账号不存在!')
+      }
+    })
   }
 
   // 设置勾选
@@ -158,13 +156,6 @@ const Login: React.FC = () => {
                     ...operation,
                     account: e.target.value
                   })
-                  if (e.target.value) {
-                    GetCheckUser(e.target.value).then(res => {
-                      if (res.code === 200) {
-                        setAccountStatus(res.data)
-                      }
-                    })
-                  }
                 }}
                 className={`${styles.loginInputIcon} drag`}
                 style={{ marginBottom: '12px' }}
@@ -179,7 +170,7 @@ const Login: React.FC = () => {
                 }
               />
 
-              {operation.account && !accountPasswordStatus && accountStatus ? <div style={{ marginTop: '36px' }} className='drag'>
+              {!accountPasswordStatus ? <div style={{ marginTop: '36px' }} className='drag'>
                 <Button type="primary"
                   onClick={continueClick}
                   style={{ width: '100%' }}

src/page/Meeting/index.tsx

@@ -14,6 +14,7 @@ import StupWizard from '@/components/StupWizard';
 import { onInvoke, onSignalr } from '@/utils/package/signalr';
 import dayjs from 'dayjs';
 import durationPlugin from 'dayjs/plugin/duration';
+import { VideoSourceType } from 'agora-electron-sdk';
 dayjs.extend(durationPlugin);
 const { Column } = Table
 const Meeting: React.FC = () => {
@@ -110,8 +111,6 @@ const Meeting: React.FC = () => {
   const [currentVideoId, setCurrentVideoId] = useState('')
   let [currentSeconds, setCurrentSeconds] = useState(0)
   const [currentEffective, setCurrentEffective] = useState(0)
-
-  const [list] = useState<number[]>([1, 2, 3, 4, 5, 6, 7])
   const [open, setOpen] = useState(false)
   useEffect(() => {
     let time = null as any;
@@ -123,6 +122,7 @@ const Meeting: React.FC = () => {
         userid: userInfo.account,
         token: state.token,
       })
+      agora.setCameraCapture(VideoSourceType.VideoSourceCameraPrimary)
       setCurrentVideoId(userInfo.account)
       setUser(userInfo)
       setIsInit(false)
@@ -187,7 +187,7 @@ const Meeting: React.FC = () => {
   }, [])
 
   useEffect(() => {
-    console.log(currentVideoId);
+
   }, [currentVideoId])
 
   // 加入房间时间
@@ -223,7 +223,7 @@ const Meeting: React.FC = () => {
         setIsSharedScreenModal(true)
         break;
       case '停止共享':
-        agora.stopScreenCapture()
+        agora.setCameraCapture(VideoSourceType.VideoSourceCameraPrimary)
         footerListTemplate[itemIndex][rowIndex].title = '共享屏幕'
         break;
       case '关闭声音':
@@ -288,7 +288,7 @@ const Meeting: React.FC = () => {
       const footerListTemplate = [...footerList]
       footerListTemplate[footerListIndex.itemIndex][footerListIndex.rowIndex].title = '停止共享'
       setIsSharedScreenModal(false)
-      agora.setDesktopCapturerVideo(sharedScreenItem)
+      agora.setDesktopCapturerVideo(sharedScreenItem, VideoSourceType.VideoSourceScreen)
     } else {
       message.error('请选择应用!')
     }

src/utils/package/agora.ts

@@ -17,6 +17,7 @@ const option: any = {
   token: '',
   channelId: '',
   userid: '',
+  sourceType: VideoSourceType.VideoSourceCameraPrimary,
 }
 let iMediaRecorder: any = '';
 let rtcEngine: any = '';
@@ -77,8 +78,7 @@ const agora = {
   setupLocalVideo: (item: any) => {
     rtcEngine.setupLocalVideo({
       renderMode: RenderModeType.RenderModeFit,
-      sourceType: VideoSourceType.VideoSourceCameraPrimary,
-      // sourceType: option.isCamera ? VideoSourceType.VideoSourceCameraPrimary : VideoSourceType.VideoSourceScreen,
+      sourceType: option.sourceType,
       uid: item.account,
       view: item.view,
       setupMode: VideoViewSetupMode.VideoViewSetupAdd,
@@ -116,29 +116,16 @@ const agora = {
     storage.setItem('isJoin', false)
   },
   // 加入频道
-  joinChannel: (bool: boolean) => {
-    // false 摄像头 true 共享屏幕
-    if (bool) {
-      rtcEngine.joinChannel(option.token, option.channelId, option.userid, {
-        channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting, //设置频道场景为直播场景
-        clientRoleType: ClientRoleType.ClientRoleBroadcaster, //用户角色 1主播 2观众
-        publishMicrophoneTrack: true, //设置是否发布麦克风采集到的音频
-        publishCameraTrack: false, //设置是否发布摄像头采集的视频
-        publishScreenTrack: true, //设置是否发布屏幕采集的视频
-        autoSubscribeAudio: true, //设置是否自动订阅所有音频流
-        autoSubscribeVideo: true, //设置是否自动订阅所有视频流
-      });
-    } else {
-      rtcEngine.joinChannel(option.token, option.channelId, option.userid, {
-        channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting, //设置频道场景为直播场景
-        clientRoleType: ClientRoleType.ClientRoleBroadcaster, //设置用户角色为主播；如果要将用户角色设置为观众，保持默认值即可
-        publishMicrophoneTrack: true, //发布麦克风采集的音频
-        publishCameraTrack: true, //发布摄像头采集的视频
-        publishScreenTrack: false, //设置是否发布屏幕采集的视频
-        autoSubscribeAudio: true, //自动订阅所有音频流
-        autoSubscribeVideo: true, //自动订阅所有视频流
-      });
-    }
+  joinChannel: () => {
+    rtcEngine.joinChannel(option.token, option.channelId, option.userid, {
+      channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting, //设置频道场景为直播场景
+      clientRoleType: ClientRoleType.ClientRoleBroadcaster, //用户角色 1主播 2观众
+      publishMicrophoneTrack: true, //设置是否发布麦克风采集到的音频
+      publishCameraTrack: true, //设置是否发布摄像头采集的视频
+      publishScreenTrack: true, //设置是否发布屏幕采集的视频
+      autoSubscribeAudio: true, //设置是否自动订阅所有音频流
+      autoSubscribeVideo: true, //设置是否自动订阅所有视频流
+    });
   },
   // 停止共享屏幕
   stopScreenCapture: () => {
@@ -153,25 +140,42 @@ const agora = {
     rtcEngine.muteLocalVideoStream(mute)
   },
   // 摄像头采集
-  setCameraCapture: () => {
+  setCameraCapture: (sourceType: number) => {
+    agora.stopScreenCapture()
+    if (sourceType !== option.sourceType) {
+      rtcEngine.destroyRendererByConfig(option.sourceType, option.channelId, option.account)
+      option.sourceType = sourceType
+      agora.setupLocalVideo({
+        account: Number(option.userid),
+        view: document.getElementById(`video-${option.userid}`),
+        channelId: option.channelId,
+      })
+    }
     rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {})
-    agora.joinChannel(false)
   },
   // 加入频道
   setJoinChannel: (data: any) => {
     option.token = data.token;
     option.channelId = data.channelId;
     option.userid = Number(data.userid);
-    rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {})
-    agora.joinChannel(false)
+    agora.joinChannel()
   },
   // 桌面捕获音频和视频的媒体源的信息
   getDesktopCapturerVideo: async () => {
     return rtcEngine.getScreenCaptureSources({ width: 300, height: 300 }, { width: 300, height: 300 }, true);
   },
   // 共享屏幕采集
-  setDesktopCapturerVideo: (targetSource: any) => {
-    // rtcEngine.stopCameraCapture(VideoSourceType.VideoSourceCamera);
+  setDesktopCapturerVideo: (targetSource: any, sourceType: number) => {
+    if (sourceType !== option.sourceType) {
+      rtcEngine.stopCameraCapture(option.sourceType)
+      rtcEngine.destroyRendererByConfig(option.sourceType, option.channelId, option.account)
+      option.sourceType = sourceType
+      agora.setupLocalVideo({
+        account: Number(option.userid),
+        view: document.getElementById(`video-${option.userid}`),
+        channelId: option.channelId,
+      })
+    }
     agora.stopScreenCapture();
     if (
       targetSource.type ===