关闭视频测试

src/page/Meeting/index.tsx

@@ -12,6 +12,9 @@ import ImageUrl from '@/utils/package/imageUrl'
 import agora from '@/utils/package/agora'
 import StupWizard from '@/components/StupWizard';
 import { onInvoke, onSignalr } from '@/utils/package/signalr';
+import dayjs from 'dayjs';
+import durationPlugin from 'dayjs/plugin/duration';
+dayjs.extend(durationPlugin);
 const { Column } = Table
 const Meeting: React.FC = () => {
   const navigate = useNavigate();
@@ -105,10 +108,13 @@ const Meeting: React.FC = () => {
   const [roomUserList, setRoomUserList] = useState<any>([])
   const [chatList, setChatList] = useState<any>([])
   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()
@@ -120,11 +126,19 @@ const Meeting: React.FC = () => {
       setUser(userInfo)
       setIsInit(false)
       window.addEventListener('customStorageChange', handleCustomStorageChange);
+      time = setInterval(() => {
+        let effectiveTypeLength = ['slow-2g', '2g', '3g', '4g'].indexOf((navigator as any).connection.effectiveType)
+        if (effectiveTypeLength >= 0) {
+          setCurrentEffective(effectiveTypeLength + 1)
+        }
+        setCurrentSeconds(currentSeconds++)
+      }, 1000)
     } else {
       getRoomFile()
     }
     return () => {
       window.removeEventListener('customStorageChange', handleCustomStorageChange);
+      clearInterval(time)
     };
   }, [fileList.pageIndex]);
 
@@ -149,9 +163,17 @@ const Meeting: React.FC = () => {
   }, [])
 
   useEffect(() => {
-
+    console.log(currentVideoId);
-
   }, [currentVideoId])
