HTML call camera for photo and camera functions

There should be a lot of people know that our mobile phone has a function is "to capture intruders", it is plainly in the unlocking of the application if we lose the wrong password phone will call this function to achieve automatic photography.

In fact, there are a lot of our commonly used software on the mobile phone has similar features, such as sweeping the QR code, play the map ...

It's interesting, and today we're going to look at the mechanics of this feature, but we don't do it with Android, we do it with HTML5 and JavaScript, and the browser supports ie9+.

The layout is simple, which is to set up a "Take photo" button listener, call the camera video, and then display the image. (Requires user rights)

First, we want to allow the page width to be automatically adjusted, we add the viewport tag to the page header:

<meta name= "viewport" content= "width=device-width, initial-scale=1"/>

There is also a key knowledge, that is Getusermedia (get user multimedia).

Using this Getusermedia API, you can access multimedia devices, use the API with <video> and canvas elements, and capture many beautiful images in your browser.

So in addition to the video, there is audio, so the interface to become similar to {Video:true,audio:false}, you can set the audio and video access switch.

The Navigator object contains properties that describe the browser being used, which can be used for platform-specific configuration.

If the browser does not detect the camera, you will be prompted:

That's all right, let's take a look at the demo:

<! DOCTYPE html> <pead> <title>html5 getusermedia demo</title> <meta charset= "Utf-8" > & Lt;meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0"/> </pead> < body> <input type= "button" title= "Turn on camera" value= "Turn on Webcam" onclick= "Getmedia ();"/><br/> <video H eight= "120px" autoplay= "autoplay" ></video><pr/> <input type= "button" title= "Take pictures" value= "take pictures" onclick = "Getphoto ();"/><br/> <canvas id= "canvas1" height= "120px" ></canvas><pr/> <inpu T type= "button" title= "video" value= "video" onclick= "Getvedio ();"/><br/> <canvas id= "canvas2" height= "120px" & gt;</canvas> <script type= "Text/javascript" > var video = document.queryselector (' video '); var audio, Audiotype; var canvas1 = document.getElementById (' canvas1 '); var context1 = Canvas1.getcontext (' 2d '); var canvas2 = document.getElementById (' Canvas2 '); var context2 = Canvas2.getcontext (' 2d '); Navigator.getusermedia = Navigator.getusermedia | | Navigator.webkitgetusermedia | | Navigator.mozgetusermedia | | Navigator.msgetusermedia; Window. URL = window. URL | | Window.webkiturl | | Window.mozurl | | Window.msurl; var exarray = []; Storage device Source ID mediastreamtrack.getsources (function (Sourceinfos) {for (var i = 0; I! = Sourceinfos.leng Th ++i) {var sourceinfo = sourceinfos[i]; This will traverse the audio,video, so differentiate if (sourceinfo.kind = = = ' video ') {Exarray.push (sourceinf O.id); } } }); function Getmedia () {if (Navigator.getusermedia) {Navigator.getusermedia ({ ' Video ': {' optional ': [{' SourceID ': exarray[1]//0 for front camera, 1 for rear Reset }]}, ' Audio ': true}, Successfunc, er RORFUNC); Success is the callback function that gets succeeded} else {alert (' Native device media streaming (Getusermedia ) not supported in this browser. '); }} function Successfunc (stream) {//alert (' succeed to get media! '); if (video.mozsrcobject!== undefined) {//firefox, video.mozsrcobject is initially null, not undefined, we can rely on this to detect Firefox support Video.mozsrcobject = stream; } else {video.src = window. URL && window. Url.createobjecturl (stream) | | Stream }//video.play (); Sound audio = new audio (); Audiotype = Getaudiotype (audio); if (audiotype) {audio.src = ' polaroid. ' + Audiotype; Audio.play (); } } function Errorfunc (e) {alert (' error! ' +e); }//Draw the video frame onto the canvas object, canvas every 60ms toggle frame, form The naked eye video effect function Drawvideoatcanvas (video,context) { Window.setinterval (function () {context.drawimage (video, 0, 0,90,120); }, 60); }//Get audio Format function Getaudiotype (element) {if (element.canplaytype) {i F (Element.canplaytype (' Audio/mp4; codecs= "mp4a.40.5" ')!== ') {return (' AAC '); } else if (Element.canplaytype (' Audio/ogg; codecs= "Vorbis" ')!== ') {return ("Ogg"); }} return false; }//Vedio trigger when playing, draw vedio frame image to canvas//Video.addeventlistener (' Play ', function () {//DRAWVI Deoatcanvas (video, CONTEXT2); }, False); Photo function Getphoto () {context1.dRawimage (video, 0, 0,90,120); Draws the specified area of the video object to the specified area on the canvas for taking pictures. }//function Getvedio () {Drawvideoatcanvas (video, CONTEXT2); } </script> </body>

HTML call camera for photo and camera functions