1. Electron/Chromium屏幕录制技术方案选型在桌面端实现屏幕录制功能时Electron和Chromium提供了多种技术路线。根据我的项目经验主要存在三种典型方案1.1 WebRTC API方案Chromium内核原生支持的WebRTC API是最直接的方案。通过getDisplayMedia()方法可以获取屏幕流const stream await navigator.mediaDevices.getDisplayMedia({ video: { cursor: always, displaySurface: monitor }, audio: false });优势零依赖纯浏览器API实现支持系统级权限管理自动处理多显示器场景局限无法录制最小化窗口帧率受浏览器限制通常≤30fps无法录制DRM保护内容实测发现在Windows平台使用NVIDIA显卡时启用硬件加速会导致录制画面撕裂。需在chrome://flags中关闭Override software rendering list1.2 rrweb方案rrweb通过DOM序列化实现录制特别适合Web应用操作回放import { record } from rrweb; let events []; record({ emit(event) { events.push(event); }, });适用场景需要记录用户交互行为对录制文件大小敏感需要跨设备回放性能优化点使用sampling配置降低事件采样率启用blockClass过滤敏感元素配合canvas插件录制Canvas内容1.3 FFmpeg Electron方案在Electron主进程调用FFmpeg可实现更底层的录制控制const ffmpeg require(fluent-ffmpeg); const { desktopCapturer } require(electron); desktopCapturer.getSources({ types: [window, screen] }).then(sources { ffmpeg() .input(sources[0].id) .outputOptions(-c:v libx264, -preset ultrafast) .save(recording.mp4); });进阶配置使用-framerate 60提升帧率添加-pix_fmt yuv420p确保兼容性通过-threads 4启用多线程编码2. 多显示器录制难题破解2.1 显示器识别与选择Chromium的chrome.system.displayAPI可获取显示器信息chrome.system.display.getInfo(displays { displays.forEach(display { console.log(显示器 ${display.id}: ${display.bounds.width}x${display.bounds.height}); }); });常见问题主显示器ID在不同会话间可能变化缩放比例影响坐标计算需使用bounds而非workArea2.2 跨显示器录制方案方案一拼接录制区域const { width, height } require(electron).screen.getPrimaryDisplay().workAreaSize; const recorder new VideoRecorder({ x: 0, y: 0, width: width * 2, // 假设双屏等宽排列 height });方案二多实例独立录制# 启动多个Electron实例分别录制 electron recorder.js --display1 electron recorder.js --display2实测建议NVIDIA显卡用户需关闭多显示器优化设置否则可能导致帧率减半3. 性能优化实战记录3.1 内存控制技巧WebRTC内存泄漏排查// 必须手动释放MediaStream stream.getTracks().forEach(track track.stop());Electron进程管理启用webPreferences: { sandbox: true }隔离渲染进程使用--disable-gpu参数避免GPU内存泄漏3.2 编码参数调优x264推荐配置-preset ultrafast -tune zerolatency -crf 28 -g 60 -keyint_min 60硬件加速方案对比技术WindowsmacOSLinuxNVENC✅❌✅QuickSync✅❌❌VAAPI❌❌✅VideoToolbox❌✅❌4. 典型问题排查手册4.1 黑屏问题排查流程检查系统权限特别是macOS需要屏幕录制权限验证desktopCapturer是否返回有效源尝试禁用硬件加速app.commandLine.appendSwitch(disable-gpu);检查显卡驱动兼容性4.2 音频同步问题解决方案// 手动同步音视频时间戳 const audioContext new AudioContext(); const videoStream await navigator.mediaDevices.getDisplayMedia(); const audioStream await navigator.mediaDevices.getUserMedia(); const combinedStream new MediaStream([ ...videoStream.getVideoTracks(), ...audioStream.getAudioTracks() ]);5. 工程化实践建议5.1 模块化设计推荐录制模块架构recorder-core/ ├── capture/ # 采集模块 │ ├── webrtc.js │ ├── ffmpeg.js │ └── rrweb.js ├── encoder/ # 编码模块 ├── storage/ # 存储管理 └── renderer/ # 预览渲染5.2 错误恢复机制实现断点续录class Recorder { async recover() { const lastState await fs.readFile(last_state.json); this.#startTime lastState.startTime; this.#writeStream fs.createWriteStream(output.mp4, { flags: a }); } }6. 跨平台兼容性处理6.1 Windows特定问题需要处理DPI缩放process.env.DEVICE_SCALE_FACTOR注意窗口标题匹配规则中文系统需处理编码6.2 macOS权限管理自动检测权限状态const { systemPreferences } require(electron); const hasPermission systemPreferences.askForMediaAccess(screen);6.3 Linux依赖处理打包时需包含这些依赖# Debian系 apt install -y libxcb-shape0 libxcb-xfixes0 libxcb-randr07. 安全与隐私考量7.1 敏感信息过滤在rrweb中配置record({ blockClass: credit-card, password-input, maskTextClass: sensitive-text });7.2 录制内容加密使用WebCrypto APIconst key await crypto.subtle.generateKey( { name: AES-GCM, length: 256 }, true, [encrypt, decrypt] );8. 调试与性能分析8.1 Chromium调试标志启用录制诊断日志electron --enable-logging --v18.2 性能分析工具使用Chrome Tracingconst { startTracing, stopTracing } require(electron).contentTracing; startTracing({ categories: disabled-by-default-devtools.timeline });9. 扩展功能实现9.1 鼠标高亮效果通过CSS注入实现document.addEventListener(mousemove, e { highlight.style.left ${e.clientX}px; highlight.style.top ${e.clientY}px; });9.2 键盘输入指示监听全局键盘事件require(electron).globalShortcut.register(CommandOrControlShiftK, () { showKeyboardHint(); });10. 项目部署优化10.1 自动更新方案集成electron-updaterautoUpdater.checkForUpdatesAndNotify();10.2 崩溃报告收集使用electron-crash-reportercrashReporter.start({ productName: ScreenRecorder, submitURL: https://your-domain.com/crash-report });在开发过程中最耗时的往往是各种边界条件的处理。比如在Windows 11上当系统开启HDR时色彩空间转换会导致录制视频发灰。最终通过强制指定色彩矩阵解决ffmpeg -colorspace bt709 -color_primaries bt709 -color_trc iec61966-2-1
1. Electron/Chromium屏幕录制技术方案选型在桌面端实现屏幕录制功能时Electron和Chromium提供了多种技术路线。根据我的项目经验主要存在三种典型方案1.1 WebRTC API方案Chromium内核原生支持的WebRTC API是最直接的方案。通过getDisplayMedia()方法可以获取屏幕流const stream await navigator.mediaDevices.getDisplayMedia({ video: { cursor: always, displaySurface: monitor }, audio: false });优势零依赖纯浏览器API实现支持系统级权限管理自动处理多显示器场景局限无法录制最小化窗口帧率受浏览器限制通常≤30fps无法录制DRM保护内容实测发现在Windows平台使用NVIDIA显卡时启用硬件加速会导致录制画面撕裂。需在chrome://flags中关闭Override software rendering list1.2 rrweb方案rrweb通过DOM序列化实现录制特别适合Web应用操作回放import { record } from rrweb; let events []; record({ emit(event) { events.push(event); }, });适用场景需要记录用户交互行为对录制文件大小敏感需要跨设备回放性能优化点使用sampling配置降低事件采样率启用blockClass过滤敏感元素配合canvas插件录制Canvas内容1.3 FFmpeg Electron方案在Electron主进程调用FFmpeg可实现更底层的录制控制const ffmpeg require(fluent-ffmpeg); const { desktopCapturer } require(electron); desktopCapturer.getSources({ types: [window, screen] }).then(sources { ffmpeg() .input(sources[0].id) .outputOptions(-c:v libx264, -preset ultrafast) .save(recording.mp4); });进阶配置使用-framerate 60提升帧率添加-pix_fmt yuv420p确保兼容性通过-threads 4启用多线程编码2. 多显示器录制难题破解2.1 显示器识别与选择Chromium的chrome.system.displayAPI可获取显示器信息chrome.system.display.getInfo(displays { displays.forEach(display { console.log(显示器 ${display.id}: ${display.bounds.width}x${display.bounds.height}); }); });常见问题主显示器ID在不同会话间可能变化缩放比例影响坐标计算需使用bounds而非workArea2.2 跨显示器录制方案方案一拼接录制区域const { width, height } require(electron).screen.getPrimaryDisplay().workAreaSize; const recorder new VideoRecorder({ x: 0, y: 0, width: width * 2, // 假设双屏等宽排列 height });方案二多实例独立录制# 启动多个Electron实例分别录制 electron recorder.js --display1 electron recorder.js --display2实测建议NVIDIA显卡用户需关闭多显示器优化设置否则可能导致帧率减半3. 性能优化实战记录3.1 内存控制技巧WebRTC内存泄漏排查// 必须手动释放MediaStream stream.getTracks().forEach(track track.stop());Electron进程管理启用webPreferences: { sandbox: true }隔离渲染进程使用--disable-gpu参数避免GPU内存泄漏3.2 编码参数调优x264推荐配置-preset ultrafast -tune zerolatency -crf 28 -g 60 -keyint_min 60硬件加速方案对比技术WindowsmacOSLinuxNVENC✅❌✅QuickSync✅❌❌VAAPI❌❌✅VideoToolbox❌✅❌4. 典型问题排查手册4.1 黑屏问题排查流程检查系统权限特别是macOS需要屏幕录制权限验证desktopCapturer是否返回有效源尝试禁用硬件加速app.commandLine.appendSwitch(disable-gpu);检查显卡驱动兼容性4.2 音频同步问题解决方案// 手动同步音视频时间戳 const audioContext new AudioContext(); const videoStream await navigator.mediaDevices.getDisplayMedia(); const audioStream await navigator.mediaDevices.getUserMedia(); const combinedStream new MediaStream([ ...videoStream.getVideoTracks(), ...audioStream.getAudioTracks() ]);5. 工程化实践建议5.1 模块化设计推荐录制模块架构recorder-core/ ├── capture/ # 采集模块 │ ├── webrtc.js │ ├── ffmpeg.js │ └── rrweb.js ├── encoder/ # 编码模块 ├── storage/ # 存储管理 └── renderer/ # 预览渲染5.2 错误恢复机制实现断点续录class Recorder { async recover() { const lastState await fs.readFile(last_state.json); this.#startTime lastState.startTime; this.#writeStream fs.createWriteStream(output.mp4, { flags: a }); } }6. 跨平台兼容性处理6.1 Windows特定问题需要处理DPI缩放process.env.DEVICE_SCALE_FACTOR注意窗口标题匹配规则中文系统需处理编码6.2 macOS权限管理自动检测权限状态const { systemPreferences } require(electron); const hasPermission systemPreferences.askForMediaAccess(screen);6.3 Linux依赖处理打包时需包含这些依赖# Debian系 apt install -y libxcb-shape0 libxcb-xfixes0 libxcb-randr07. 安全与隐私考量7.1 敏感信息过滤在rrweb中配置record({ blockClass: credit-card, password-input, maskTextClass: sensitive-text });7.2 录制内容加密使用WebCrypto APIconst key await crypto.subtle.generateKey( { name: AES-GCM, length: 256 }, true, [encrypt, decrypt] );8. 调试与性能分析8.1 Chromium调试标志启用录制诊断日志electron --enable-logging --v18.2 性能分析工具使用Chrome Tracingconst { startTracing, stopTracing } require(electron).contentTracing; startTracing({ categories: disabled-by-default-devtools.timeline });9. 扩展功能实现9.1 鼠标高亮效果通过CSS注入实现document.addEventListener(mousemove, e { highlight.style.left ${e.clientX}px; highlight.style.top ${e.clientY}px; });9.2 键盘输入指示监听全局键盘事件require(electron).globalShortcut.register(CommandOrControlShiftK, () { showKeyboardHint(); });10. 项目部署优化10.1 自动更新方案集成electron-updaterautoUpdater.checkForUpdatesAndNotify();10.2 崩溃报告收集使用electron-crash-reportercrashReporter.start({ productName: ScreenRecorder, submitURL: https://your-domain.com/crash-report });在开发过程中最耗时的往往是各种边界条件的处理。比如在Windows 11上当系统开启HDR时色彩空间转换会导致录制视频发灰。最终通过强制指定色彩矩阵解决ffmpeg -colorspace bt709 -color_primaries bt709 -color_trc iec61966-2-1
)
)
