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程序设计有所帮助。