Using HTML5 to take pictures sample code_html5 tutorial tips

Demo address: HTML5 photo taking demo
First, let’s take a look at the HTML code structure. Of course, this part of the DOM content should be dynamically loaded and generated after the user allows the use of their camera event.
Note: We use the resolution of 640X480. If you use JS to dynamically generate it, you can flexibly control the resolution.

Copy code

The code is as follows:

Snap Photo
< ;canvas id="canvas" width="640" height="480">

JavaScript
As long as the above HTML element is created, the JavaScript part will be simple It’s easier than you think:

Copy the code

The code is as follows:

/ / Set event listening, DOM content loading is completed, and the effect is similar to jQuery's $.ready().
window.addEventListener("DOMContentLoaded", function() {
// The canvas element will be used for capturing
var canvas = document.getElementById("canvas"),
context = canvas.getContext( "2d"),
// video element, which will be used to receive and play the camera's data stream
video = document.getElementById("video"),
videoObj = { "video": true },
// An error callback function, prints error information on the console
errBack = function(error) {
if("object" === typeof window.console){
console.log ("Video capture error: ", error.code);
}
};
// Put video listeners into place
// For standard browsers
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);
}
// Event monitoring for the photo button
document.getElementById("snap").addEventListener("click", function() {
/ / Draw to the canvas
context.drawImage(video, 0, 0, 640, 480);
});
}, false);

Finally, remember to say Put your web page under the web server and access it through the http protocol.
In addition, the browser version needs to be newer and support the new features of HTML5.
The translator is not qualified because he did not translate according to the original text. The browser used is chrome 28.
Finally, paste the complete code, which is rather dull.

Copy code

The code is as follows: