Combining audio and video tracks into new MediaStream

Question

I need to get create a MediaStream using audio and video from different MediaStreams. In Firefox, I can instantiate a new MediaStream from an Array of tracks:

Answer 1

still vendor-prefixed with webkit:

  var outputTracks = [];
  outputTracks = outputTracks.concat(outputAudioStream.getTracks());
  outputTracks = outputTracks.concat(outputVideoStream.getTracks());
  outputMediaStream = new webkitMediaStream(outputTracks);

Answer 2

Here is an updated solution for this issue,

According to the MediaStream api, one can add multiple tracks to the same MediaStream as following:

So say you got stream from getUserMedia:

const constraints = {audio: true, video: true}
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
   // stream is of MediaStream type
   let new_stream = new MediaStream()

   // getTracks method returns an array of all stream inputs
   // within a MediaStream object, in this case we have
   // two tracks, an audio and a video track
   let audio_track_from_stream = stream.getTracks()[0] 
   new_stream.addTrack(audio_track_from_stream)

   // now play stream locally, or stream it with RTCPeerConnection or Peerjs
   let speaker = document.getElementById('speaker')
   speaker.srcObject = new_stream;
})

The code above will prompt the user access to his/her microphone and camera, then once the user allows the usage, it will run the callback giving us a stream, which is a MediaStream object. This mediaStream contains two tracks, an audio and a video track. We then take one of those tracks (I assumed track retrieved on the 0 index was the audio track) and add that track to a brand new MediaStream object, then we put that stream in an HTML audio element.

You would do similar thing to add the video track to this new MediaStream object, just need to retrieve the track located at index 1 of stream.getTracks().

Note that it also works if you pass a CanvasCaptureMediaStreamTrack to addTrack method.

Hope it helps others with similar issues