From d867305ca4a161f75794e24944f42694ff7b1ee6 Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Tue, 17 Dec 2024 15:08:20 +0800 Subject: [PATCH] =?UTF-8?q?=E9=98=B2=E6=AD=A2=E5=BD=95=E5=88=B6=E9=87=8D?= =?UTF-8?q?=E5=A4=8D=E7=82=B9=E5=87=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/Meeting/index.tsx | 122 ++++++++++++++++++++++--------------- 1 file changed, 72 insertions(+), 50 deletions(-) diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 5ff2e42..ccf0a00 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -42,6 +42,7 @@ const Meeting: React.FC = () => { const singInRef = useRef(); const userNameRef = useRef(); const [isClicked, setIsClicked] = useState(false); + const [isClickedMediaSteam, setIsClickedMediaSteam] = useState(false); const [statusList, setStatusList] = useState({ userList: false, userChatList: false, @@ -433,7 +434,7 @@ const Meeting: React.FC = () => { setTimeout(async () => { const setting = await JSON.parse(storage.getItem('setting') as string); const stateInfo = await JSON.parse(storage.getItem('stateInfo') as string); - if (stateInfo && setting.isRecordingTips) { + if (stateInfo && setting.isRecordingTips && location.href.indexOf('/meeting') !== -1) { setRecorder((data: any) => { if (!data) { setIsScreenCapture(bool => { @@ -918,6 +919,18 @@ const Meeting: React.FC = () => { return () => clearTimeout(timer); }, [isClicked]); + useEffect(() => { + let timer: NodeJS.Timeout; + + if (isClickedMediaSteam) { + timer = setTimeout(() => { + setIsClickedMediaSteam(false) + }, 3000); + } + + return () => clearTimeout(timer); + }, [isClickedMediaSteam]); + useEffect(() => { const elements = document.querySelectorAll('.intersectionObserver-view'); if (elements.length && currentVideoId) { @@ -1521,52 +1534,57 @@ const Meeting: React.FC = () => { case '录制': const setting = await JSON.parse(storage.getItem('setting') as string); try { - await fs.access(setting.recordingFilesPath, fs.constants.F_OK); - footerListTemplate[itemIndex][rowIndex].title = '录制中'; - footerListTemplate[itemIndex][rowIndex].active = true; - setFooterList(footerListTemplate); - window.electron.getSources().then(async (sources: any) => { - const screenId = sources[0].id; - const stream = await navigator.mediaDevices.getUserMedia({ - audio: { - mandatory: { - chromeMediaSource: 'desktop', - chromeMediaSourceId: screenId, - } - } as any, - video: { - mandatory: { - chromeMediaSource: 'desktop', - chromeMediaSourceId: screenId, - } - } as any + if (!isClickedMediaSteam) { + setIsClickedMediaSteam(true) + await fs.access(setting.recordingFilesPath, fs.constants.F_OK); + footerListTemplate[itemIndex][rowIndex].title = '录制中'; + footerListTemplate[itemIndex][rowIndex].active = true; + setFooterList(footerListTemplate); + window.electron.getSources().then(async (sources: any) => { + const screenId = sources[0].id; + const stream = await navigator.mediaDevices.getUserMedia({ + audio: { + mandatory: { + chromeMediaSource: 'desktop', + chromeMediaSourceId: screenId, + } + } as any, + video: { + mandatory: { + chromeMediaSource: 'desktop', + chromeMediaSourceId: screenId, + } + } as any + }); + // 获取所有音频输入设备 + const devices = await navigator.mediaDevices.enumerateDevices(); + const audioInputDevices = devices.filter(device => device.kind === 'audioinput' && + device.deviceId !== 'default' && + device.deviceId !== 'communications'); + // 使用Web Audio API来捕获系统声音和麦克风声音，将它们合并到同一个MediaStream中。 + const audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)(); + const systemSoundSource = audioCtx.createMediaStreamSource(stream); + const systemSoundDestination = audioCtx.createMediaStreamDestination(); + systemSoundSource.connect(systemSoundDestination); + // 录制所有音频输入设备 + audioInputDevices.forEach(async device => { + const micStream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId: { exact: device.deviceId } } }); + setMediaStream((res: any) => [...res, micStream]); + const micSoundSource = audioCtx.createMediaStreamSource(micStream); + micSoundSource.connect(systemSoundDestination); + }) + // 合并音频流与视频流 + const combinedSource = new MediaStream([...stream.getVideoTracks(), ...systemSoundDestination.stream.getAudioTracks()]); + // 开始录制 + const mediaRecorder = new MediaRecorder(combinedSource, { + mimeType: 'video/webm;codecs=vp9,opus', + videoBitsPerSecond: 1.5e6, + }); + setRecorder(mediaRecorder); }); - // 获取所有音频输入设备 - const devices = await navigator.mediaDevices.enumerateDevices(); - const audioInputDevices = devices.filter(device => device.kind === 'audioinput' && - device.deviceId !== 'default' && - device.deviceId !== 'communications'); - // 使用Web Audio API来捕获系统声音和麦克风声音，将它们合并到同一个MediaStream中。 - const audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)(); - const systemSoundSource = audioCtx.createMediaStreamSource(stream); - const systemSoundDestination = audioCtx.createMediaStreamDestination(); - systemSoundSource.connect(systemSoundDestination); - // 录制所有音频输入设备 - audioInputDevices.forEach(async device => { - const micStream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId: { exact: device.deviceId } } }); - setMediaStream((res: any) => [...res, micStream]); - const micSoundSource = audioCtx.createMediaStreamSource(micStream); - micSoundSource.connect(systemSoundDestination); - }) - // 合并音频流与视频流 - const combinedSource = new MediaStream([...stream.getVideoTracks(), ...systemSoundDestination.stream.getAudioTracks()]); - // 开始录制 - const mediaRecorder = new MediaRecorder(combinedSource, { - mimeType: 'video/webm;codecs=vp9,opus', - videoBitsPerSecond: 1.5e6, - }); - setRecorder(mediaRecorder); - }); + } else { + message.error('录制太频繁了，请稍后重试！'); + } } catch (error: any) { if (error.code === 'ENOENT') { message.error({ @@ -1582,10 +1600,14 @@ const Meeting: React.FC = () => { break; case '录制中': - footerListTemplate[itemIndex][rowIndex].title = '录制' - footerListTemplate[itemIndex][rowIndex].active = false - setFooterList(footerListTemplate) - stopRecorderMedia() + if (isClickedMediaSteam) { + message.error('录制时长不足3秒，请稍后重试！'); + } else { + footerListTemplate[itemIndex][rowIndex].title = '录制' + footerListTemplate[itemIndex][rowIndex].active = false + setFooterList(footerListTemplate) + stopRecorderMedia() + } break; case '共享文件': sharedFilesModelRef.current.getData()