从视频中获取 MediaStreamTrack(audio)答案

【问题标题】：Get MediaStreamTrack(audio) from Video从视频中获取 MediaStreamTrack(audio)
【发布时间】：2017-11-02 04:46:33
【问题描述】：

我想从视频元素录制音频以及从画布录制。我有

var stream = canvas.captureStream(29);

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

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

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

【问题讨论】：

标签： javascript html google-chrome audio video

【解决方案1】：

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

然后，您只需将它们全部连接起来，您的 MediaStream 就会与您的 MediaElement 的音频一起使用。

// 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 ，不过应该很快）。

【讨论】：