How to remove video/audio tracks from MediaStream in WebRTC

WebRTC (Web Real-Time Communication) is an API definition drafted by the World Wide Web Consortium (W3C) that supports browser-to-browser applications for voice calling, video chat, and P2P file sharing without plugins.

Now in this blog, I am going to explain that if we have a mediastream containing both audio and video and at some point of time we want to remove one of the track i.e. either video or audio, then how can we do this.
First of all, we will get the mediastream by following code :

navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);

if (navigator.getUserMedia) {
navigator.getUserMedia (

// constraints
{
video: true,
audio: true
},

// successCallback
function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
// Do something with the video here, e.g. video.play()
},

// errorCallback
function(err) {
console.log("The following error occured: " + err);
}
);
} else {
console.log("getUserMedia not supported");
}

Here, as you can see, the option audio and video in above code both are true,

// constraints
{
video: true,
audio: true
},

It means the mediastream which getUserMedia will capture will contain both audio and video.

Now we want to remove a track from mediastream. So for this we should have the reference of that mediastream first.
So now, we will define a global variable and when we will get the stream from getUserMedia, we will assign the stream to that variable.

var userStream;

// After getting the stream
userStream = localMediaStream;

To remove audio track :

var audioTrack = userStream.getAudioTracks();

if (audioTrack.length > 0) {

userStream.removeTrack(audioTrack[0]);

var video = document.querySelector('video');
video.src = window.URL.createObjectURL(userStream);

}

To remove video track :

var videoTrack = userStream.getVideoTracks();

if (videoTrack.length > 0) {

userStream.removeTrack(videoTrack[0]);

var video = document.querySelector('video');
video.src = window.URL.createObjectURL(userStream);

}

It will remove video track from mediastream but we will get a black screen.

If we want to remove black screen as well then we have 2 options for this.
1. Make css property display : none for video element.

$('video').css('display', 'none');

OR
2. Add new mediastream URL (without video track) in audio element of HTML5 instead of video element and make src of video element to empty.

var audio = document.querySelector('audio');
audio.src = window.URL.createObjectURL(userStream);

$('video').attr('src', '');

You can get full code here