HTML5 Canvas JS controls the camera on your computer or mobile phone instance

HTML5 Canvas JS controls the camera on your computer or mobile phone instance_html5 tutorial skills

WBOY

Release： 2016-05-16 15:47:56

Original

1702 people have browsed it

Client APIs on mobile devices and desktop computers are not initially synchronized. Initially, certain functions and corresponding APIs will always be available on mobile devices, but slowly, these APIs will appear on desktop computers. One such application interface technology is the getUserMedia API, which allows application developers to access the user's camera or built-in camera. Let me show you how to access your camera through a browser and extract screenshots.

HTML code

I wrote some comments in the code below, please read:

Copy the code

The code is as follows:

Before writing the above tags, you should determine whether the user's client has camera support, but in order to avoid trouble, these HTML tags are written directly here. It should be noted that the length and width we use here are 640×480.

JavaScript code

Because we wrote the HTML manually, the following js code is much simpler than you think.

Copy code

The code is as follows:

// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = 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) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);

Once it is determined that the user's browser supports getUserMedia, the following is very simple. You only need to set the src of the video element to the user's camera live video connection. That’s all you need to do to access the camera using your browser!

The function of taking pictures can only be said to be a little complicated. We add a listener to the button and draw the video screen to the canvas.

Copy code

The code is as follows:

//Trigger photo action
document.getElementById("snap")
.addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});

Of course, you can also add some filter effects to the picture…

In the past, we needed to use a third-party plug-in to access the user's camera from the browser, which was somewhat complicated. Now we only need HTML5 canvas technology and javaScript, we can operate the user's camera simply and quickly. Not only is it access to the camera, but also because of the powerful canvas technology of HTML5, we can add various charming filter effects to the pictures. Now, take a picture of yourself with your own camera in your browser!