使用MediaDevices.getUserMedia() API时，Safari录制视频远大于Chrome的原因？

核心原因 #

• Safari对WebM格式的MediaRecorder实现与Chrome存在差异：Chrome默认使用高效的VP9编码，而Safari可能回退到VP8或未启用最优压缩参数，导致相同分辨率下比特率远高于Chrome。
• 两款浏览器的MediaRecorder默认编码配置不同：Chrome会根据分辨率自动适配低比特率，Safari的默认比特率设置更宽松，未针对小分辨率视频做优化。

解决方案 #

1. 显式指定视频比特率

初始化MediaRecorder时，通过options参数设置videoBitsPerSecond，强制降低编码比特率：

const recorder = new MediaRecorder(stream, {
  videoBitsPerSecond: 500000, // 500kbps，可根据清晰度需求调整
  mimeType: 'video/webm'
});

对于240x240@30fps的视频，500kbps已足够保证清晰度，同时能大幅压缩体积。

2. 切换到MP4（H.264）格式

Safari对H.264编码的支持更成熟，编码效率更高，跨浏览器兼容性也更好：

// 初始化MediaRecorder时指定MP4格式
const recorder = new MediaRecorder(stream, {
  mimeType: 'video/mp4',
  videoBitsPerSecond: 500000
});

Chrome同样支持MP4格式，调整后两款浏览器录制的视频体积会更接近，同时兼容性更广。

3. 优化MediaConstraints参数

在getUserMedia的视频约束中，可添加bitrate参数（部分浏览器支持），从源头控制捕获的视频比特率：

const stream = await navigator.mediaDevices.getUserMedia({
  audio: true,
  video: {
    frameRate: 30,
    height: 240,
    width: 240,
    bitrate: 500000 // 提前限制比特率，部分浏览器生效
  },
});

验证效果 #

调整后，Safari录制的10秒240x240视频体积可降至1MB以内，与Chrome的体积差异会大幅缩小。

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