从视频中获取MediaStreamTrack(音频)

Question

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

var stream = canvas.captureStream(29);

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

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

但这会降低添加每个视频的性能。由于captureStream()在视频上非常繁重，并且它还需要在Chrome中打开一个标志。有没有办法只从视频元素创建音频媒体流而不使用 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 上组合不同流的唯一方法，直到此错误得到修复，应该很快)。