从视频获取MediaStreamTrack(音频) [英] Get MediaStreamTrack(audio) from Video

问题描述

我想录制视频元素中的音频，同时录制画布中的音频.我有

I want to record audio from video element alongside recording from canvas. I have

var stream = canvas.captureStream(29);

现在，我要将视频的audioTrack添加到流中.

Now I am adding audioTrack of video to the stream.

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

但这会减慢每添加一个视频的性能.由于captureStream()在视频上非常繁重，因此还需要在Chrome中打开一个标志.有没有一种方法可以从视频元素仅创建音频MediaStream，而无需使用captureStream().

But this slows down the performance with every video added. As captureStream() is very heavy on video and it also requires a flag to be switched on in Chrome. Is there a way of creating only audio MediaStream from video element without using captureStream().

推荐答案

是的，您可以使用Web Audio API的方法

Yes, you can use the Web Audio API's method createMediaElementSource which will grab the audio from your mediaElement, and then the createMediaStreamDestination method, which will create an MediaStreamDestination node, which contains an MediaStream.

然后，您只需将其连接起来，即可将MediaStream与MediaElement的音频连接起来.

You then just have to connect it all, and you've got your MediaStream with your MediaElement's audio.

// 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上组合不同的流会很快).

Note that you could also connect more sources to this stream, and also that you can combine it with an other video stream with the new MediaStream([stream1, stream2]) Constructor (It's currently the only way to combine different streams on FF, until this bug is fixed, should be soon though).

这篇关于从视频获取MediaStreamTrack(音频)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！