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;// 新版使用媒体apiif(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) { // IEfile = document.getElementById('upload_file').value;} else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefoxfile = document.getElementById('upload_file').files.item(0)} else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chromefile = 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

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

H5调用手机摄像头，图片，视频等
限制只能选择图片 <input type="file" accept="image/*"> 限制只能选择视频 <input type=&quo ...
H5调用手机摄像头拍照，如何压缩后上传
H5调用手机摄像头拍照后,怎样压缩再上传? 实际的压缩功能,就是利用canvas画布功能,将图片进行裁剪后保存图片的base64数据流,然后上传. 案例全部代码,示下: <!DOCTYPE ht ...
H5调用手机摄像头，实时拍照上传（旧）
H5调用手机摄像头,完成拍照,实时上传(旧) 项目开发中,偶尔会遇到网页中调用手机摄像头,通过相册选择或直接实时拍照的方式,完成图片上传的功能型需求. 今天,就通过一个小的案例,演示一下完整的实现流程 ...
html5调用手机摄像头和相册,h5 调用手机摄像头/相册
html 部分 js 部分 getBase64: function (file, callback) { var maxWidth = 640 if (file.files && fi ...
h5调用手机摄像头/相册
<!DOCTYPE HTML><html><head> <title>上传图片</title> <meta charset=" ...
Python+OpenCV 调用手机摄像头并实现人脸识别
文章内容: 1.windows 环境下安装 OpenCV 机器视觉环境搭建: 2.基于通过 Python+OpenCV调用手机摄像头并实现人脸检测识别. 目录 1 实验环境 2 实验准备 2.1 下载 ...
OpenCV调用手机摄像头与人脸检测
文章目录一.OpenCV机器视觉环境搭建 1. OpenCV下载 2. OpenCV安装 3. 安装测试二.OpenCV调用摄像头及人脸检测 1. 调用电脑摄像头 2. 调用手机摄像头及人脸检测 ...
原生html调手机拍照,如何让HTML5调用手机摄像头拍照——实践就是一切
原文:如何让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家,学编程最重要的是实践,我这虽然有完善的代码,但是希望大家都可以自己写出属于自己的代码 HTML5 Th ...
html调起苹果手机摄像头_HTML5如何调用手机摄像头拍照实现方法介绍
HTML5如何调用安卓手机摄像头拍照实现方法介绍.HTML5 The Media Capture API提供了对摄像头的可编程访问,可以直接用getUserMedia获得摄像头提供的视频流.其实实际上 ...

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

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

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

最新文章

热门文章