js调用网络摄像头的方法
不支持IE浏览器(需要使用flash插件),支持移动端,未经过完全测试
PC端使用的时候,HTML页面需要预留video标签,canvas标签
移动端使用的时候,HTML页面需要预留file标签,canvas标签,img标签
(function(window,document){ window.camera={ init:function(options){ /** *options属性示例 *videoID:video控件ID *canvasID:canvas控件ID *fileID:type为file的input控件的ID *imageID:img控件的ID *videoEnable:是否启用摄像头 *audioEnable:是否启用麦克风 *videoWidth:视频宽度 *videoHeight:视频高度 *photoWidth:拍照宽度 *photoHeight:拍照高度 */ _options=options; if(isMobileTerminal()){ initMobileTerminal(); }else{ initComputerTerminal(); } }, photo:function(){ if(isMobileTerminal()){ photoMobileTerminal(); }else{ photoComputerTerminal(); } } }; let_options=null; functioninitComputerTerminal(){ letvideoDom=document.getElementById(_options.videoID); if(!videoDom){ alert('Video控件无效'); return; } letcanvasDom=document.getElementById(_options.canvasID); if(!canvasDom){ alert('Canvas控件无效'); return; } canvasDom.setAttribute('width',_options.photoWidth+'px'); canvasDom.setAttribute('height',_options.photoHeight+'px'); letparameters={ video:_options.videoEnable?{ width:_options.videoWidth, height:_options.videoHeight }:false, audio:_options.audioEnable }; navigator.mediaDevices.getUserMedia(parameters) .then(function(MediaStream){ video.srcObject=MediaStream; video.play(); }).catch(function(reason){ console.log(reason); alert(reason); }); } functionphotoComputerTerminal(){ letvideoDom=document.getElementById(_options.videoID); if(!videoDom){ alert('Video控件无效'); return; } letcanvasDom=document.getElementById(_options.canvasID); if(!canvasDom){ alert('Canvas控件无效'); return; } letcontext=canvasDom.getContext('2d'); context.drawImage(videoDom,0,0,_options.photoWidth,_options.photoHeight); } functioninitMobileTerminal(){ letfileDom=document.getElementById(_options.fileID); if(!fileDom){ alert('File控件无效'); return; } fileDom.setAttribute('accept','image/*'); fileDom.setAttribute('capture','camera'); letcanvasDom=document.getElementById(_options.canvasID); if(!canvasDom){ alert('Canvas控件无效'); return; } canvasDom.setAttribute('width',_options.photoWidth+'px'); canvasDom.setAttribute('height',_options.photoHeight+'px'); letimageDom=document.getElementById(_options.imageID); if(!imageDom){ alert('Image控件无效'); return; } fileDom.addEventListener('change',function(){ letfile=fileDom.files[0]; letreader=newFileReader(); reader.onloadend=function(){ imageDom.setAttribute('src',reader.result); setTimeout(function(){ letcontext=canvas.getContext("2d"); context.drawImage(imageDom,0,0,_options.photoWidth,_options.photoHeight); },300); }; reader.readAsDataURL(file); }); } functionphotoMobileTerminal(){ letfileDom=document.getElementById(_options.fileID); fileDom.click(); } functionisMobileTerminal(){ if(/AppleWebKit.*Mobile/i.test(navigator.userAgent)||/Mobile/.test(navigator.userAgent)||/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent)) return/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent); returnfalse; } })(window,document);
以上就是js调用网络摄像头的方法的详细内容,更多关于js调用网络摄像头的资料请关注毛票票其它相关文章!