Comments: HTML5 photo first, let's look at the HTML code structure. Of course, this part of DOM content should be dynamically loaded and generated after the user permits the use of the camera event, if you are interested, you can learn about the demo URL: HTML5 photo presentation
First, let's look at the HTML code structure. Of course, the DOM content of this part should be dynamically loaded and generated after the user permits the use of the camera event.
Note: We use a x resolution. If JS is used for dynamic generation, you can flexibly control the resolution.
The Code is as follows:
<! --
Declaration: This div should be dynamically generated after webcam is allowed
Width and height: 640*480. Of course, it can be dynamically controlled!
-->
<! --
Ideally these elements aren't created until it's confirmed that
Client supports video/camera, but for the sake of parameter strating
Elements involved, they are created with markup (not JavaScript)
-->
<Video id = "video" width = "640" height = "480" autoplay> </video>
<Button id = "snap"> Snap Photo </button>
<Canvas id = "canvas" width = "640" height = "480"> </canvas>
JavaScript
As long as the above HTML element is created, the JavaScript part will be simpler than you think:
The Code is as follows:
// Set event listening. DOM content loading is complete, which is similar to $. ready () of jQuery.
Window. addEventListener ("DOMContentLoaded", function (){
// The canvas element will be used for capturing
Var canvas = document. getElementById ("canvas "),
Context = canvas. getContext ("2d "),
// Video element, which is used to receive and play the stream of the camera
Video = document. getElementById ("video "),
VideoObj = {"video": true },
// An error callback function that 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 );
}
// Listens to the photo button events
Document. getElementById ("snap"). addEventListener ("click", function (){
// Draw the image to the canvas
Context. drawImage (video, 0, 0,640,480 );
});
}, False );
Finally, remember to put your webpage under the web server and access it through http.
In addition, the browser version is newer and supports new HTML5 features.
The translator is not competent, and has not translated it in the original text. The browser used is chrome 28.
Finally, paste the complete code, which is relatively dull.
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> browser webcamera </title>
<Meta name = "Generator" content = "EditPlus">
<Meta name = "Author" content = "renfufei@qq.com">
<Meta name = "Description" content = "inveted by: http://davidwalsh.name/browser-camera">
<Script>
// Set event listening. DOM content loading is complete, which is similar to $. ready () of jQuery.
Window. addEventListener ("DOMContentLoaded", function (){
// The canvas element will be used for capturing
Var canvas = document. getElementById ("canvas "),
Context = canvas. getContext ("2d "),
// Video element, which is used to receive and play the stream of the camera
Video = document. getElementById ("video "),
VideoObj = {"video": true },
// An error callback function that 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 );
}
// Listens to the photo button events
Document. getElementById ("snap"). addEventListener ("click", function (){
// Draw the image to the canvas
Context. drawImage (video, 0, 0,640,480 );
});
}, False );
</Script>
</Head>
<Body>
<Div>
<! --
Declaration: This div should be dynamically generated after webcam is allowed
Width and height: 640*480. Of course, it can be dynamically controlled!
-->
<! --
Ideally these elements aren't created until it's confirmed that
Client supports video/camera, but for the sake of parameter strating
Elements involved, they are created with markup (not JavaScript)
-->
<Video id = "video" width = "640" height = "480" autoplay> </video>
<Button id = "snap"> Snap Photo </button>
<Canvas id = "canvas" width = "640" height = "480"> </canvas>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
