如何在Electron中通过MediaRecorder()将视频格式改为MP4?
解决Electron中MediaRecorder录制MP4的问题
首先明确:Electron基于的Chromium内核,原生MediaRecorder对MP4格式的支持有限,多数情况下默认只支持WebM系列格式。你尝试的video/mp4; codecs=avc1.4d002a失败,大概率是因为当前Electron版本的Chromium不支持该MIME类型的录制。
下面提供两种可行方案:
方案1:录制WebM后转码为MP4(推荐,兼容性最好)
这种方式利用原生支持稳定的WebM录制,再通过FFmpeg转成MP4,是目前最可靠的做法。
步骤:
- 保持原WebM录制逻辑不变:
const options = { mimeType: "video/webm; codecs=vp9" }; const media = new MediaRecorder(stream, options);
- 集成FFmpeg进行转码:
- 可以使用
ffmpeg.js(纯JS版本,无需额外二进制文件),或者在Electron中打包FFmpeg二进制文件调用。 - 转码示例(用ffmpeg.js):
- 可以使用
// 安装依赖:npm install ffmpeg.js import ffmpeg from 'ffmpeg.js'; // 录制完成后,将WebM Blob转为MP4 async function convertToMp4(webmBlob) { const arrayBuffer = await webmBlob.arrayBuffer(); const inputBuffer = new Uint8Array(arrayBuffer); // 调用FFmpeg转码 const ffmpegResult = ffmpeg({ MEMFS: [{ name: 'input.webm', data: inputBuffer }], arguments: [ '-i', 'input.webm', '-c:v', 'libx264', // H.264视频编码 '-preset', 'fast', // 转码速度/质量平衡 '-c:a', 'aac', // AAC音频编码 '-b:a', '128k', 'output.mp4' ], // 若需要更大内存,可配置TOTAL_MEMORY,比如TOTAL_MEMORY: 268435456(256MB) }); // 生成MP4 Blob const mp4Buffer = ffmpegResult.MEMFS[0].data; return new Blob([mp4Buffer], { type: 'video/mp4' }); }
方案2:尝试启用Chromium的MP4录制支持(实验性)
部分新版本Chromium支持MP4的MediaRecorder,但需要启用实验性特性,且兼容性不稳定。
步骤:
- 先检查当前Electron是否支持目标MIME类型:
// 在渲染进程中执行,查看控制台输出 console.log(MediaRecorder.isTypeSupported('video/mp4; codecs=avc1.42E01E,mp4a.40.2')); console.log(MediaRecorder.isTypeSupported('video/mp4'));
- 如果返回
true,则可以使用对应的MIME类型:
// 示例:使用H.264+AAC的MP4配置 const options = { mimeType: "video/mp4; codecs=avc1.42E01E,mp4a.40.2" }; const media = new MediaRecorder(stream, options);
- 如果返回
false,需要在Electron主进程中启动时添加实验性flag:
// 主进程代码 const { app, BrowserWindow } = require('electron'); app.commandLine.appendSwitch('enable-experimental-web-platform-features'); function createWindow() { // ...窗口创建逻辑 } app.whenReady().then(createWindow);
添加flag后重新运行Electron,再重复步骤1检查支持情况。
内容的提问来源于stack exchange,提问作者Shibo-0001
相关产品推荐
相关产品推荐

