Comment: Take a photo at HTML5 First of all, let’s take a look at the HTML code structure. Of course, this part of the DOM content should be dynamically loaded after the user allows the use of their camera events. Interested friends can learn about it.
Demo address: HTML5 photo demonstrationFirst, let's look at the HTML code structure. Of course, this part of the DOM content should be dynamically loaded after the user allows the use of their camera events to start.
Note: We use the resolution of 640X480. If you use JS dynamic generation, you can flexibly control the resolution.
<!--
Statement: This div should be dynamically generated after allowing webcam, webcam
Width and height: 640 * 480, of course, it can be controlled dynamically!
-->
<!--
Ideally these elements aren't created until it's confirmed that the
client supports video/camera, but for the sake of illustrating the
elements involved, they are created with markup (not JavaScript)
-->
<video autoplay></video>
<button>Snap Photo</button>
<canvas></canvas>
JavaScript
As long as the above HTML element is created, the JavaScript part will be simpler than you think:
// Set event listening, DOM content is loaded, which is similar to jQuery's $.ready() effect.
window.addEventListener("DOMContentLoaded", function() {
// The canvas element will be used for capture
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
// video element, to receive and play the data stream of the camera
video = document.getElementById("video"),
videoObj = { "video": true },
// An error callback function prints error message 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);
}
// Listen to the event of the photo button
document.getElementById("snap").addEventListener("click", function() {
// Draw on the canvas
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
Finally, remember to 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 supports new HTML5-related features.
The translator is not qualified and has not translated according to the original text. The browser used is Chrome 28.
Finally, post the complete code, which is more rigid.
<!DOCTYPE html>
<html>
<head>
<title> Browser webcamera </title>
<meta content="EditPlus">
<meta content="[email protected]">
<meta content="inveted by: ">
<script>
// Set event listening, DOM content is loaded, which is similar to jQuery's $.ready() effect.
window.addEventListener("DOMContentLoaded", function() {
// The canvas element will be used for capture
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
// video element, to receive and play the data stream of the camera
video = document.getElementById("video"),
videoObj = { "video": true },
// An error callback function prints error message 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);
}
// Listen to the event of the photo button
document.getElementById("snap").addEventListener("click", function() {
// Draw on the canvas
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>
</head>
<body>
<div>
<!--
Statement: This div should be dynamically generated after allowing webcam, webcam
Width and height: 640 * 480, of course, it can be controlled dynamically!
-->
<!--
Ideally these elements aren't created until it's confirmed that the
client supports video/camera, but for the sake of illustrating the
elements involved, they are created with markup (not JavaScript)
-->
<video autoplay></video>
<button>Snap Photo</button>
<canvas></canvas>
</div>
</body>
</html>