+
+  // 加入房间时间
+  const changeCurrentSeconds = () => {
+    const duration = dayjs.duration(currentSeconds, 'seconds');
+    const hours = duration.hours(); // 整数小时
+    const minutes = duration.minutes(); // 整数分钟
+    const secondsRemaining = duration.seconds(); // 剩余的秒数
+    return `${hours > 9 ? hours : '0' + hours}:${minutes > 9 ? minutes : '0' + minutes}:${secondsRemaining > 9 ? secondsRemaining : '0' + secondsRemaining}`
+  }
   // 操作按钮
   const changeStatusList = async (row: any, itemIndex: number, rowIndex: number): Promise<void> => {
     const footerListTemplate = [...footerList]
@@ -328,12 +350,12 @@ const Meeting: React.FC = () => {
         <div className={styles.meetingHeader}>
           <div>
             <div>
-              <span></span>
+              {currentEffective >= 1 ? <span></span> : null}
-              <span></span>
+              {currentEffective >= 2 ? <span></span> : null}
-              <span></span>
+              {currentEffective >= 3 ? <span></span> : null}
-              <span></span>
+              {currentEffective >= 4 ? <span></span> : null}
             </div>
-            <div>00:13:45</div>
+            <div>{changeCurrentSeconds()}</div>
           </div>
           <div>会议号：{state.channelId}</div>
           <div className='drag'>

src/utils/package/agora.ts

@@ -76,8 +76,8 @@ const agora = {
   setupLocalVideo: (item: any) => {
     rtcEngine.setupLocalVideo({
       renderMode: RenderModeType.RenderModeFit,
-      // sourceType: VideoSourceType.VideoSourceScreen,
       sourceType: VideoSourceType.VideoSourceCameraPrimary,
+      // sourceType: option.isCamera ? VideoSourceType.VideoSourceCameraPrimary : VideoSourceType.VideoSourceScreen,
       uid: item.account,
       view: item.view,
       setupMode: VideoViewSetupMode.VideoViewSetupAdd,
@@ -138,39 +138,70 @@ const agora = {
       });
     }
   },
-  // 停止录制音视频
-  stopRecording: () => {
-    iMediaRecorder.stopRecording()
-    rtcEngine.destroyMediaRecorder(iMediaRecorder)
-    iMediaRecorder = ""
-  },
-  // 开始录制音视频
-  startRecording: () => {
-    iMediaRecorder = rtcEngine.createMediaRecorder({
-      channelId: option.channelId,
-      uid: 123,
-    })
-    iMediaRecorder.setMediaRecorderObserver({
-      // 录制状态发生改变回调。
-      onRecorderStateChanged: (channelId: any, uid: any, state: any, reason: any) => {
-        console.log(channelId, uid, state, reason, '录制状态发生改变回调。');
-      },
-      // 录制信息更新回调。
-      onRecorderInfoUpdated: (channelId: any, uid: any, info: any) => {
-        console.log(channelId, uid, info, '录制信息更新回调。');
-      },
-    })
-    iMediaRecorder.startRecording({
-      storagePath: `D:/word/${+new Date()}.mp4`, //录音文件在本地保存的绝对路径，需精确到文件名及格式
-      containerFormat: MediaRecorderContainerFormat.FormatMp4, //录制文件的格式
-      streamType: MediaRecorderStreamType.StreamTypeBoth, //录制内容
-      maxDurationMs: 7200000, //maxDurationMs
-    })
-  },
   // 停止共享屏幕
   stopScreenCapture: () => {
     rtcEngine.stopScreenCapture();
   },
+  // 取消或恢复发布本地音频流
+  muteLocalAudioStream: (mute: any) => {
+    rtcEngine.muteLocalAudioStream(mute)
+  },
+  // 取消或恢复发布本地视频流
+  muteLocalVideoStream: (mute: any) => {
+    rtcEngine.muteLocalVideoStream(mute)
+  },
+  // 摄像头采集
+  setCameraCapture: () => {
+    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)
+  },
+  // 桌面捕获音频和视频的媒体源的信息
+  getDesktopCapturerVideo: async () => {
+    return rtcEngine.getScreenCaptureSources({ width: 300, height: 300 }, { width: 300, height: 300 }, true);
+  },
+  // 共享屏幕采集
+  setDesktopCapturerVideo: (targetSource: any) => {
+    // rtcEngine.stopCameraCapture(VideoSourceType.VideoSourceCamera);
+    agora.stopScreenCapture();
+    if (
+      targetSource.type ===
+      ScreenCaptureSourceType.ScreencapturesourcetypeScreen
+    ) {
+      rtcEngine.startScreenCaptureByDisplayId(
+        targetSource.sourceId,
+        {},
+        {
+          windowFocus: true,
+          enableHighLight: true,
+          highLightColor: 0xFF99CC00,
+        }
+      );
+    } else {
+      rtcEngine.startScreenCaptureByWindowId(
+        targetSource.sourceId,
+        {},
+        {
+          windowFocus: true,
+          enableHighLight: true,
+          highLightColor: 0xFF99CC00,
+        }
+      );
+    }
+  },
+
+
+
+
+
+
   // 开启本地视频预览
   startPreview: async (): Promise<boolean> => {
     return new Promise((resolve, reject) => {
@@ -262,59 +293,34 @@ const agora = {
   setPlaybackDevice: (deviceId: string) => {
     rtcEngine.getAudioDeviceManager().setPlaybackDevice(deviceId)
   },
-  // 摄像头采集
+  // 停止录制音视频
-  setCameraCapture: () => {
+  stopRecording: () => {
-    rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {})
+    iMediaRecorder.stopRecording()
-    agora.joinChannel(false)
+    rtcEngine.destroyMediaRecorder(iMediaRecorder)
+    iMediaRecorder = ""
   },
-  // 加入频道
+  // 开始录制音视频
-  setJoinChannel: (data: any) => {
+  startRecording: () => {
-    option.token = data.token;
+    iMediaRecorder = rtcEngine.createMediaRecorder({
-    option.channelId = data.channelId;
+      channelId: option.channelId,
-    option.userid = Number(data.userid);
+      uid: 123,
-    rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {})
+    })
-    agora.joinChannel(false)
+    iMediaRecorder.setMediaRecorderObserver({
-  },
+      // 录制状态发生改变回调。
-  // 取消或恢复发布本地音频流
+      onRecorderStateChanged: (channelId: any, uid: any, state: any, reason: any) => {
-  muteLocalAudioStream: (mute: any) => {
+        console.log(channelId, uid, state, reason, '录制状态发生改变回调。');
-    rtcEngine.muteLocalAudioStream(mute)
+      },
-  },
+      // 录制信息更新回调。
-  // 取消或恢复发布本地视频流
+      onRecorderInfoUpdated: (channelId: any, uid: any, info: any) => {
-  muteLocalVideoStream: (mute: any) => {
+        console.log(channelId, uid, info, '录制信息更新回调。');
-    rtcEngine.muteLocalVideoStream(mute)
+      },
-  },
+    })
-  // 桌面捕获音频和视频的媒体源的信息
+    iMediaRecorder.startRecording({
-  getDesktopCapturerVideo: async () => {
+      storagePath: `D:/word/${+new Date()}.mp4`, //录音文件在本地保存的绝对路径，需精确到文件名及格式
-    return rtcEngine.getScreenCaptureSources({ width: 300, height: 300 }, { width: 300, height: 300 }, true);
+      containerFormat: MediaRecorderContainerFormat.FormatMp4, //录制文件的格式
-  },
+      streamType: MediaRecorderStreamType.StreamTypeBoth, //录制内容
-  // 共享屏幕采集
+      maxDurationMs: 7200000, //maxDurationMs
-  setDesktopCapturerVideo: (targetSource: any) => {
+    })
-    agora.stopScreenCapture()
-    if (
-      targetSource.type ===
-      ScreenCaptureSourceType.ScreencapturesourcetypeScreen
-    ) {
-      rtcEngine.startScreenCaptureByDisplayId(
-        targetSource.sourceId,
-        {},
-        {
-          windowFocus: true,
-          enableHighLight: true,
-          highLightColor: 0xFF99CC00,
-        }
-      );
-    } else {
-      rtcEngine.startScreenCaptureByWindowId(
-        targetSource.sourceId,
-        {},
-        {
-          windowFocus: true,
-          enableHighLight: true,
-          highLightColor: 0xFF99CC00,
-        }
-      );
-    }
-    agora.joinChannel(true)
   },
 }