h5调用手机摄像头获取图片用于人脸识别-Toy模板网

这篇具有很好参考价值的文章主要介绍了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文章来源地址https://www.toymoban.com/news/detail-507528.html

到了这里，关于h5调用手机摄像头获取图片用于人脸识别的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！