从视频获取MediaStreamTrack(音频)

Question

我想在从画布录制的同时从视频元素录制音频。我有

var stream = canvas.captureStream(29);

现在我将视频的audioTrack 添加到流中。

var vStream = video.captureStream();
stream.addTrack(vStream.getAudioTracks()[0]);

但这会降低添加每个视频的性能。由于 captureStream() 对视频的处理非常繁重，并且还需要在 Chrome 中打开一个标志。有没有一种方法可以从视频元素仅创建音频 MediaStream，而不使用 captureStream()。

Answer 1

是的，您可以使用 Web Audio API 的方法createMediaElementSource从您的 mediaElement 中获取音频，然后使用该createMediaStreamDestination方法创建一个包含 MediaStream 的 MediaStreamDestination 节点。

然后，您只需将其全部连接起来，您就可以获得带有 MediaElement 音频的 MediaStream。

// wait for the video starts playing
vid.play().then(_=> {
  var ctx = new AudioContext();
  // create an source node from the <video>
  var source = ctx.createMediaElementSource(vid);
  // now a MediaStream destination node
  var stream_dest = ctx.createMediaStreamDestination();
  // connect the source to the MediaStream
  source.connect(stream_dest);
  // grab the real MediaStream
  out.srcObject = stream_dest.stream;
  out.play();
  });

The video's audio will be streamed to this audio elements : <br>
<audio id="out" controls></audio><br>
The original video element : <br>
<video id="vid" crossOrigin="anonymous" src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4?dl=0" autoplay></video>

请注意，您还可以将更多源连接到此流，并且还可以使用new MediaStream([stream1, stream2])构造函数将其与其他视频流组合（这是目前在 FF 上组合不同流的唯一方法，直到此错误修复为止，应该很快） ）。