如何使用getUserMedia和MediaRecorder下载录制文件并补全视频规范元数据

问题根源 #

浏览器原生MediaRecorder输出的是实时流媒体格式，录制过程中不会预写文件总时长、元数据索引块到文件头部，因此下载的视频会缺少元数据信息，播放器无法识别总时长，也就无法支持进度跳转、倍速播放等操作。你原代码还存在格式不匹配的低级错误：Blob的type声明为video/mp4，但下载文件后缀设置为.webm，格式不匹配会进一步加剧元数据识别异常。

解决方案 #

方案1：前端侧补全元数据（无需后端） #

引入对应的媒体封装处理库，在录制完成后重新封装视频补全元数据：

• 若使用WebM格式录制，可引入WebM封装处理库，将录制得到的chunk重新写入带完整头部信息的WebM文件，补全时长元数据
• 若使用MP4格式录制，可引入MP4处理库，重新封装时添加faststart标记，将元数据块移动到文件开头，同时写入总时长信息

示例处理逻辑（WebM场景）：

// 录制逻辑和原代码一致，得到recordedChunks后
const blob = new Blob(recordedChunks, { type: 'video/webm' });
// 传入blob到处理库补全元数据后再生成下载链接

方案2：后端侧FFmpeg处理 #

如果有后端服务配合，可将录制得到的原始视频传到后端，执行FFmpeg命令修复：

• WebM格式修复命令：ffmpeg -i 原始视频.webm -c copy 修复后视频.webm
• MP4格式修复命令：ffmpeg -i 原始视频.mp4 -c copy -movflags +faststart 修复后视频.mp4
  该命令不会重新编码视频，处理速度极快，会自动补全时长元数据、将元数据块移动到文件头部，完美支持进度跳转、倍速播放。

临时兼容方案 #

录制时明确指定兼容性好的mimeType，可缓解部分浏览器的识别问题：

// 优先指定带编码信息的mimeType
const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9,opus') 
  ? 'video/webm;codecs=vp9,opus' 
  : 'video/webm';
const mediaRecorder = new MediaRecorder(stream, { mimeType });

内容的提问来源于stack exchange，提问作者Abel Abed Silva Santa Cruz