解决90% Electron开发者的痛点：MediaRecorder API实现高质量屏幕录制

你是否还在为Electron应用中的屏幕录制功能头疼？API调用复杂、性能损耗大、兼容性差？本文将带你用30行核心代码，基于MediaRecorder API实现流畅的跨平台屏幕录制功能，让你轻松解决这些难题。读完本文，你将掌握：Electron主进程与渲染进程通信技巧、MediaRecorder API实战应用、视频数据高效处理方法。## 项目基础架构概览electron-quick-s...

舒璇辛Bertina

492人浏览 · 2025-09-20 04:52:54

舒璇辛Bertina · 2025-09-20 04:52:54 发布

解决90% Electron开发者的痛点：MediaRecorder API实现高质量屏幕录制

【免费下载链接】electron-quick-start Clone to try a simple Electron app 项目地址: https://gitcode.com/gh_mirrors/el/electron-quick-start

项目基础架构概览

electron-quick-start是Electron官方提供的最小化应用模板，包含了构建桌面应用的基础结构。项目核心文件结构如下：

electron-quick-start/
├── main.js          # 主进程入口文件，控制应用生命周期
├── renderer.js      # 渲染进程脚本，处理页面交互
├── index.html       # 应用界面HTML
├── package.json     # 项目配置和依赖管理
└── preload.js       # 进程间通信桥梁

项目使用Electron ^38.2.2版本，通过npm start命令启动应用。基础架构采用Electron标准的多进程模型，主进程负责窗口管理和系统资源访问，渲染进程负责UI渲染和用户交互。

实现屏幕录制的核心原理

Electron屏幕捕获基础

Electron提供了两种屏幕捕获方案：

desktopCapturer API：通过desktopCapturer.getSources()方法获取屏幕或窗口源，适合需要选择捕获区域的场景
getUserMedia API：通过navigator.mediaDevices.getUserMedia()直接访问媒体流，代码更简洁

我们将采用第二种方案，结合MediaRecorder API实现录制功能。MediaRecorder API是浏览器原生提供的媒体录制接口，支持WebM、MP4等格式，具有低延迟、高兼容性的特点。

进程间通信设计

由于Electron的安全策略限制，渲染进程无法直接访问系统资源，需要通过主进程间接获取。我们将通过以下步骤实现通信：

mermaid

分步实现屏幕录制功能

1. 修改主进程代码

首先需要在main.js中添加窗口创建时的webPreferences配置，开启必要的权限：

// 在main.js第7-13行的BrowserWindow配置中添加
const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    // 添加以下配置
    contextIsolation: true,
    enableRemoteModule: false,
    webSecurity: false
  }
})

2. 配置preload.js通信桥梁

创建preload.js文件，添加进程间通信的接口：

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  startRecording: () => ipcRenderer.invoke('start-recording'),
  stopRecording: () => ipcRenderer.invoke('stop-recording'),
  saveRecording: (data) => ipcRenderer.send('save-recording', data)
})

3. 实现渲染进程录制逻辑

修改renderer.js，添加录制控制逻辑：

let mediaRecorder;
let recordedChunks = [];

// 开始录制
document.getElementById('startBtn').addEventListener('click', async () => {
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: 'screen:0:0',
        minWidth: 1280,
        maxWidth: 1280,
        minHeight: 720,
        maxHeight: 720
      }
    }
  });
  
  mediaRecorder = new MediaRecorder(stream);
  recordedChunks = [];
  
  mediaRecorder.ondataavailable = (e) => {
    if (e.data.size > 0) recordedChunks.push(e.data);
  };
  
  mediaRecorder.onstop = () => {
    const blob = new Blob(recordedChunks, { type: 'video/webm' });
    const buffer = Buffer.from(await blob.arrayBuffer());
    window.electronAPI.saveRecording(buffer);
    recordedChunks = [];
  };
  
  mediaRecorder.start();
  document.getElementById('status').textContent = '正在录制...';
});

// 停止录制
document.getElementById('stopBtn').addEventListener('click', () => {
  mediaRecorder.stop();
  document.getElementById('status').textContent = '录制已停止';
});

4. 更新界面HTML

修改index.html，添加录制控制按钮和状态显示：

