Question

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

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。

然后您只需将其全部连接起来，并且您已将MediaStream与MediaElement的音频相关联。

＆＃13;

// 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();
  });

＆＃13;

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>

＆＃13;

请注意，您还可以将更多源连接到此流，还可以将其与其他视频流与new MediaStream([stream1, stream2])构造函数结合使用（目前它是组合不同流的唯一方法FF，直到this bug is fixed，应尽快）。

从视频

1 个答案: