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

Advertisements

About Rishi Khandelwal

Sr. Software Consultant having more than 6 years industry experience. He has working experience in various technologies such as Scala, Java, Play, Akka, Spark, Hive, Cassandra, Akka-http, ElasticSearch, Backbone.js, html5, javascript, Less, Amazon EC2, WebRTC, SBT
This entry was posted in CSS, JavaScript, jQuery, Scala, Web. Bookmark the permalink.

One Response to How to remove video/audio tracks from MediaStream in WebRTC

  1. Johnnys' says:

    79 lines of code just to disable audio or video!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s