marking
/
WGShare.Client.Electron
18
0
Fork 0
Code Pull Requests 1 Actions Releases 4 Activity

防止录制重复点击

This commit is contained in:
yj 2024-12-17 15:08:20 +08:00
parent 3df6dc6add
commit d867305ca4
1 changed files with 72 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/page/Meeting/index.tsx
View File

@ -42,6 +42,7 @@ const Meeting: React.FC = () => {
const singInRef = useRef<any>();
const userNameRef = useRef<any>();
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()