这次给大家带来js调用本地摄像头功能步骤详解，js调用本地摄像头功能的注意事项有哪些，下面就是实战案例，一起来看一下。
今天学习了一下js调用本地摄像头，其实是实现不是很麻烦，下面是代码部分，连接上tomcat服务器，然后再到网页上打开即可以看到效果了。。快来玩一下吧！
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<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>
</head>
<body>
<video width="640" height="480" id="myvideo"></video>
<canvas width="640" height="480" id="mycanvas"></canvas>
<button id="mybutton">截图</button>
<button id="mybutton2">预览</button>
<button id="mybutton3">
<a download="video.png">另存为</a>
</button>
</body>
<script>
window.addeventlistener('domcontentloaded',function(){
var cobj=document.getelementbyid('mycanvas').getcontext('2d');
var vobj=document.getelementbyid('myvideo');
getusermedia({video:true},function(stream){
vobj.src=stream;
vobj.play();
},function(){});
document.getelementbyid('mybutton').addeventlistener('click',function(){
cobj.drawimage(vobj,0,0,640,480);
document.getelementbyid('mybutton3').children[0].href=cobj.canvas.todataurl(image/png);
},false);
document.getelementbyid('mybutton2').addeventlistener('click',function(){
window.open(cobj.canvas.todataurl(image/png),'_blank');
},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>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js实现json对象数组按对象属性排序步骤详解
js实现碰撞检测步骤详解
以上就是js调用本地摄像头功能步骤详解的详细内容。