这次给大家带来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},functionstream){
vobj.src=stream;
vobj.play);
},function){});
document.getElementById'myButton').addEventListener'click',function){
cobj.drawImagevobj,0,0,640,480);
document.getElementById'myButton3').children[0].href=cobj.canvas.toDataURL"image/png");
},false);
document.getElementById'myButton2').addEventListener'click',function){
window.opencobj.canvas.toDataURL"image/png"),'_blank');
},false);
},false);
function getUserMediaobj,success,error){
ifnavigator.getUserMedia){
getUserMedia=functionobj,success,error){
navigator.getUserMediaobj,functionstream){
successstream);
},error);
}
}else ifnavigator.webkitGetUserMedia){
getUserMedia=functionobj,success,error){
navigator.webkitGetUserMediaobj,functionstream){
var _URL=window.URL || window.webkitURL;
success_URL.createObjectURLstream));
},error);
}
}else ifnavigator.mozGetUserMedia){
getUserMedia=functionobj,success,error){
navigator.mozGetUserMediaobj,functionstream){
successwindow.URL.createObjectURLstream));
},error);
}
}else{
return false;
}
return getUserMediaobj,success,error);
}
</script>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注风君子博客其它相关文章！
推荐阅读：
JS实现json对象数组按对象属性排序步骤详解
JS实现碰撞检测步骤详解
以上就是JS调用本地摄像头功能步骤详解的详细内容，更多请关注风君子博客其它相关文章！