Get Mediastreamtrack(audio) From Video

I want to record audio from video element alongside recording from canvas. I have var stream = canvas.captureStream(29); Now I am adding audioTrack of video to the stream. var vS

Solution 1:

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.

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 = newAudioContext();
  // create an source node from the <video>var source = ctx.createMediaElementSource(vid);
  // now a MediaStream destination nodevar 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><audioid="out"controls></audio><br>
The original video element : <br><videoid="vid"crossOrigin="anonymous"src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4?dl=0"autoplay></video>

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).