js实现web调用摄像头 js截取视频画面

2023-08-24 09:06:05 201

varvideo=document.querySelector('video'); vartext=document.getElementById('text'); varcanvas1=document.getElementById('qr-canvas'); varcontext1=canvas1.getContext('2d'); varmediaStreamTrack; //一堆兼容代码 window.URL=(window.URL||window.webkitURL||window.mozURL||window.msURL); if(navigator.mediaDevices===undefined){ navigator.mediaDevices={}; } if(navigator.mediaDevices.getUserMedia===undefined){ navigator.mediaDevices.getUserMedia=function(constraints){ vargetUserMedia=navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia; if(!getUserMedia){ returnPromise.reject(newError('getUserMediaisnotimplementedinthisbrowser')); } returnnewPromise(function(resolve,reject){ getUserMedia.call(navigator,constraints,resolve,reject); }); } } //摄像头调用配置 varmediaOpts={ audio:false, video:true, video:{facingMode:"environment"}//或者"user" //video:{width:1280,height:720} //video:{facingMode:{exact:"environment"}}//或者"user" } //回调 functionsuccessFunc(stream){ mediaStreamTrack=stream; video=document.querySelector('video'); if("srcObject"invideo){ video.srcObject=stream }else{ video.src=window.URL&&window.URL.createObjectURL(stream)||stream } video.play(); } functionerrorFunc(err){ alert(err.name); } //正式启动摄像头 functionopenMedia(){ navigator.mediaDevices.getUserMedia(mediaOpts).then(successFunc).catch(errorFunc); } //关闭摄像头 functioncloseMedia(){ mediaStreamTrack.getVideoTracks().forEach(function(track){ track.stop(); context1.clearRect(0,0,context1.width,context1.height);//清除画布 }); } //截取视频 functiondrawMedia(){ canvas1.setAttribute("width",video.videoWidth); canvas1.setAttribute("height",video.videoHeight); context1.drawImage(video,0,0,video.videoWidth,video.videoHeight); }

js实现web调用摄像头 js截取视频画面

热门推荐

随机推荐