JavaScript MediaRecorder跨浏览器视频格式兼容及全兼容录制方案咨询

在浏览器中使用MediaRecorder录制视频流时，录制格式取决于浏览器（Chrome、Safari或Firefox）。

下表展示各浏览器中MediaRecorder支持的视频格式/容器（数据通过isTypeSupported静态方法获取）：

视频播放时，不同浏览器支持的格式也有差异，下表为各浏览器可播放的视频格式（可能存在误差）：

我开发的Web应用支持用户在浏览器录制视频并上传至数据库，其他用户可访问观看。Safari录制的MP4格式可被全浏览器兼容，但Chrome或Firefox录制的WEBM格式无法在Safari播放。

请问是否存在无需转换视频格式、仅在浏览器端实现录制全兼容格式（如MP4）视频的方案？

• 曾尝试使用video.js npm包，未成功。
• 尝试过客户端用FFMPEG转换视频，但处理量大、耗时过长。

寻求仅在浏览器端实现、无需格式转换的解决方案。

1. 优先检测MP4录制支持 #

直接调用MediaRecorder.isTypeSupported('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')判断当前浏览器是否支持MP4格式录制。如果支持（比如Safari、新版Chrome/Edge），直接用该MIME类型初始化MediaRecorder即可录制MP4。

2. 指定MP4 MIME类型触发原生支持 #

部分新版Chrome和Edge已支持MP4格式的MediaRecorder录制（基于H.264编码），可以通过指定具体的MP4 MIME类型来启用：

const options = { mimeType: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' };
if (MediaRecorder.isTypeSupported(options.mimeType)) {
  const recorder = new MediaRecorder(stream, options);
  // 后续录制逻辑
}

3. 无纯前端无转换方案时的折中优化 #

如果浏览器不支持MP4录制，目前没有完全无需转换的纯前端方案，但可以优化转换体验：

• 使用Web Worker运行FFmpeg.wasm，将转换任务放在后台线程，避免阻塞主线程；
• 仅提供可选转换按钮，而非强制转换，同时提示用户当前录制格式在Safari的播放限制。

4. 用WebCodecs API手动封装MP4 #

WebCodecs API允许直接处理视频帧与编码数据，可手动捕获视频帧、用H.264编码器编码后封装成MP4容器。这种方式需要编写底层代码，但能实现跨浏览器MP4录制，目前Chrome、Edge、Firefox已支持，Safari最新版本也逐步兼容。

内容的提问来源于stack exchange，提问作者Malik Elbadri