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

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

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

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

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

当我录制视频时，当视频静音时，我总是将数据大小设为 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>

解决方法

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>

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