优化

src/page/Meeting/index.tsx

@@ -14,6 +14,7 @@ import { storage } from '@/utils';
 import { GetRoomFile, PostRoomFile, DeleteRoomFile, GetRoomUpFileurl, GetRoomFileDwUrl } from '@/api/Meeting';
 import axios from 'axios';
 import ImageUrl from '@/utils/package/imageUrl'
+import agora from '@/utils/package/agora'
 const { Column } = Table
 const Meeting: React.FC = () => {
   const navigate = useNavigate();
@@ -118,7 +119,7 @@ const Meeting: React.FC = () => {
   useEffect(() => {
     if (isInit) {
       setUser(JSON.parse(storage.getItem('user') as string))
-      // window.agora.setJoinChannel({
+      // agora.setJoinChannel({
       //   channelId: state.channelId,
       //   userid: user.userName,
       //   token: state.token,
@@ -153,49 +154,49 @@ const Meeting: React.FC = () => {
         setIsSharedScreenModal(true)
         break;
       case '停止共享':
-        window.agora.stopScreenCapture()
+        agora.stopScreenCapture()
         footerListTemplate[itemIndex][rowIndex].title = '共享屏幕'
         break;
       case '关闭声音':
         footerListTemplate[itemIndex][rowIndex].title = '开启声音'
         footerListTemplate[itemIndex][rowIndex].active = true
         setFooterList(footerListTemplate)
-        window.agora.muteLocalAudioStream(true)
+        agora.muteLocalAudioStream(true)
         break;
       case '开启声音':
         footerListTemplate[itemIndex][rowIndex].title = '关闭声音'
         footerListTemplate[itemIndex][rowIndex].active = false
         setFooterList(footerListTemplate)
-        window.agora.muteLocalAudioStream(false)
+        agora.muteLocalAudioStream(false)
         break;
       case '关闭视频':
         footerListTemplate[itemIndex][rowIndex].title = '开启视频'
         footerListTemplate[itemIndex][rowIndex].active = true
         setFooterList(footerListTemplate)
-        window.agora.muteLocalVideoStream(true)
+        agora.muteLocalVideoStream(true)
         break;
       case '开启视频':
         footerListTemplate[itemIndex][rowIndex].title = '关闭视频'
         footerListTemplate[itemIndex][rowIndex].active = false
         setFooterList(footerListTemplate)
-        window.agora.muteLocalVideoStream(false)
+        agora.muteLocalVideoStream(false)
         break;
       case '设置向导':
         getAudioMediaList()
-        window.agora.startRecordingDeviceTest(200)
+        agora.startRecordingDeviceTest(200)
         setIsStupWizard(true)
         break;
       case '录制':
         footerListTemplate[itemIndex][rowIndex].title = '录制中'
         footerListTemplate[itemIndex][rowIndex].active = true
         setFooterList(footerListTemplate)
-        window.agora.startRecording()
+        agora.startRecording()
         break;
       case '录制中':
         footerListTemplate[itemIndex][rowIndex].title = '录制'
         footerListTemplate[itemIndex][rowIndex].active = false
         setFooterList(footerListTemplate)
-        window.agora.stopRecording()
+        agora.stopRecording()
         break;
       case '共享文件':
         await getRoomFile()
@@ -213,8 +214,8 @@ const Meeting: React.FC = () => {
         const footerListTemplate = [...footerList]
         footerListTemplate[footerListIndex.itemIndex][footerListIndex.rowIndex].title = '停止共享'
         setIsSharedScreenModal(false)
-        window.agora.setDesktopCapturerVideo(sharedScreenItem)
+        agora.setDesktopCapturerVideo(sharedScreenItem)
-        setVideoID(window.agora.getVideoId())
+        setVideoID(agora.getVideoId())
       } else {
         message.error('请选择应用!')
       }
@@ -222,7 +223,7 @@ const Meeting: React.FC = () => {
   }
 
   const getDesktopCapturerVideo = (): void => {
-    window.agora.getDesktopCapturerVideo().then((res: any) => {
+    agora.getDesktopCapturerVideo().then((res: any) => {
       if (sharedScreenList.length !== res.length) {
         res.forEach((item: any) => {
           if (item.thumbImage.buffer) {
@@ -238,7 +239,7 @@ const Meeting: React.FC = () => {
   };
 
   const getAudioMediaList = (): void => {
-    const { currentDevices, currentDevice, currentVolume } = window.agora.getAudioMediaList();
+    const { currentDevices, currentDevice, currentVolume } = agora.getAudioMediaList();
     setAudioDeviceManager({
       currentDevices: currentDevices.map((row: any) => {
         return {
@@ -404,13 +405,13 @@ const Meeting: React.FC = () => {
                           content={
                             <div className='meetingContentFooterPopover'>
                               <div onClick={() => {
-                                window.agora.leaveChannel()
+                                agora.leaveChannel()
-                                window.agora.stopScreenCapture()
+                                agora.stopScreenCapture()
                                 navigate(-1)
                               }}>全员结束会议</div>
                               <div onClick={() => {
-                                window.agora.leaveChannel()
+                                agora.leaveChannel()
-                                window.agora.stopScreenCapture()
+                                agora.stopScreenCapture()
                                 navigate(-1)
                               }}>仅自己离开</div>
                               <div onClick={() => { setOpen(false) }}>取消</div>
@@ -481,7 +482,7 @@ const Meeting: React.FC = () => {
                       ...audioDeviceManager,
                       currentDevice: e
                     })
-                    window.agora.setRecordingDevice(e);
+                    agora.setRecordingDevice(e);
                     getAudioMediaList()
                   }} />;
                 <audio src="" id='startAudio'></audio>
@@ -493,7 +494,7 @@ const Meeting: React.FC = () => {
                     ...audioDeviceManager,
                     currentVolume: e
                   })
-                  window.agora.setRecordingDeviceVolume(e)
+                  agora.setRecordingDeviceVolume(e)
                 }} style={{ flexGrow: 1 }} />
               </div> :
                 <div>
@@ -530,7 +531,7 @@ const Meeting: React.FC = () => {
                   audio.srcObject = null;
                 }
                 setStepsStatus(false)
-                window.agora.startPreview().then((res: boolean) => {
+                agora.startPreview().then((res: boolean) => {
                   setIsVideoLoad(res)
                 })
               }}>下一步</Button>
@@ -542,9 +543,9 @@ const Meeting: React.FC = () => {
                   onClick={() => {
                     if (isVideoLoad) {
                       setIsVideoLoad(false)
-                      window.agora.stopAudioDeviceLoopbackTest()
+                      agora.stopAudioDeviceLoopbackTest()
                       setStepsStatus(true)
-                      window.agora.startRecordingDeviceTest(200)
+                      agora.startRecordingDeviceTest(200)
                     } else {
                       message.error('视频加载中！')
                     }
@@ -555,8 +556,8 @@ const Meeting: React.FC = () => {
                   className='m-ant-btn'
                   onClick={() => {
                     if (isVideoLoad) {
-                      window.agora.stopAudioDeviceLoopbackTest()
+                      agora.stopAudioDeviceLoopbackTest()
-                      window.agora.setRecordingDeviceVolume(audioDeviceManager.currentVolume)
+                      agora.setRecordingDeviceVolume(audioDeviceManager.currentVolume)
                       setIsStupWizard(false)
                       setStepsStatus(true)
                       setIsVideoLoad(false)

src/utils/package/agora.ts

@@ -11,7 +11,7 @@ const {
 } = require("agora-electron-sdk");
 const { message } = require('antd');
 const rtcEngine = createAgoraRtcEngine();
-const option = {
+const option: any = {
   appId: 'dcfc466a6ecb4a1f972630065dfb1e75',
   token: '',
   channelId: '',
@@ -23,7 +23,7 @@ rtcEngine.initialize({
 
 rtcEngine.registerEventHandler({
   // 监听本地用户加入频道事件
-  onJoinChannelSuccess: ({ channelId, localUid }, elapsed) => {
+  onJoinChannelSuccess: ({ channelId, localUid }: any, elapsed: any) => {
     console.log({ channelId, localUid }, elapsed, '加入房间');
     // 本地用户加入频道后，设置本地视频窗口
     rtcEngine.setupLocalVideo({
@@ -31,61 +31,64 @@ rtcEngine.registerEventHandler({
       // sourceType: VideoSourceType.VideoSourceScreen,
       sourceType: VideoSourceType.VideoSourceCameraPrimary,
       uid: localUid,
-      view: getDom(),
+      view: agora.getDom(),
       setupMode: VideoViewSetupMode.VideoViewSetupAdd,
     });
   },
   // 监听远端用户加入频道事件
-  onUserJoined: ({ channelId, localUid }, remoteUid, elapsed) => {
+  onUserJoined: ({ channelId, localUid }: any, remoteUid: any, elapsed: any) => {
+    console.log({ channelId, localUid }, remoteUid, '远端加入频道');
     // 远端用户加入频道后，设置远端视频窗口
     rtcEngine.setupRemoteVideo(
       {
         renderMode: RenderModeType.RenderModeFit,
         sourceType: VideoSourceType.VideoSourceRemote,
         uid: remoteUid,
-        view: getDom(),
+        view: agora.getDom(),
         setupMode: VideoViewSetupMode.VideoViewSetupAdd,
       },
       { channelId },
     );
 
   },
-  // 视频发布状态改变回调
-  onVideoPublishStateChanged: (source, channel, oldState, newState, elapseSinceLastState) => {
-    if (newState === 1) {
-
-    }
-  },
-  // 音频发布状态改变回调
-  onAudioPublishStateChanged: (channel, oldState, newState, elapseSinceLastState) => {
-    if (newState === 1) {
-
-    }
-  },
   // 监听用户离开频道事件
-  onUserOffline: ({ channelId, localUid }, remoteUid, reason) => {
+  onUserOffline: ({ channelId, localUid }: any, remoteUid: any, reason: any) => {
     // 远端用户离开频道后，关闭远端视频窗口
+    console.log({ channelId, localUid }, remoteUid, '离开频道');
     rtcEngine.setupRemoteVideo(
       {
         renderMode: RenderModeType.RenderModeFit,
         sourceType: VideoSourceType.VideoSourceRemote,
         uid: remoteUid,
-        view: getDom(),
+        view: agora.getDom(),
         setupMode: VideoViewSetupMode.VideoViewSetupRemove,
       },
     );
   },
+  // 视频发布状态改变回调
+  onVideoPublishStateChanged: (source: any, channel: any, oldState: any, newState: any, elapseSinceLastState: any) => {
+    if (newState === 1) {
+
+    }
+  },
+  // 音频发布状态改变回调
+  onAudioPublishStateChanged: (channel: any, oldState: any, newState: any, elapseSinceLastState: any) => {
+    if (newState === 1) {
+
+    }
+  },
   // 用户音量提示回调。
-  onAudioVolumeIndication: (connection, speakers, speakerNumber, totalVolume) => {
+  onAudioVolumeIndication: (connection: any, speakers: any, speakerNumber: any, totalVolume: any,) => {
     const percentage = (totalVolume / 255) * 100
-    if (document.getElementById('recordingDeviceTest')) {
+    const dom = document.getElementById('recordingDeviceTest') as any;
-      document.getElementById('recordingDeviceTest').style.width = `${percentage}%`
+    if (dom) {
+      dom.style.width = `${percentage}%`
     }
   }
 });
 
-let videoID = '';
+let videoID: string = '';
-let iMediaRecorder = '';
+let iMediaRecorder: any = '';
 
 const agora = {
   getDom: () => {
@@ -100,7 +103,7 @@ const agora = {
     })
   },
   // 加入频道
-  joinChannel: (bool) => {
+  joinChannel: (bool: boolean) => {
     if (bool) {
       rtcEngine.joinChannel(option.token, option.channelId, option.userid, {
         channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting, //设置频道场景为直播场景
@@ -137,11 +140,11 @@ const agora = {
     })
     iMediaRecorder.setMediaRecorderObserver({
       // 录制状态发生改变回调。
-      onRecorderStateChanged: (channelId, uid, state, reason) => {
+      onRecorderStateChanged: (channelId: any, uid: any, state: any, reason: any) => {
         console.log(channelId, uid, state, reason, '录制状态发生改变回调。');
       },
       // 录制信息更新回调。
-      onRecorderInfoUpdated: (channelId, uid, info) => {
+      onRecorderInfoUpdated: (channelId: any, uid: any, info: any) => {
         console.log(channelId, uid, info, '录制信息更新回调。');
       },
     })
@@ -157,13 +160,13 @@ const agora = {
     rtcEngine.stopScreenCapture();
   },
   // 开启本地视频预览
-  startPreview: async () => {
+  startPreview: async (): Promise<boolean> => {
     return new Promise((resolve, reject) => {
       navigator.mediaDevices.getUserMedia({
         video: true,
         audio: true,
       }).then((stream) => {
-        let dom = document.getElementById('startPreview');
+        let dom = document.getElementById('startPreview') as any;
         dom.srcObject = stream;
         dom.play()
         resolve(true)
@@ -177,29 +180,29 @@ const agora = {
   stopAudioDeviceLoopbackTest: () => {
     rtcEngine.getAudioDeviceManager().stopAudioDeviceLoopbackTest()
     rtcEngine.getAudioDeviceManager().stopRecordingDeviceTest()
-    let video = document.getElementById('startPreview');
+    let video = document.getElementById('startPreview') as any;
     if (video.srcObject) {
       const tracks = video.srcObject.getTracks();
-      tracks.forEach((track) => {
+      tracks.forEach((track: any) => {
         track.stop();
       });
       video.srcObject = null;
     }
-    let audio = document.getElementById('startAudio');
+    let audio = document.getElementById('startAudio') as any;
     if (audio.srcObject) {
       const tracks = audio.srcObject.getTracks();
-      tracks.forEach((track) => {
+      tracks.forEach((track: any) => {
         track.stop();
       });
       audio.srcObject = null;
     }
   },
   // 启动音频采集设备测试
-  startRecordingDeviceTest: (indicationInterval) => {
+  startRecordingDeviceTest: (indicationInterval: number) => {
     rtcEngine.getAudioDeviceManager().startRecordingDeviceTest(indicationInterval)
     navigator.mediaDevices.getUserMedia({ audio: true })
       .then((stream) => {
-        let dom = document.getElementById('startAudio');
+        let dom = document.getElementById('startAudio') as any;
         dom.srcObject = stream;
         dom.play()
       })
@@ -216,11 +219,11 @@ const agora = {
     }
   },
   // 设置音频设备音量
-  setRecordingDeviceVolume: (volume) => {
+  setRecordingDeviceVolume: (volume: number) => {
     rtcEngine.getAudioDeviceManager().setRecordingDeviceVolume(volume)
   },
   // 设置音频采集设备
-  setRecordingDevice: (deviceId) => {
+  setRecordingDevice: (deviceId: string) => {
     rtcEngine.getAudioDeviceManager().setRecordingDevice(deviceId)
   },
   // 摄像头采集
@@ -229,27 +232,19 @@ const agora = {
     // joinChannel(false)
   },
   // 加入频道
-  setJoinChannel: (data) => {
+  setJoinChannel: (data: any) => {
     option.token = data.token;
     option.channelId = data.channelId;
     option.userid = Number(data.userid);
     rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {})
     // joinChannel(false)
   },
-  // 离开频道
-  leaveChannel: () => {
-    // leaveChannel()
-  },
-  // 停止共享屏幕
-  stopScreenCapture: () => {
-    // stopScreenCapture()
-  },
   // 取消或恢复发布本地音频流
-  muteLocalAudioStream: (mute) => {
+  muteLocalAudioStream: (mute: any) => {
     rtcEngine.muteLocalAudioStream(mute)
   },
   // 取消或恢复发布本地视频流
-  muteLocalVideoStream: (mute) => {
+  muteLocalVideoStream: (mute: any) => {
     rtcEngine.muteLocalVideoStream(mute)
   },
   // 获取当前生成的视频id
@@ -262,7 +257,7 @@ const agora = {
   },
 
   // 共享屏幕采集
-  setDesktopCapturerVideo: (targetSource) => {
+  setDesktopCapturerVideo: (targetSource: any) => {
     // stopScreenCapture()
     if (
       targetSource.type ===
@@ -292,4 +287,4 @@ const agora = {
   },
 }
 
-window.agora = agora;
+export default agora;