Chrome扩展录屏问题：MP4无法在QuickTime打开，无时间信息及音频

嘿，我来帮你搞定这两个头疼的录制问题！咱们一个一个来拆解：

问题1：视频无法在QuickTime打开，且VLC中无时间轴信息 #

原因分析 #

Chrome的MediaRecorder默认生成WebM格式视频，而QuickTime对WebM的支持非常有限。另外，即使你指定了MP4格式，如果录制生成的文件元数据（比如关键的moov atom）放在文件末尾，QuickTime也无法正确识别，导致无法打开或丢失时间轴信息。

解决方案 #

1. 指定兼容的MP4 MIME类型
   先检查Chrome是否支持MP4编码，再初始化MediaRecorder时明确指定：

   const mimeType = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
   if (!MediaRecorder.isTypeSupported(mimeType)) {
     alert("当前浏览器不支持MP4录制，请使用Chrome最新版本");
     return;
   }
   // 后续用该mimeType初始化MediaRecorder
   

2. 修复元数据问题
   如果录制后的MP4仍无法在QuickTime打开，可以用前端工具（比如ffmpeg.wasm）重新封装视频，把moov atom移到文件开头：

   import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
   const ffmpeg = createFFmpeg({ log: true });
   
   async function fixVideoMetadata(blob) {
     await ffmpeg.load();
     ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(blob));
     // 执行命令移动moov atom到文件开头
     await ffmpeg.run('-i', 'input.mp4', '-movflags', 'faststart', 'output.mp4');
     const data = ffmpeg.FS('readFile', 'output.mp4');
     return new Blob([data.buffer], { type: 'video/mp4' });
   }
   

3. 确保稳定的帧率设置
   获取屏幕流时指定帧率参数，避免录制出帧率波动的视频：

   const screenStream = await navigator.mediaDevices.getDisplayMedia({
     video: { frameRate: { ideal: 30, max: 60 } },
     audio: true // 顺便为音频问题铺垫
   });
   

问题2：录制的视频没有音频 #

原因分析 #

你的代码只捕获了屏幕的视频流，没有同时获取音频流（系统音频或麦克风音频），MediaRecorder自然只会录制视频部分。

解决方案 #

1. 捕获系统音频
   使用getDisplayMedia时直接加上audio: true参数，可捕获系统播放的音频：

   const screenStream = await navigator.mediaDevices.getDisplayMedia({
     video: { frameRate: { ideal: 30 } },
     audio: true
   });
   

2. 同时捕获麦克风音频（可选）
   如果需要录制麦克风声音，可单独获取麦克风流并合并到屏幕流中：

   // 获取麦克风流
   const micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
   // 将麦克风轨道添加到屏幕流
   micStream.getAudioTracks().forEach(track => screenStream.addTrack(track));
   

3. 整合后的startRecording函数示例
   把上述逻辑整合到你的代码里：

   async function startRecording() {
     try {
       // 获取屏幕+系统音频流
       const screenStream = await navigator.mediaDevices.getDisplayMedia({
         video: { frameRate: { ideal: 30, max: 60 } },
         audio: true
       });
   
       // 可选：添加麦克风音频
       const micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
       micStream.getAudioTracks().forEach(track => screenStream.addTrack(track));
   
       const mimeType = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
       if (!MediaRecorder.isTypeSupported(mimeType)) {
         throw new Error("浏览器不支持MP4录制");
       }
   
       const recorder = new MediaRecorder(screenStream, { mimeType });
       const chunks = [];
   
       recorder.ondataavailable = (e) => chunks.push(e.data);
       recorder.onstop = async () => {
         const blob = new Blob(chunks, { type: mimeType });
         // 可选：修复元数据
         const fixedBlob = await fixVideoMetadata(blob);
         // 下载视频
         const url = URL.createObjectURL(fixedBlob);
         const a = document.createElement('a');
         a.href = url;
         a.download = 'screen-recording.mp4';
         a.click();
         URL.revokeObjectURL(url);
       };
   
       recorder.start();
       // 可添加停止录制触发逻辑，比如按钮点击调用recorder.stop()
     } catch (error) {
       alert(`录制出错：${error.message}`);
     }
   }
   

额外提示 #

Chrome扩展需要申请对应权限，在manifest.json中配置：

{
  "permissions": ["audioCapture", "videoCapture", "desktopCapture"],
  "host_permissions": ["<all_urls>"]
}

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