Chrome中MediaRecorder用avc1编码生成MP4文件被截断问题咨询

核心原因分析 #

• avc1的MP4封装需要完整收尾流程：MP4格式依赖moov原子（文件索引模块）让播放器识别完整内容，Chrome的avc1编码器在调用stop()后，需要额外时间生成并写入这个索引。如果在stop事件触发前就读取chunks生成Blob，会导致索引缺失，文件被播放器判定为截断。而vp9的编码器收尾逻辑更高效，能快速完成索引写入，所以文件正常。
• 音频编码同步冲突：你选择的mp4a.40.2（AAC）编码在Windows Chrome环境下，可能和avc1视频流存在同步兼容问题，编码器收尾时音频流未正确闭合，导致整个MP4文件封装不完整。相比之下，vp9搭配的opus编码在Chrome生态中兼容性更好，同步问题更少。
• chunk收集时机错误：avc1的dataavailable事件触发间隔与vp9不同，比如关键帧间隔更长，如果在stop()前最后一个chunk未被捕获（比如事件监听绑定不及时），会导致chunks数组缺失部分数据，生成的Blob自然不完整。

验证与解决建议 #

1. 严格按事件顺序处理chunks：必须等stop事件触发后再生成Blob，禁止提前读取chunks数组，示例代码：

   const chunks = [];
   const recorder = new MediaRecorder(stream, { mimeType: "video/mp4;codecs=avc1,mp4a.40.2" });
   
   recorder.ondataavailable = (e) => chunks.push(e.data);
   recorder.onstop = () => {
     // 此时所有chunk已收集完成
     const blob = new Blob(chunks, { type: recorder.mimeType });
     // 后续处理Blob
   };
   
   recorder.start();
   // 录制完成后调用stop
   recorder.stop();
   

2. 避免页面卸载时紧急停止：如果是在页面关闭时触发录制停止，需给编码器留足够收尾时间，比如用requestIdleCallback延迟处理：

   window.addEventListener('beforeunload', (e) => {
     e.preventDefault();
     recorder.stop();
     // 需结合异步逻辑确保stop事件完成后再允许页面卸载
   });
   

3. 排查音频编码影响：暂时去掉音频编码，只录制视频，测试avc1的MP4是否正常：

   const recorder = new MediaRecorder(stream, { mimeType: "video/mp4;codecs=avc1" });
   

   如果视频正常，说明是音频编码的兼容性问题，可以尝试更换音频编码格式，或调整音频比特率参数。

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