本文实例讲述了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>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript+HTML5特效与技巧汇总》、《JavaScript图片操作技巧大全》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
© 版权声明
THE END
暂无评论内容