JS实现调用本地摄像头功能示例
程序员文章站
2022-04-29 16:33:06
本文实例讲述了js实现调用本地摄像头功能。分享给大家供大家参考，具体如下：
今天学习了一下js调用本地摄像头，其实是实现不是很麻烦，下面是代码部分，连接上tomcat服务...
本文实例讲述了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程序设计有所帮助。