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

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

前段时间，机缘巧合，了解了一手如何在前端页面中调用本机摄像头的方法。
使用了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);