Chrome环境下视频静音时MediaRecorder录制输出0字节问题求助

AI 小北

2026-10-15

问题根因

你遇到的是Chrome浏览器MediaRecorder的典型行为：当你指定的录制MIME类型同时包含音视频编码，但捕获的流中音频轨道长期处于无有效音频输出的静音状态时，MediaRecorder会判定没有可编码的有效数据，最终输出的切片大小为0。

解决方案

根据你的需求可选择以下两种方案：

方案1：无需录制音频时直接调整MIME类型

如果录制不需要包含音频，直接修改MediaRecorder的MIME类型，仅指定视频编码即可，不需要声明音频编码，改动最小：

function startRecording() {
  var stream = document.getElementById('videoPlayer').captureStream();
  // 仅声明视频编码，去掉音频相关声明
  recorder = new MediaRecorder(stream, {mimeType : 'video/webm; codecs=avc1'});
  recorder.ondataavailable = e => {
    console.log(e.data.size);
    chunks.push(e.data);
  };
  recorder.start();
}

该方案无需修改其他逻辑，视频元素依然可以保持muted状态满足自动播放要求。

方案2：需要保留音频轨道时补充静音音频输入

如果录制需求必须包含音频轨道（哪怕是静音的），可以手动给捕获的流补充一路持续输出的静音音频轨，保证MediaRecorder能拿到稳定的音频输入：

function startRecording() {
  var videoStream = document.getElementById('videoPlayer').captureStream();
  // 创建静音音频轨道
  const audioCtx = new AudioContext();
  const dest = audioCtx.createMediaStreamDestination();
  const osc = audioCtx.createOscillator();
  osc.connect(dest);
  osc.start();
  // 合并视频流和静音音频流
  const combinedStream = new MediaStream([
    ...videoStream.getVideoTracks(),
    ...dest.stream.getAudioTracks()
  ]);
  recorder = new MediaRecorder(combinedStream, {mimeType : 'video/webm; codecs="avc1, opus"'});
  recorder.ondataavailable = e => {
    console.log(e.data.size);
    chunks.push(e.data);
  };
  recorder.start();
}