Chrome96使用MediaRecorder录制webm时随机生成损坏视频如何解决？

故障原因 #

这个问题是Chrome浏览器MediaRecorder实现的已知缺陷导致的：你当前复用了同一个MediaRecorder实例反复调用start()和stop()生成多段视频，Chrome仅会在第一次调用start()时写入完整的webm容器头和编码关键帧，后续调用start()时不会重新写入完整的独立文件头，也不会强制生成新的关键帧作为段起始，导致部分分段缺少必要的解码元数据，ffmpeg解析时就会报数据无效的错误。因为Firefox的MediaRecorder实现逻辑不同，每次start()都会生成完整独立的文件结构，所以不会复现问题。

解决方案 #

核心修复：每次生成分段时新建MediaRecorder实例 #

不要复用同一个MediaRecorder对象，每次要录制新的10秒段时重新创建实例即可，修改后的代码参考如下：

var chunks;

// 调用该方法启动录制流程
function startRecording(stream) {
  recordVideoChunk(stream);
};

function recordVideoChunk(stream) {
  // 每次录制新段都创建全新的MediaRecorder实例
  const mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm; codecs=vp8" });
  chunks = [];

  mediaRecorder.ondataavailable = function (e) {
    chunks.push(e.data);
  };

  mediaRecorder.onstop = function () {
    const actualChunks = chunks.splice(0, chunks.length);
    const blob = new Blob(actualChunks, { type: "video/webm; codecs=vp8" });
    uploadVideoPart(blob); // 上传到服务器
  };

  mediaRecorder.start();

  setTimeout(function() {
    mediaRecorder.stop();
    recordVideoChunk(stream);
  }, 10000); // 每段视频10秒
}

补充兜底处理 #

如果还有极个别偶发的损坏文件，可以在服务器端用ffmpeg做无失真转封装修复，命令如下：

ffmpeg -v error -i 损坏的分段.webm -c copy 修复后的分段.webm

这个操作不会重新编码，仅会重构容器结构，速度很快，能修复绝大多数元数据缺失导致的损坏问题。

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