HTML5 Canvas + JS controls camera instances on computers or mobile phones

Comments: The client APIs on mobile devices and desktops are not synchronized at first. Initially, mobile devices always have certain functions and corresponding APIs first, but slowly, these Apis will appear on the desktop. One of the application interface technologies is the getUserMedia API, which allows application developers to access users' cameras or built-in cameras.

The client APIs on mobile devices and desktops were not synchronized at first. Initially, mobile devices always have certain functions and corresponding APIs first, but slowly, these Apis will appear on the desktop. One of the application interface technologies is the getUserMedia API, which allows application developers to access users' cameras or built-in cameras. Next let me show you how to access your camera through a browser and extract screenshots.

HTML code

I have written some comments in the following code. Please read:

The Code is as follows:
<! --
Ideally, we should first determine whether your device is on
There are cameras or cameras, but for the sake of simplicity, We are here directly
Write the HTML Tag, instead of using JavaScript to judge first
Then dynamically generate these tags
-->
<Video id = "video" width = "640" height = "480" autoplay> </video>
<Button id = "snap"> Snap Photo </button>
<Canvas id = "canvas" width = "640" height = "480"> </canvas>
Before writing the above tags, you should determine whether the user's client has camera support. However, in order to be less troublesome, these HTML tags are directly written here, note that the length and width used here are 640x480.

JavaScript code

Because we write HTML manually, the following js Code is much simpler than you think.

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. Define getusermedia (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 live video connection of the user's camera. This is what you need to do to access the camera through a browser!

The photo taking function is a little more complicated. We add a listener to the button to draw the video image to the canvas.

The Code is as follows:
// Trigger the 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 image ....

In the past, we had to use third-party plug-ins to access users' cameras from browsers. This was a little complicated. Now we only need HTML5 canvas technology and javaScript, so that we can operate users' cameras easily and quickly. Not only access the camera, but also because of the powerful canvas Technology of HTML5, we can add various fascinating filter effects to the image. Now, use your own camera in your browser to take a picture of yourself!