不支持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);