electron录制工具-desktopCapturer录屏

需求

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

效果如下

electron-录屏演示

实现

计时器

创建一个浮窗,根据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) return
			setDuration(formatSecondsToHMS((new Date().getTime() - recordRef.current.startTime) / 1000))
			requestAnimationFrame(updateDuration)
		}

录屏

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

// main.js
		desktopCapturer.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.js

const 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 = true
						updateDuration()
				}
				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 = false
						window.ipcRenderer.send('stop_record_render', url)
				};
				mediaRecorder.onerror = (event) => {
					console.error("MediaRecorder error:", event);
				};
				mediaRecorder.start();

跳转视频编辑页面

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

注:录屏也可以使用ffmpeg

代码

相关推荐
待磨的钝刨41 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨8 小时前
VUE+Vite之环境文件配置及使用环境变量
前端