共享屏幕准备

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,14 +111,13 @@ 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;
     if (isInit) {
       let userInfo = JSON.parse(storage.getItem('user') as string)
       agora.init()
+      agora.setCameraCapture(VideoSourceType.VideoSourceCameraPrimary)
       agora.setJoinChannel({
         channelId: state.channelId,
         userid: userInfo.account,
@@ -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,12 +78,19 @@ 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,
     });
+    switch (option.sourceType) {
+      case VideoSourceType.VideoSourceCameraPrimary:
+        agora.updateChannelMediaOptions(true)
+        break;
+      case VideoSourceType.VideoSourceScreen:
+        agora.updateChannelMediaOptions(false)
+        break;
+    }
   },
   // 远端加入
   setupRemoteVideoJoin: (item: any) => {
@@ -116,20 +124,14 @@ const agora = {
     storage.setItem('isJoin', false)
   },
   // 加入频道
-  joinChannel: (bool: boolean) => {
-    // false 摄像头 true 共享屏幕
+  joinChannel: () => {
+    rtcEngine.joinChannel(option.token, option.channelId, option.userid, {});
+  },
+  // 更新频道信息
+  updateChannelMediaOptions: (bool: boolean) => {
     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, {
+      // 摄像头
+      rtcEngine.updateChannelMediaOptions({
         channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting, //设置频道场景为直播场景
         clientRoleType: ClientRoleType.ClientRoleBroadcaster, //设置用户角色为主播；如果要将用户角色设置为观众，保持默认值即可
         publishMicrophoneTrack: true, //发布麦克风采集的音频
@@ -137,7 +139,18 @@ const agora = {
         publishScreenTrack: false, //设置是否发布屏幕采集的视频
         autoSubscribeAudio: true, //自动订阅所有音频流
         autoSubscribeVideo: true, //自动订阅所有视频流
-      });
+      })
+    } else {
+      // 屏幕
+      rtcEngine.updateChannelMediaOptions({
+        channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting, //设置频道场景为直播场景
+        clientRoleType: ClientRoleType.ClientRoleBroadcaster, //用户角色 1主播 2观众
+        publishMicrophoneTrack: true, //设置是否发布麦克风采集到的音频
+        publishCameraTrack: false, //设置是否发布摄像头采集的视频
+        publishScreenTrack: true, //设置是否发布屏幕采集的视频
+        autoSubscribeAudio: true, //设置是否自动订阅所有音频流
+        autoSubscribeVideo: true, //设置是否自动订阅所有视频流
+      })
     }
   },
   // 停止共享屏幕
@@ -153,25 +166,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) => {
+  setJoinChannel: async (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: async (targetSource: any, sourceType: number) => {
+    if (sourceType !== option.sourceType) {
+      await 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 ===