How to use JS to call local camera

This time I will show you how to use JS to call the local camera, and what are the precautions to use JS to call the local camera. The following is a practical case, let's take a look.

Today I learned about using js to call a local camera. In fact, it is not very troublesome to implement. The following is the code part. Connect to the Tomcat server, and then open it on the web page to see the effect. . Come and have some fun!

nbsp;html>


<meta>
<title></title>
<style>
video {
 border: 1px solid #ccc;
 display: block;
 margin: 0 0 20px 0;
 float:left;
}
canvas {
 margin-top: 20px;
 border: 1px solid #ccc;
 display: block;
}
</style>


<video></video>
<canvas></canvas>
<button>截图</button>
<button>预览</button>
<button>
<a>另存为</a>
</button>

<script>
window.addEventListener(&#39;DOMContentLoaded&#39;,function(){
var cobj=document.getElementById(&#39;myCanvas&#39;).getContext(&#39;2d&#39;);
var vobj=document.getElementById(&#39;myVideo&#39;);
getUserMedia({video:true},function(stream){
vobj.src=stream;
vobj.play();
},function(){});
document.getElementById(&#39;myButton&#39;).addEventListener(&#39;click&#39;,function(){
cobj.drawImage(vobj,0,0,640,480);
document.getElementById(&#39;myButton3&#39;).children[0].href=cobj.canvas.toDataURL("image/png");
},false);
document.getElementById(&#39;myButton2&#39;).addEventListener(&#39;click&#39;,function(){
window.open(cobj.canvas.toDataURL("image/png"),&#39;_blank&#39;);
},false);
},false);
function getUserMedia(obj,success,error){
if(navigator.getUserMedia){
getUserMedia=function(obj,success,error){
navigator.getUserMedia(obj,function(stream){
success(stream);
},error);
}
}else if(navigator.webkitGetUserMedia){
getUserMedia=function(obj,success,error){
navigator.webkitGetUserMedia(obj,function(stream){
var _URL=window.URL || window.webkitURL;
success(_URL.createObjectURL(stream));
},error);
}
}else if(navigator.mozGetUserMedia){
getUserMedia=function(obj,success,error){
navigator.mozGetUserMedia(obj,function(stream){
success(window.URL.createObjectURL(stream));
},error);
}
}else{
return false;
}
return getUserMedia(obj,success,error);
}
</script>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to operate vue.js to use 3DES encryption

How to use JS to implement 3des base64 encryption and decryption algorithm

The above is the detailed content of How to use JS to call local camera. For more information, please follow other related articles on the PHP Chinese website!