WEBRTC study ——— Record a

Recently, the tutor asked to study WebRTC, hoping to use our ICT2 system in the future.

But never did the foundation of the web, whether front-end or back-end, HTML, JS all learn from the beginning. HTML is good to say, not too complicated things.

JS is a bit difficult, roughly turned over the JS authoritative guide book, understand the basic grammar, also is enough to deal with. But it's completely out of the picture of the various objects built into the browser.

Only slowly familiar, step by step.

The first section gets Webcamera

This is relatively simple, mainly using the Getusermedia () function. Here is the information obtained from the Internet:

1, Navigator.getusermedia ()

Prompts the user for permission to use a media device such as a camera or microphone. If the user provides this permission, the Successcallback function is called and receives a Localmediastream object as a parameter.

navigator.getUserMedia ( constraints, successCallback, errorCallback );

Example

The following uses the browser prefix to invoke Getusermedia ().

Navigator. Getmedia=(Navigator. Getusermedia|| Navigator. Webkitgetusermedia|| Navigator. Mozgetusermedia|| Navigator. Msgetusermedia); navigator. Getmedia(Constraints{Video:True, audio:True},Successcallbackfunction(Localmediastream){var video= document.Queryselector(' Video '); Video. src= window. Url.Createobjecturl(Localmediastream); Video. onloadedmetadata=function(E) { //do something with the video here. }; }, //Errorcallback function(err) {console.  Log("The following error occured:" + err); }); 

Parameters

Parameters	whether you must	Description
Constraints	Have to	The media types that are supported by the Localmediastream object that is passed in Successcallback.
Successcallback	Have to	The function that fires when an Localmediastream object is passed in the app.
Errorcallback	Options available	The function that is triggered when the media device fails to invoke.

Constraints

The constraints parameter is a Mediastreamconstraints object that contains two members with a Boolean value: video and audio . This parameter describes the type of media supported by the Localmediastream object and, when used, You need to specify a type or two type in the constraints parameter. If a particular type is not supported by the browser, Getusermedia calls the Errorcallback function and passes in the error type Not_supported_error. If the browser does not get a specific type of audio or video stream, Getusermedia calls the Errorcallback function and passes in the error type Mandatory_unsatisfied_err.

If a media type is not specified, his value defaults to false. The following example describes how to set the constraints function to receive audio and video:

{ video: true, audio: true }

Successcallback

The Getusermedia function calls Successcallback and passes in the Localmediastream object, which contains the media stream. You can assign this object to the appropriate element and then process it, just as the following example does.

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

Errorcallback

The Getusermedia function calls Errorcallback when it contains a code parameter, as follows:

Error	Description
Permission_denied	User denied permission to request media from browser
Not_supported_error	The media type specified in constraint is not supported
Mandatory_unsatisfied_error	Media stream not received by the specified media type

Reference Https://developer.mozilla.org/zh-CN/docs/WebRTC/navigator.getUserMedia

WEBRTC study ——— Record a