Combining audio and video tracks into new MediaStream

still vendor-prefixed with webkit:

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

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 newStream = 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   stream.getTracks().forEach(track => newStream.addTrack(track));   // now play stream locally, or stream it with RTCPeerConnection or Peerjs   let mediaPlayer = document.getElementById('player');   mediaPlayer.srcObject = newStream;})

The code above will prompt the user access to his/her microphone and camera, then once the user grants permission, it will run the callback giving us a stream, which is a MediaStream object. This MediaStream contains two tracks, one for audio and one for video. We then add each individual track to a brand new MediaStream object with addTrack, lastly, we put the newly created stream in an HTML element.

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