electron录制工具-desktopCapturer录屏

需求

录屏状态时，屏幕底部有个计时器，点击计时器停止录屏，跳转录屏结束的视频播放。

效果如下

实现

计时器

创建一个浮窗，根据x、y坐标移动窗口的位置；

// 获取屏幕的主显示器信息const { width, height } = screen.getPrimaryDisplay().workAreaSize;// 设置窗口的宽度和高度const windowWidth = 120;const windowHeight = 120;// app.commandLine.appendSwitch('disable-features', 'IOSurfaceCapturer,DesktopCaptureMacV2')recordWin = new BrowserWindow({width: windowWidth,height: windowHeight,x: width / 2 - windowWidth / 2,y: height - windowHeight,frame: true, // 无边框transparent: true, // 透明窗口alwaysOnTop: true, // 窗口总是显示在最前面webPreferences: {preload: path.join(__dirname, 'preload.mjs'),},})

为了时间准确，使用时间戳计算录屏时长。

const updateDuration = () => {if (!recordRef.current.status) returnsetDuration(formatSecondsToHMS((new Date().getTime() - recordRef.current.startTime) / 1000))requestAnimationFrame(updateDuration)}

录屏

electron提供了desktopCapturer 共享屏幕接口，渲染进程通过 navigator.mediaDevices.getUserMedia 与 MediaRecorder 结合获取录制屏幕的blob

// main.jsdesktopCapturer.getSources({ types: ['screen'] }).then(() => {recordWin?.webContents.send('start_record_main', 'screen:1:0')// 可以选择不同的窗口// for (const source of sources) {// 	if (source.name === 'Electron') {// 		maskWin?.webContents.send('SET_SOURCE', source.id)// 		return// 	}// }})

// render.jsconst mediaStream = await navigator.mediaDevices.getUserMedia({audio: false,video: {mandatory: {chromeMediaSource: 'desktop',chromeMediaSourceId: sourceId,}}})const options = { mimeType: 'video/webm; codecs=vp9' }; const mediaRecorder = new MediaRecorder(mediaStream, options);mediaRecorder.onstart = () => {recordRef.current.recordedChunks = [];recordRef.current.status = trueupdateDuration()}mediaRecorder.ondataavailable = function (event) {if (event.data.size > 0) {recordRef.current.recordedChunks.push(event.data);}};mediaRecorder.onstop = async () => {const blob = new Blob(recordRef.current.recordedChunks, { type: 'video/webm' });const url = URL.createObjectURL(blob);// downloadVideo(url);recordRef.current.recordedChunks = [];recordRef.current.status = falsewindow.ipcRenderer.send('stop_record_render', url)};mediaRecorder.onerror = (event) => {console.error("MediaRecorder error:", event);};mediaRecorder.start();

跳转视频编辑页面

	window.ipcRenderer.send('stop_record_render', url)

注：录屏也可以使用ffmpeg

代码