WebRTC开发中Chrome与Safari的MediaRecorder录制兼容问题如何解决

核心原则：不要靠UA判断浏览器类型选配置，用原生能力检测才是全平台兼容的可靠方案。

靠识别Chrome/Safari返回不同硬编码配置的做法非常容易失效：不同系统、不同版本的同一款浏览器支持的编码格式差异很大，比如Safari 16.4之后已经开始支持webm格式，部分定制版Chrome也会默认开启mp4录制支持，UA判断根本覆盖不了这些场景。

浏览器原生提供了MediaRecorder.isTypeSupported()方法，会直接返回当前运行环境是否支持指定的mimeType，你只需要按兼容性优先级列好候选配置列表，逐个检测取第一个可用的即可，不需要关心当前是什么浏览器、跑在什么系统上。

可用实现代码 #

先按覆盖度从高到低整理候选mimeType列表，覆盖Mac/iOS Safari、全版本Chrome/Edge/Firefox：

// 候选mimeType按优先级从高到低排列
const CANDIDATE_MIMES = [
  // H.264基线档 + AAC音频，全版本Safari支持，新版Chrome/Edge兼容
  'video/mp4;codecs=avc1.42E01E,mp4a.40.2',
  // VP9 + Opus，全版本Chrome/Firefox/Edge支持，Safari 16.4+兼容
  'video/webm;codecs=vp9,opus',
  // VP8 + Opus，兼容更老版本的Firefox/Chromium内核浏览器
  'video/webm;codecs=vp8,opus',
  // 兜底值：不传mimeType，让浏览器自行选择默认支持的配置
  ''
];

function getValidMimeType() {
  for (const mime of CANDIDATE_MIMES) {
    if (!mime) return mime;
    if (window.MediaRecorder.isTypeSupported(mime)) {
      return mime;
    }
  }
  return '';
}

// 初始化录制实例
const targetMime = getValidMimeType();
this.mediaRecorder = new MediaRecorder(window.stream, {
  mimeType: targetMime
});

常见踩坑说明 #

• adapter.js解决不了这个问题：它的适配范围主要是早期WebRTC相关API的前缀差异、行为不一致问题，不会扩展浏览器底层的MediaRecorder编码支持能力，Safari不支持旧版webm编码是底层实现限制，引入adapter.js不会改变这点。
• 不要强行要求录制阶段输出统一格式：不同浏览器支持的封装格式、编码天然有差异，如果你的业务需要最终输出统一格式的视频文件，优先保证录制流程正常跑通，录制完成后把Blob传到服务端做统一转码即可。前端本地转码性能开销极高，长视频场景下移动端很容易出现内存溢出、页面崩溃，不推荐使用。
• Safari端特殊注意点：
  • iOS Safari在页面进入后台时会自动暂停MediaRecorder录制，需要做对应的状态提示
  • Safari录制生成的mp4文件只有在调用stop()方法后才会写入完整的文件头，录制过程中不要提前读取已生成的Blob片段，否则会得到损坏的无法播放的文件
  • 14.1以下版本的Safari的MediaRecorder实现存在已知bug，录制时长超过1分钟的视频大概率出现音画不同步，这种场景建议直接提示用户升级浏览器版本。

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