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:

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

Unfortunately, this doesn't work in Chrome:

ReferenceError: MediaStream is not defined

Is there an alternative method in Chrome for combining tracks from separate streams?

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:

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

Unfortunately, this doesn't work in Chrome:

ReferenceError: MediaStream is not defined

Is there an alternative method in Chrome for combining tracks from separate streams?

• javascript
• google-chrome
• webrtc
• chromium
• web-audio-api

2 Answers 2

  var outputTracks = [];
  outputTracks = outputTracks.concat(outputAudioStream.getTracks());
  outputTracks = outputTracks.concat(outputVideoStream.getTracks());
  outputMediaStream = new MediaStream(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.