在前端页面中调用本机的摄像头

今天药忘吃喽~ 2022-01-20 11:49 892阅读 0赞

## 如何在页面中调用本机的摄像头 ##

前段时间，机缘巧合，了解了一手如何在前端页面中调用本机摄像头的方法。  
使用了navigator.mediaDevices.getUserMedia()的方法，具体可以参考[MDN][]  
首先要准备一个video标签，用来存放摄像头捕捉到的画面  
还要准备一个canvas，用来存放拍下的照片

//用来匹配不同的浏览器
    		function getUserMedia(constraints,success,error){
    			if(navigator.mediaDevices.getUserMedia){
    				navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
    			}else if (navigator.webkitGetUserMedia) {
    				navigator.webkitGetUserMedia(constraints,success,error);
    			}else if (navigator.mozGetUserMedia) {
    				navigator.mozGetUserMedia(constraints,success,error);
    			}else if (navigator.getUserMedia) {
    				navigator.getUserMedia(constraints,success,error)
    			}
    		}
    		
    		let video = document.getElementById('video');
    		let canvas = document.getElementById('canvas');
    		let context = canvas.getContext('2d');
    		//成功回调
    		function success(stream){
    			video.srcObject = stream;
    			video.play();
    		}
    		//失败回调
    		function error(error) {
    			console.log("访问用户媒体失败");
    		}
    		//开启摄像头
    		if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
    			getUserMedia({video:{width:500,height:500}},success,error)
    		}else {
    			alert("不支持");
    		}
    		//实现拍照的功能
    		document.getElementById('snap').addEventListener('click',function(){
    			context.drawImage(video,0,0,500,500);
    		});

如果需要将拍下来的图片传送给服务器，那么还需要将图片转成base64码

imgData = canvas.toDataURL();
    			var photo = imgData.substr(22);

[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia