Use HTML5 technology to control the camera on your computer or phone (reproduced)

The client APIs on mobile devices and desktops are not initially synchronized. Initially, you always have some features and APIs on your mobile device, but slowly, these APIs appear on your desktop computer. One application interface technology is getUserMedia the API, which allows application developers to access the user's webcam or built-in camera. Let me show you how to access your webcam through a browser and extract screenshots.

Watch the Demo

HTML code

In the following code, I have written some comments, please read:

<!--Ideally we should first determine if there is a camera or camera on your device, but for simplicity, we write the HTML tag directly here instead of using JavaScript to determine and dynamically generate these tags. -<VideoID= "Video"width= "640"Height= "480"AutoPlay></Video><ButtonID= "Snap">Snap Photo</Button><CanvasID= "Canvas"width= "640"Height= "480"></Canvas>

Before writing these tags should determine whether the user's client has webcam support, but here in order to not be so troublesome, here directly write out these HTML tags, it should be noted that we use the length of the width is 640x480.

JavaScript code

Because we are hand-written HTML, the following JS code will be much simpler than you think.

//Put event listeners into placeWindow.addeventlistener ("domcontentloaded",function() {    //Grab elements, create settings, etc.    varCanvas = document.getElementById ("Canvas"), Context= Canvas.getcontext ("2d"), Video= document.getElementById ("video"), Videoobj= {"Video":true}, Errback=function(Error) {Console.log ("Video Capture Error:", Error.code);    }; //Put Video listeners into place    if(Navigator.getusermedia) {// StandardNavigator.getusermedia (Videoobj,function(stream) {video.src=stream;        Video.play ();    }, Errback); } Else if(Navigator.webkitgetusermedia) {//webkit-prefixedNavigator.webkitgetusermedia (Videoobj,function(stream) {video.src=Window.webkitURL.createObjectURL (stream);        Video.play ();    }, Errback); }    Else if(Navigator.mozgetusermedia) {//firefox-prefixedNavigator.mozgetusermedia (Videoobj,function(stream) {video.src=window.            Url.createobjecturl (stream);        Video.play ();    }, Errback); }}, false);

Once the user browser support is determined getUserMedia , the following is very simple, just need to video set that element to the src user's webcam video live connection. That's all the things you need to do with a browser to access the camera!

The function of taking pictures can only be said to be a little more complicated. We added a listener to the button to draw the video onto the canvas.

// trigger the photo action document.getElementById ("Snap"       ). AddEventListener (function() {    0, 0, 640, 480);});

Of course, you can also add some filter effect to the picture .... I'd better put these techniques in a later article. But at least you can convert this canvas image into a single image.

Watch the Demo

We used to use a third-party plugin to access the user's camera from the browser, which is complicated. Now with just HTML5 canvas technology and JavaScript, we can easily and quickly operate the user's camera. Not just access the camera, but also because HTML5 's canvas technology and its power, we can add a variety of attractive filter effects to the image. Now, take a picture of yourself in the browser with your own camera!

Citation: Http://www.webhek.com/browser-camera

Use HTML5 technology to control the camera on your computer or phone (reprint)