js调用本地摄像头
2016-10-04 15:06
330 查看
今天学习了一下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>
相关文章推荐
- cocos2dx_js调用本地摄像头及相册
- JS实现调用本地摄像头功能示例
- js调用本地摄像头截图并用ajax上传至后台服务器完成交互
- js 调用本地摄像头报安全错误
- JS调用本地摄像头拍照(兼容各大浏览器及IE8+)
- FLASH 调用摄像头 JS中方法触发拍照,并将照片保存到本地文件夹
- Node.js调用本地摄像头拍摄上传
- js调用android本地代码失败 兼容问题
- js调用本地exe执行
- js调用本地exe
- PhoneGap(Cordova)之js调用本地native的方法 2
- PhoneGap(Cordova)之js调用本地native的方法
- js 调用本地exe的例子(支持IE内核的浏览器)
- WebView本地java方法和js之间的调用
- AIR应用 调用摄像头拍照并把照片保持到本地文件夹
- Android之调用本地摄像头
- JS设置打印页面并调用本地打印机打印页面
- iframe 大数据量传参 本地能调用远程页面 不存在跨域问题 js组件调用原理
- js 调用本地exe的例子
- JSON传数据,JSONP跨域(外域JS调用本地回调函数):需外域服务端支持