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