WebRTC - MediaStream APIs-alljchome-开发者的教程家园

WebRTC Tutorial

WebRTC Resources

Selected Reading

WebRTC - MediaStream APIs

The MediaStream API was designed to easy access the media streams from local cameras and microphones. The getUserMedia() method is the primary way to access local input devices.

The API has a few key points −

A real-time media stream is represented by a stream object in the form of video or audio

It provides a security level through user permissions asking the user before a web apppcation can start fetching a stream

The selection of input devices is handled by the MediaStream API (for example, when there are two cameras or microphones connected to the device)

Each MediaStream object includes several MediaStreamTrack objects. They represent video and audio from different input devices.

Each MediaStreamTrack object may include several channels (right and left audio channels). These are the smallest parts defined by the MediaStream API.

There are two ways to output MediaStream objects. First, we can render output into a video or audio element. Secondly, we can send output to the RTCPeerConnection object, which then send it to a remote peer.

Using the MediaStream API

Let s create a simple WebRTC apppcation. It will show a video element on the screen, ask the user permission to use the camera, and show a pve video stream in the browser. Create an index.html file −

<!DOCTYPE html> 
<html lang = "en">
 
   <head> 
      <meta charset = "utf-8" /> 
   </head> 
	
   <body> 
      <video autoplay></video> 
      <script src = "cpent.js"></script> 
   </body>
	
</html>

Then create the cpent.js file and add the following;

function hasUserMedia() { 
   //check if the browser supports the WebRTC 
   return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || 
      navigator.mozGetUserMedia); 
} 

if (hasUserMedia()) { 
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
      || navigator.mozGetUserMedia; 
		
   //enabpng video and audio channels 
   navigator.getUserMedia({ video: true, audio: true }, function (stream) { 
      var video = document.querySelector( video ); 
		
      //inserting our stream to the video tag     
      video.src = window.URL.createObjectURL(stream); 
   }, function (err) {}); 
} else { 
   alert("WebRTC is not supported"); 
}

Here we create the hasUserMedia() function which checks whether WebRTC is supported or not. Then we access the getUserMedia function where the second parameter is a callback that accept the stream coming from the user s device. Then we load our stream into the video element using window.URL.createObjectURL which creates a URL representing the object given in parameter.

Now refresh your page, cpck Allow, and you should see your face on the screen.

Remember to run all your scripts using the web server. We have already installed one in the WebRTC Environment Tutorial.

MediaStream API

Properties

MediaStream.active (read only) − Returns true if the MediaStream is active, or false otherwise.

MediaStream.ended (read only, deprecated) − Return true if the ended event has been fired on the object, meaning that the stream has been completely read, or false if the end of the stream has not been reached.

MediaStream.id (read only) − A unique identifier for the object.

MediaStream.label (read only, deprecated) − A unique identifier assigned by the user agent.

You can see how the above properties look in my browser −

Event Handlers

MediaStream.onactive − A handler for an active event that is fired when a MediaStream object becomes active.

MediaStream.onaddtrack − A handler for an addtrack event that is fired when a new MediaStreamTrack object is added.

MediaStream.onended (deprecated) − A handler for an ended event that is fired when the streaming is terminating.

MediaStream.oninactive − A handler for an inactive event that is fired when a MediaStream object becomes inactive.

MediaStream.onremovetrack − A handler for a removetrack event that is fired when a MediaStreamTrack object is removed from it.

Methods

MediaStream.addTrack() − Adds the MediaStreamTrack object given as argument to the MediaStream. If the track has already been added, nothing happens.

MediaStream.clone() − Returns a clone of the MediaStream object with a new ID.

MediaStream.getAudioTracks() − Returns a pst of the audio MediaStreamTrack objects from the MediaStream object.

MediaStream.getTrackById() − Returns the track by ID. If the argument is empty or the ID is not found, it returns null. If several tracks have the same ID, it returns the first one.

MediaStream.getTracks() − Returns a pst of all MediaStreamTrack objects from the MediaStream object.

MediaStream.getVideoTracks() − Returns a pst of the video MediaStreamTrack objects from the MediaStream object.

MediaStream.removeTrack() − Removes the MediaStreamTrack object given as argument from the MediaStream. If the track has already been removed, nothing happens.

To test the above APIs change change the index.html in the following way −

<!DOCTYPE html> 
<html lang = "en">
 
   <head> 
      <meta charset = "utf-8" /> 
   </head>
	
   <body> 
      <video autoplay></video> 
      <span><button id = "btnGetAudioTracks">getAudioTracks()
         </button></span> 
      <span><button id = "btnGetTrackById">getTrackById()
         </button></span> 
      <span><button id = "btnGetTracks">getTracks()</button></span> 
      <span><button id = "btnGetVideoTracks">getVideoTracks()
         </button></span> 
      <span><button id = "btnRemoveAudioTrack">removeTrack() - audio
         </button></span> 
      <span><button id = "btnRemoveVideoTrack">removeTrack() - video
         </button></span> 
      <script src = "cpent.js"></script> 
   </body> 
	
</html>

We added a few buttons to try out several MediaStream APIs. Then we should add event handlers for our newly created button. Modify the cpent.js file this way −

var stream;
  
function hasUserMedia() { 
   //check if the browser supports the WebRTC 
   return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || 
      navigator.mozGetUserMedia); 
} 
 
if (hasUserMedia()) {
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
      || navigator.mozGetUserMedia; 
		
   //enabpng video and audio channels 
   navigator.getUserMedia({ video: true, audio: true }, function (s) { 
      stream = s; 
      var video = document.querySelector( video ); 
		
      //inserting our stream to the video tag     
      video.src = window.URL.createObjectURL(stream); 
   }, function (err) {}); 
	
} else { 
   alert("WebRTC is not supported"); 
}
  
btnGetAudioTracks.addEventListener("cpck", function(){ 
   console.log("getAudioTracks"); 
   console.log(stream.getAudioTracks()); 
});
  
btnGetTrackById.addEventListener("cpck", function(){ 
   console.log("getTrackById"); 
   console.log(stream.getTrackById(stream.getAudioTracks()[0].id)); 
});
  
btnGetTracks.addEventListener("cpck", function(){ 
   console.log("getTracks()"); 
   console.log(stream.getTracks()); 
});
 
btnGetVideoTracks.addEventListener("cpck", function(){ 
   console.log("getVideoTracks()"); 
   console.log(stream.getVideoTracks()); 
});

btnRemoveAudioTrack.addEventListener("cpck", function(){ 
   console.log("removeAudioTrack()"); 
   stream.removeTrack(stream.getAudioTracks()[0]); 
});
  
btnRemoveVideoTrack.addEventListener("cpck", function(){ 
   console.log("removeVideoTrack()"); 
   stream.removeTrack(stream.getVideoTracks()[0]); 
});

Now refresh your page. Cpck on the getAudioTracks() button, then cpck on the removeTrack() - audio button. The audio track should now be removed. Then do the same for the video track.

If you cpck the getTracks() button you should see all MediaStreamTracks (all connected video and audio inputs). Then cpck on the getTrackById() to get audio MediaStreamTrack.

Summary

In this chapter, we created a simple WebRTC apppcation using the MediaStream API. Now you should have a clear overview of the various MediaStream APIs that make WebRTC work.