Html5调用手机摄像头并实现人脸识别

需求

混合App开发，原生壳子+webApp，在web部分调用原生摄像头功能并且在网页指定区域显示摄像头内容，同时可以手动拍照并进行人脸识别，将识别结果显示在网页上。

技术栈

vue、Html5、video标签、Android、IOS、百度AI

分析

1、使用navigator.mediaDevices.getUserMedia调用系统原生摄像头功能
2、video标签显示摄像头内容
3、canvas标签获取图片
4、将图像上传服务器，通过百度AI识别图片
5、web显示识别结果

核心代码

1、调用系统原生摄像头功能并使用video标签显示

 html:<videoid="webcam":style="videoStyle":width="videoWidth":height="videoHeight"looppreload></video>

JavaScript：initVideo() {let that = this;this.video = document.getElementById("webcam");setTimeout(() => {if (navigator.mediaDevices.getUserMedia ||navigator.getUserMedia ||navigator.webkitGetUserMedia ||navigator.mozGetUserMedia) {//调用用户媒体设备, 访问摄像头this.getUserMedia({video: {width: {ideal: that.videoWidth,max: that.videoWidth},height: {ideal: that.videoHeight,max: that.videoHeight},facingMode: "user",    //前置摄像头frameRate: {ideal: 30,min: 10}}},this.videoSuccess,this.videoError);} else {this.$toast.center("摄像头打开失败,请检查权限设置!");}}, 300);},getUserMedia(constraints, success, error) {if (navigator.mediaDevices.getUserMedia) {//最新的标准APInavigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);} else if (navigator.webkitGetUserMedia) {//webkit核心浏览器navigator.webkitGetUserMedia(constraints, success, error);} else if (navigator.mozGetUserMedia) {//firfox浏览器navigator.mozGetUserMedia(constraints, success, error);} else if (navigator.getUserMedia) {//旧版APInavigator.getUserMedia(constraints, success, error);}},videoSuccess(stream) {this.mediaStreamTrack = stream;this.video.srcObject = stream;this.video.play();},videoError(error) {console.error(error);this.$toast.center("摄像头打开失败,请检查权限设置!");},

2、canvas获取摄像头图片

JavaScript：this.canvas = document.createElement("canvas");....let context = this.canvas.getContext("2d");context.drawImage(this.video, 0, 0, this.videoWidth, this.videoHeight);this.imgSrc = this.canvas.toDataURL("image/png");

3、调用百度AI识别图片

JavaScript：let that = this;let base64Data = this.canvas.toDataURL();let blob = this.dataURItoBlob(base64Data);           //var file = new FormData();file.append("file", blob);file.append("key", that.uuid);util.ajax.post("XXXXXXXXXX", file, {headers: {"Content-Type": "multipart/form-data"}}).then(function(response) {if ((response.status = 200)) {.....识别成功，显示结果} else {......识别失败}}).catch(function(error) {console.error(error);});//base64转换为BlobdataURItoBlob(base64Data) {var byteString;if (base64Data.split(",")[0].indexOf("base64") >= 0)byteString = atob(base64Data.split(",")[1]);else byteString = unescape(base64Data.split(",")[1]);var mimeString = base64Data.split(",")[0].split(":")[1].split(";")[0];var ia = new Uint8Array(byteString.length);for (var i = 0; i < byteString.length; i++) {ia[i] = byteString.charCodeAt(i);}return new Blob([ia], { type: mimeString });},

手机适配

1、由于Android6之后，Android的权限管理出现变化，Android原生的壳子，需要做如下处理：

myWebView.setWebChromeClient(new WebChromeClient() {@TargetApi(Build.VERSION_CODES.LOLLIPOP)@Overridepublic void onPermissionRequest(final PermissionRequest request) {request.grant(request.getResources());}
});

2、IOS系统，Safari11之后可用
3、OverconstrainedError错误，部分Android手机会报OverconstrainedError错误，原因是摄像头参数设置不合理，找不到指定设置。

我的视频课

下面是我录制的一些视频课，欢迎大家围观~

好家伙，随手就是一个赞~

给作者买瓶咖啡提提神~

Html5调用手机摄像头并实现人脸识别相关推荐

Python+OpenCV 调用手机摄像头并实现人脸识别
文章内容: 1.windows 环境下安装 OpenCV 机器视觉环境搭建: 2.基于通过 Python+OpenCV调用手机摄像头并实现人脸检测识别. 目录 1 实验环境 2 实验准备 2.1 下载 ...
基于opencv第三方视觉库，通过内网IP调用手机摄像头，实现人脸识别与图形监测
1. 安装opencv视觉库 OpenCV 是一个开源的计算机视觉库,OpenCV 库用C语言和 C++ 语言编写,可以在 Windows.Linux.Mac OS X 等系统运行.同时也在积极开发 ...
html5 调用手机摄像头详解
html5 调用手机摄像头详解首先,我们看看HTML代码结构,当然,这部分的DOM内容应该是在用户允许使用其摄像头事件出发后,动态加载生成的. 注意: 我们采用的是 640X480的分辨率,如 ...
原生html调手机拍照,如何让HTML5调用手机摄像头拍照——实践就是一切
原文:如何让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家,学编程最重要的是实践,我这虽然有完善的代码,但是希望大家都可以自己写出属于自己的代码 HTML5 Th ...
html5调用手机摄像头
在一个响应式网站项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api 然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 input fil ...
html5调用手机摄像头，实现拍照上传功能
http://www.glve.net/html5-calls-cell-phone-cameras-to-achieve-photo-upload-feature.html 今天做手机网站,想实现手 ...
使用HTML5+调用手机摄像头和相册
前言: 前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法 ...
html调起苹果手机摄像头_使用HTML5+调用手机摄像头和相册
前言: 前端时间使用HTML5作了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了很多时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法 ...
html5调用手机摄像头和相册,h5 调用手机摄像头/相册
html 部分 js 部分 getBase64: function (file, callback) { var maxWidth = 640 if (file.files && fi ...

Html5调用手机摄像头并实现人脸识别

需求

技术栈

分析

核心代码

手机适配

我的视频课

《Android HyBrid App开发实战》

《彻底搞定JVM》

《Android性能优化参考》

《面试之排序算法》

《AI导论》

《Java注解精讲》

《Java反射精讲》

好家伙，随手就是一个赞~

Html5调用手机摄像头并实现人脸识别相关推荐

最新文章

热门文章