当视频静音时，MediaRecorder 在 Chrome 中给出 0 个字节

Question

我正在尝试从 Chrome 录制 MP4 流并将其保存到最终用户的系统中。作为其中的一部分，我在本地有一个 NodeJS 服务器运行，并在 url“http://localhost:8000/video”上流式传输 MP4 视频。我还有一个 HTML 页面托管在“http://localhost:8000”来播放这个流。由于我希望此 HTML 页面自动播放视频，因此视频处于静音状态。（这基于 Chrome 自动播放政策）

现在，我有一个开始录制视频的按钮，它会调用下面定义的“startRecording”函数。它使用视频元素的流作为 MediaRecorder 的输入来创建记录器。

使用“stopRecording”函数停止录制时，将触发 MediaRecorder 的 ondataavailable 处理程序，并且从流中捕获的数据将在事件的数据属性中可用。我已经添加了一个日志语句来捕获这个数据大小。

当我录制视频时，当视频静音时，我总是得到数据大小为 0。但是如果我从视频播放器中取消静音然后录制，我就会得到数据。如何在视频静音时录制流？分享以下相关代码片段：

<video id="videoPlayer" width="650" controls autoplay muted>
   <source src="/video" type="video/mp4" />
</video>

<script>

   var recorder;
   var chunks = [];
   
   function startRecording() {
     var stream = document.getElementById('videoPlayer').captureStream();
   
     recorder = new MediaRecorder(stream, {mimeType : 'video/webm;avc1,opus'});
     
     recorder.ondataavailable = e => {
       console.log(e.data.size); // getting 0 here when video is muted
       chunks.push(e.data);
       
     };
   
     recorder.start();
   }
   
   function stopRecording() {
     recorder.stop();
   }
   
</script>

Answer 1

Chrome 的 MediaRecorder 实现中还有一个错误...I did report it.

请注意，此错误与以下已知错误有关：https://crbug.com/1136404 这会使静音的音频元素影响捕获的 MediaStream，而实际上它不应该...
顺便说一句，Firefox 也有这样的错误。因此，即使 MediaRecorder 没有错误，您也无法以这种方式录制音频。

关于 MediaRecorder 错误，如果您可以不录制音频流，那么您可以从 MediaStream 中删除音轨，MediaRecorder 会很满意。

const vid = document.querySelector("video");
vid.onplay = evt => {
  const stream = vid.captureStream();
  // remove all audio tracks
    stream.getAudioTracks().forEach( t => stream.removeTrack( t) )
  const recorder = new MediaRecorder(stream);
  recorder.ondataavailable = e => {
    console.log( e.data.size ); // we get something
  };
  recorder.start();
  document.querySelector("button").onclick = evt => recorder.stop();
}

<button>stop</button>
<video crossorigin src="https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm" muted autoplay></video>

但是我应该注意到您的整个场景看起来很奇怪：为什么要录制从服务器发送的视频？为什么不让您的用户直接下载原始视频文件？

当视频静音时，MediaRecorder 在 Chrome 中给出 0 个字节

MediaRecorder giving 0 bytes in Chrome when video is muted

video

video-recording

html5-video

no-data

web-mediarecorder