WebRTC Demo-getusermedia ()

Source: Internet
Author: User

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 ()

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.