javascript - 从视频中获取 MediaStreamTrack(audio)

Question

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

var stream = canvas.captureStream(29);

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

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

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

Answer 1

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

然后您只需将它们连接起来，您就拥有了带有 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 上组合不同流的唯一方法，直到 this bug is fixed，不过应该很快。