Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to achieve HTML5 Canvas+JS to control the camera on a computer or mobile phone". In daily operation, I believe many people have doubts about how to achieve HTML5 Canvas+JS to control the camera on a computer or mobile phone. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for everyone to answer the question of "how to achieve HTML5 Canvas+JS to control the camera on a computer or mobile phone". Next, please follow the editor to study!

HTML code

I have written some comments in the following code, please read:

The code is as follows:

Snap Photo

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

JavaScript code

Because we wrote the HTML by hand, the following js code will be 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.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, it is very simple to set the src of that video element to the user's camera live video connection. This is all you need to do to access the camera with a browser!

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

The code is as follows:

/ / trigger photo action

Document.getElementById ("snap")

.addEventListener ("click", function () {

Context.drawImage (video, 0,0,640,480)

});

At this point, the study on "how to achieve HTML5 Canvas+JS to control the camera on a computer or mobile phone" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.