发布时间：2025-12-10 22:45:04 浏览次数：1
调用摄像头
第一种方法navigator.getUserMedia用法详见mdn ,代码如下:
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>摄像头调用1</title></head><body><videoid="v"></video><script>!(function(){functionuserMedia(){returnnavigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia||null;}if(userMedia()){varconstraints={video:true,audio:false};varmedia=navigator.getUserMedia(constraints,function(stream){varv=document.getElementById('v');varurl=window.URL||window.webkitURL;v.src=url?url.createObjectURL(stream):stream;v.play();},function(error){console.log("ERROR");console.log(error);});}else{console.log("不支持");}})();</script></body></html>第二种方法navigator.mediaDevices.getUserMedia用法详见mdn。navigator.mediaDevices.getUserMedia 其实和第一种差不多,主要第二种返回是一个 Promise 对象,代码如下:
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>摄像头调用2</title></head><body><videoid="v"></video><script>!(function(){//老的浏览器可能根本没有实现mediaDevices,所以我们可以先设置一个空的对象if(navigator.mediaDevices===undefined){navigator.mediaDevices={};}if(navigator.mediaDevices.getUserMedia===undefined){navigator.mediaDevices.getUserMedia=function(constraints){//首先,如果有getUserMedia的话,就获得它vargetUserMedia=navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;//一些浏览器根本没实现它-那么就返回一个error到promise的reject来保持一个统一的接口if(!getUserMedia){returnPromise.reject(newError('getUserMediaisnotimplementedinthisbrowser'));}//否则,为老的navigator.getUserMedia方法包裹一个PromisereturnnewPromise(function(resolve,reject){getUserMedia.call(navigator,constraints,resolve,reject);});}}constconstraints={video:true,audio:false};letpromise=navigator.mediaDevices.getUserMedia(constraints);promise.then(stream=>{letv=document.getElementById('v');//旧的浏览器可能没有srcObjectif("srcObject"inv){v.srcObject=stream;}else{//防止再新的浏览器里使用它,应为它已经不再支持了v.src=window.URL.createObjectURL(stream);}v.onloadedmetadata=function(e){v.play();};}).catch(err=>{console.error(err.name+":"+err.message);})})();</script></body></html>拍照
思路是设置一个标志变量 videoPlaying 看看是否 video 有在 play,监听拍照按钮的点击事件,如果videoPlaying 为 true ,使用一个canvas 获取 video 的宽高(默认 canvas 是不显示的),然后使用 canvas 的drawImage,然后使用 canvas 的 toDataURL返回一个 data url,将这个 url,设置在一个 img 标签上即可?
第一种方法navigator.getUserMedia实现代码:
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>拍照1</title></head><body><buttonid="take">拍照</button><br/><videoid="v"style="width:640px;height:480px;"></video><canvasid="canvas"style="display:none;"></canvas><br/><imgsrc="http://placehold.it/640&text=Your%20image%20here%20..."id="photo"alt="photo"><script>!(function(){functionuserMedia(){returnnavigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia||null;}if(userMedia()){letvideoPlaying=false;letconstraints={video:true,audio:false};letvideo=document.getElementById('v');letmedia=navigator.getUserMedia(constraints,function(stream){leturl=window.URL||window.webkitURL;video.src=url?url.createObjectURL(stream):stream;video.play();videoPlaying=true;},function(error){console.log("ERROR");console.log(error);});document.getElementById('take').addEventListener('click',function(){if(videoPlaying){letcanvas=document.getElementById('canvas');canvas.width=video.videoWidth;canvas.height=video.videoHeight;canvas.getContext('2d').drawImage(video,0,0);letdata=canvas.toDataURL('image/webp');document.getElementById('photo').setAttribute('src',data);}},false);}else{console.log("不支持");}})();</script></body></html>第二种navigator.mediaDevices.getUserMedia实现方法:
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>拍照2</title></head><body><buttonid="take">拍照</button><br/><videoid="v"style="width:640px;height:480px;"></video><canvasid="canvas"style="display:none;"></canvas><br/><imgsrc="http://placehold.it/640&text=Your%20image%20here%20..."id="photo"alt="photo"><script>!(function(){//老的浏览器可能根本没有实现mediaDevices,所以我们可以先设置一个空的对象if(navigator.mediaDevices===undefined){navigator.mediaDevices={};}if(navigator.mediaDevices.getUserMedia===undefined){navigator.mediaDevices.getUserMedia=function(constraints){//首先,如果有getUserMedia的话,就获得它vargetUserMedia=navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;//一些浏览器根本没实现它-那么就返回一个error到promise的reject来保持一个统一的接口if(!getUserMedia){returnPromise.reject(newError('getUserMediaisnotimplementedinthisbrowser'));}//否则,为老的navigator.getUserMedia方法包裹一个PromisereturnnewPromise(function(resolve,reject){getUserMedia.call(navigator,constraints,resolve,reject);});}}constconstraints={video:true,audio:false};letvideoPlaying=false;letv=document.getElementById('v');letpromise=navigator.mediaDevices.getUserMedia(constraints);promise.then(stream=>{//旧的浏览器可能没有srcObjectif("srcObject"inv){v.srcObject=stream;}else{//防止再新的浏览器里使用它,应为它已经不再支持了v.src=window.URL.createObjectURL(stream);}v.onloadedmetadata=function(e){v.play();videoPlaying=true;};}).catch(err=>{console.error(err.name+":"+err.message);})document.getElementById('take').addEventListener('click',function(){if(videoPlaying){letcanvas=document.getElementById('canvas');canvas.width=v.videoWidth;canvas.height=v.videoHeight;canvas.getContext('2d').drawImage(v,0,0);letdata=canvas.toDataURL('image/webp');document.getElementById('photo').setAttribute('src',data);}},false);})();</script></body></html>
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流