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

2019-11-19 13:48:58

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：JS实现的3des+base64加密解密算法完整示例

下一篇：React全家桶环境搭建过程详解