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

This article introduces the knowledge of "how to call the camera through html5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

HTML code section:

Take a picture

Next is the js code section:

Var video = document.getElementById ('video'); var canvas = document.getElementById (' canvas'); var capture = document.getElementById ('capture'); var context = canvas.getContext (' 2d'); function getUserMediaToPhoto (constraints,success,error) {if (navigator.mediaDevices.getUserMedia) {/ / latest standard API navigator.mediaDevices.getUserMedia (constraints). Then (success) .catch (error) } else if (navigator.webkitGetUserMedia) {/ / webkit core browser navigator.webkitGetUserMedia (constraints,success,error);} else if (navigator.mozGetUserMedia) {/ / firefox browser navigator.mozGetUserMedia (constraints,success,error);} else if (navigator.getUserMedia) {/ / legacy API navigator.getUserMedia (constraints,success,error) }} / / successful callback function function success (stream) {/ / compatible with webkit core browser var CompatibleURL = window.URL | | window.webkitURL; / / Source video.src for converting video stream to video video.src = CompatibleURL.createObjectURL (stream); video.play () / / play video} function error (error) {console.log ('failed to access user media:', error.name,error.message);} if (navigator.mediaDevices.getUserMedia | | navigator.webkitGetUserMedia | | navigator.mozGetUserMedia | | navigator.getUserMedia) {getUserMediaToPhoto ({video: {width:480,height:320}}, success,error);} else {alert ('your browser does not support access to user media devices') } capture.addEventListener ('click',function () {/ / depict the video picture on canvas canvas context.drawImage (video,0,0480320);})

It is worth noting that:

When you use it, you must turn on the camera on server, otherwise you can't use it! Because you are opening a webcam that belongs to the network, you need to open it on server.

At present, it seems that chrome and opera and most mobile devices support HTLM5 to turn on the camera. I successfully tested this on chrome.

Also, if it is not successful, it is likely that you accidentally turned off the permission of chrome to turn on the camera, and you just re-enable it!

This is the end of "how to call the camera through html5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.