0

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

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

使用 " " 函数停止录制时，将触发stopRecordingMediaRecorder 的处理程序，从流中捕获的数据将在事件的 data 属性中可用。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>
4

1 回答 1

1

Chrome 的 MediaRecorder 实现中的另一个错误......我确实报告了它。

请注意，此错误与此已知错误有关：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>

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

于 2021-06-24T02:26:58.760 回答