<body>
  <h1>Electron屏幕录制工具</h1>
  <div class="controls">
    <button id="startBtn">开始录制</button>
    <button id="stopBtn">停止录制</button>
    <span id="status">就绪</span>
  </div>
  <script src="./renderer.js"></script>
</body>

性能优化与最佳实践

视频参数优化

针对不同场景调整视频参数，可以显著提升录制质量和性能：

参数	建议值	说明
分辨率	1280x720	平衡画质和性能的黄金比例
比特率	2500000	2.5Mbps，适合大多数场景
帧率	30fps	保证画面流畅度
编码格式	VP8/VP9	WebM格式默认编码，兼容性好

修改MediaRecorder初始化代码设置参数：

const options = {
  mimeType: 'video/webm; codecs=vp9',
  videoBitsPerSecond: 2500000
};
mediaRecorder = new MediaRecorder(stream, options);

内存管理技巧

长时间录制可能导致内存占用过高，建议采用以下优化措施：

分块处理数据：不要等到录制结束才处理全部数据，每积累一定大小的数据就进行一次处理
使用Buffer而非Blob：在Node.js环境中，Buffer处理二进制数据效率更高
及时释放资源：录制结束后主动停止媒体流，清除引用

// 优化的ondataavailable处理
mediaRecorder.ondataavailable = (e) => {
  if (e.data.size > 0) {
    recordedChunks.push(e.data);
    // 每积累50MB数据就处理一次
    if (getTotalSize(recordedChunks) > 50 * 1024 * 1024) {
      processChunk(recordedChunks);
      recordedChunks = [];
    }
  }
};

完整代码与使用指南

项目依赖安装

确保已安装必要依赖：

npm install electron@^38.2.2 archiver

运行与测试

启动应用并测试录制功能：

npm start

点击"开始录制"按钮，选择要捕获的屏幕区域
进行需要录制的操作
点击"停止录制"按钮，视频将自动保存到用户文档目录

打包发布

使用Electron Forge或electron-builder打包应用：

# 添加打包工具
npm install --save-dev @electron-forge/cli
npx electron-forge import

# 打包应用
npm run make

常见问题解决方案

录制黑屏问题

如果录制结果为黑屏，通常是由于Electron的安全策略导致：

确保在main.js中正确配置了上下文隔离
检查preload.js是否正确暴露了API
确认HTML文件中的CSP策略没有阻止媒体访问

性能卡顿优化

在低配置设备上出现卡顿，可以尝试：

降低分辨率和帧率
关闭硬件加速（在main.js中配置）：

const mainWindow = new BrowserWindow({
  // ...
  webPreferences: {
    // ...
    hardwareAcceleration: false
  }
});

使用软件编码而非硬件编码

跨平台兼容性

确保在不同操作系统上的兼容性：

Windows：需要管理员权限才能捕获某些应用窗口
macOS：需要在系统偏好设置中授予屏幕录制权限
Linux：可能需要安装额外的依赖库

总结与扩展

通过本文介绍的方法，我们基于MediaRecorder API实现了一个功能完善的屏幕录制工具。核心优势包括：代码简洁（仅需30行核心代码）、性能优异（资源占用低）、兼容性好（支持三大主流操作系统）。

在此基础上，你还可以扩展更多高级功能：

添加音频录制功能，实现音画同步
实现视频剪辑和格式转换
添加自定义水印和鼠标高亮效果
开发云同步功能，自动上传录制文件

希望本文能帮助你解决Electron开发中的屏幕录制痛点。如有任何问题，欢迎查阅项目中的README.md或提交issue交流讨论。

点赞+收藏+关注，下期为你带来"Electron视频编辑功能实现"，敬请期待！

【免费下载链接】electron-quick-start Clone to try a simple Electron app 项目地址: https://gitcode.com/gh_mirrors/el/electron-quick-start

开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

Flutter WebSocket重连机制实战：从频繁崩溃到稳定连接的优化之路

开源鸿蒙跨平台开发者社区

Flutter for OpenHarmony 电子合同签署App实战 - 合同过滤实现

开源鸿蒙跨平台开发者社区

Windows 11 上搭建 Flutter OpenHarmony 常见问题指南

开源鸿蒙跨平台开发者社区

所有评论(0)

查看更多评论

舒璇辛Bertina

@gitblog_00230

已为社区贡献21条内容