You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在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,是目前最可靠的做法。

步骤:

  1. 保持原WebM录制逻辑不变:
const options = { mimeType: "video/webm; codecs=vp9" };
const media = new MediaRecorder(stream, options);
  1. 集成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,但需要启用实验性特性,且兼容性不稳定。

步骤:

  1. 先检查当前Electron是否支持目标MIME类型:
// 在渲染进程中执行,查看控制台输出
console.log(MediaRecorder.isTypeSupported('video/mp4; codecs=avc1.42E01E,mp4a.40.2'));
console.log(MediaRecorder.isTypeSupported('video/mp4'));
  1. 如果返回true,则可以使用对应的MIME类型:
// 示例:使用H.264+AAC的MP4配置
const options = { mimeType: "video/mp4; codecs=avc1.42E01E,mp4a.40.2" };
const media = new MediaRecorder(stream, options);
  1. 如果返回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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.27 06:42:35