这次给大家带来JS调用本地摄像头功能步骤详解，JS调用本地摄像头功能的注意事项有哪些，下面就是实战案例，一起来看一下。
今天学习了一下js调用本地摄像头，其实是实现不是很麻烦，下面是代码部分，连接上Tomcat服务器，然后再到网页上打开即可以看到效果了。。快来玩一下吧！
video { border: 1px solid #ccc; display: block; margin: 0 0 20px 0; float:left;}canvas { margin-top: 20px; border: 1px solid #ccc; display: block;}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);}
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
JS实现json对象数组按对象属性排序步骤详解
JS实现碰撞检测步骤详解
以上就是JS调用本地摄像头功能步骤详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2759250.html
