h5调用手机摄像头获取图片用于人脸识别

h5调用手机摄像头获取图片用于人脸识别

1、安卓手机获取前置摄像头，并在video标签显示
注：navigator.mediaDevices.getUserMedia文档说明兼容Safari11，实测不好用

        function InitMedia(){
        	let video = document.getElementById('video');
        	let option = {
					video: {
						width: 200,
						height: 200,
						facingMode:  "user" //  user:获取前置摄像头，environment:获取后置摄像头
					}, //使用摄像头对象
					audio: false //音频 
				}};
        	// 旧版使用媒体Api已废弃，主要用于浏览器向后兼容
        	navigator.getMedia =navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
			// 新版使用媒体api
			if(navigator.mediaDevices.getUserMedia){
				navigator.mediaDevices.getUserMedia(option).then((strem)=>{
					try {
						if('srcObject' in video){ video.srcObject = strem; }
						else{ video.src = window.URL.createObjectURL(strem);  }
					} catch (error) {
						console.error(`${err.name}: ${err.message}`);
					}
					video.play();
					// 通过canvas定时获取video画面传给后台
					// getface();
					// interval=setInterval(getface,2000); 
				}).catch((err) => {
					$.toast('error')
					console.error(`${err.name}: ${err.message}`);
				});
			}else if(navigator.getMedia){
				navigator.getMedia(option, function(strem) {
					try {
						if('srcObject' in video){ video.srcObject = strem; }
						else{ video.src = window.URL.createObjectURL(strem);  }
					} catch (error) {
						console.error(`${err.name}: ${err.message}`);
					}
					video.play();
					// getface();
					// interval=setInterval(getface,2000);
				}, function(error) {
					setTimeout(()=>{ InitMedia();}, 200);
				});
			}else{
				console.log('浏览器不支持getUserMedia');
			}
        }

2、苹果手机获取前置摄像头拍照上传，用于人脸识别
注：该方法在安卓手机也可使用

		//  使用input获取苹果前置摄像头
		<input type="file" id='upload_file' accept="image/*" capture='user'>
		// js部分
		// exif获取图片旋转值
		<script type="text/javascript" src="../js/exif.js" ></script>
		<script type="text/javascript" src="../js/rotate-photo.js" ></script>
		jQuery('#upload_file').change(function () {
			let url = '', imgbase64 = '', file = '';
			//获取file对象URL 
			if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE
				file = document.getElementById('upload_file').value;
			} else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox
				file = document.getElementById('upload_file').files.item(0)
			} else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome
				file = document.getElementById('upload_file').files[0];
			}else{
				file = document.getElementById('upload_file').files[0];
			}
			// 用exif.js和canvas解决部分型号手机拍照照片旋转90度的问题
			// imgFile旋转后的图片
			rotatePhoto(file, function(imgFile){
				url = window.URL.createObjectURL(imgFile);
				let image = document.getElementById('imgFace');
				image.src = url;
				// image.onload = function () {
				// 	imgbase64 = getBase64Image(image); // 获取base64图片数据
				// 	uploadFace(imgbase64); // 上传图片到后台
				// } 
			})
		});

3、附件
//exif.js
exif.js
//rotate-photo.js
rotate-photo.js