欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS实现调用本地摄像头功能示例

程序员文章站 2022-11-12 23:30:25
本文实例讲述了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程序设计有所帮助。