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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With