WebRTC Demo-getusermedia ()

WEBRTC Introduction

WEBRTC provides three types of APIs:

• MediaStream, namely Getusermedia
• Rtcpeerconnection
• Rtcdatachannel

Getusermedia has been supported by Chrome, opera and Firefox.

rtcpeerconnection is currently supported by Chrome, opera and Firefox. Chrome and opera provide an interface named Webkitrtcpeerconnection,firefox with the name Mozrtcpeerconnection.

Rtcdatachannel is only available in Chrome, Opera 18 and Firefox 22 and later.

a WEBRTC application needs to do several things :

• Get stream (streaming), including audio, video, and other data
• Get network information, such as IP and port, and exchange information with other WEBRTC clients, sometimes through firewalls or NAT
• Signaling (signaling) for reporting errors, initializing, or shutting down sessions
• Exchange of multimedia and client support capabilities such as resolution, codec information, etc.
• Stream communication

MediaStream (Getusermedia)

Each mediastream has a single input and output. The input can be a multimedia stream generated by Navigator.getusermedia (). The output can be either a HTML5 video element or a rtcpeerconnection.

Let's look at a simple example.

The contents of the index.html file are as follows:

<! DOCTYPE html>
The index.html consists primarily of a video element and a main.js file. The video element responsible for outputting Getusermedia generated mediastream;main.js is the main code code logic.
The contents of the Main.js file are as follows:
Global variables, the Inspector console can view the video = Document.queryselector ("video"); Get video Element refconstraints = {audio:false, video:true}; only need Videonavigator.getusermedia = Navigator.getusermedia | | Navigator.webkitgetusermedia | | navigator.mozgetusermedia;/** * Successcallback * Getuermedia When a mediastream is successfully obtained, this method is recalled **/function SuccessCallback ( Stream) {  window.stream = stream;//stream available to console  if (window. URL) {//Generate the address of the video stream as input    video.src = window. Url.createobjecturl (stream);  } else {    video.src = stream;  }} function Errorcallback (Error) {  console.log ("Navigator.getusermedia Error:", error);} Navigator.getusermedia (Constraints, Successcallback, errorcallback);
Click to see Demo.
The Getusermedia () method requires three parameters:

 
 

  
  
 
   
A constraint object, such as constraints in Main.js
 
   
A success callback, when successful, will callback this method, the parameter is a MediaStream
 
   
An error callback, when failed, will callback this method, the parameter is an Error object
 
  
 
 
MediaStream is comprised of id,label,mediastreamtracks (video tracks and audio tracks). Readers can view the Window.stream object in the console to understand its composition and methods.
In Chrome and opera, the Url.createobjecturl () method converts a mediastream into a blob URL. This allows the video element to use this address as its input.
WebRTC Demo-getusermedia ()