diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 67b412f..9fb6f3b 100644 --- a/src/page/Meeting/index.tsx +++ b/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([]) const [chatList, setChatList] = useState([]) const [currentVideoId, setCurrentVideoId] = useState('') + let [currentSeconds, setCurrentSeconds] = useState(0) + const [currentEffective, setCurrentEffective] = useState(0) const [list] = useState([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 => { const footerListTemplate = [...footerList] @@ -328,12 +350,12 @@ const Meeting: React.FC = () => {
- - - - + {currentEffective >= 1 ? : null} + {currentEffective >= 2 ? : null} + {currentEffective >= 3 ? : null} + {currentEffective >= 4 ? : null}
-
00:13:45
+
{changeCurrentSeconds()}
会议号：{state.channelId}
diff --git a/src/utils/package/agora.ts b/src/utils/package/agora.ts index 074056e..a539a55 100644 --- a/src/utils/package/agora.ts +++ b/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 => { return new Promise((resolve, reject) => { @@ -262,59 +293,34 @@ const agora = { setPlaybackDevice: (deviceId: string) => { rtcEngine.getAudioDeviceManager().setPlaybackDevice(deviceId) }, - // 摄像头采集 - setCameraCapture: () => { - rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {}) - agora.joinChannel(false) + // 停止录制音视频 + stopRecording: () => { + iMediaRecorder.stopRecording() + rtcEngine.destroyMediaRecorder(iMediaRecorder) + iMediaRecorder = "" }, - // 加入频道 - setJoinChannel: (data: any) => { - option.token = data.token; - option.channelId = data.channelId; - option.userid = Number(data.userid); - rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {}) - agora.joinChannel(false) - }, - // 取消或恢复发布本地音频流 - muteLocalAudioStream: (mute: any) => { - rtcEngine.muteLocalAudioStream(mute) - }, - // 取消或恢复发布本地视频流 - muteLocalVideoStream: (mute: any) => { - rtcEngine.muteLocalVideoStream(mute) - }, - // 桌面捕获音频和视频的媒体源的信息 - getDesktopCapturerVideo: async () => { - return rtcEngine.getScreenCaptureSources({ width: 300, height: 300 }, { width: 300, height: 300 }, true); - }, - // 共享屏幕采集 - 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) + // 开始录制音视频 + 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 + }) }, }