Html5 separating audio stream from video stream

Question

Using userMedia I get a stream that contains both video and audio. Is there a way to separate them? Ie out of the one stream get 2 streams one that has only video and the other has only audio?

Answer 1

Use the MediaStream constructor to create new streams from the audio and video tracks:

let stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
audioStream = new MediaStream(stream.getAudioTracks());
videoStream = new MediaStream(stream.getVideoTracks());

Here's a working fiddle.