本文主要介绍如何在Html5中调用手机摄像头并实现人脸识别。 有一定的参考价值。 有兴趣的同学可以参考一下。 希望您读完这篇文章后能有所收获。 下面就让小编带领大家一起来了解一下吧。
需要
混合App开发,原生shell+webApp,在web部分调用原生拍照功能但在网页指定区域显示拍照内容,同时自动拍照并进行人脸识别html5调用手机摄像头,并显示网页上的识别结果。
技术栈
vue、Html5、视频标签、Android、IOS、百度AI
分析
1、使用navigator.mediaDevices.getUserMedia调用系统原生摄像头函数
2、视频标签显示摄像头的内容
3.canvas标签获取图片
4.将图片上传到服务器并通过百度AI识别图片
5.网页显示鉴定结果
核心代码
1、调用系统原生摄像头函数,使用video标签显示html:
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) { //最新的标准API navigator.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) { //旧版API navigator.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转换为Blob dataURItoBlob(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、从Android 6及以后版本开始,Android的权限管理发生了变化,需要对Android的原生shell进行如下处理:
myWebView.setWebChromeClient(new WebChromeClient() { @TargetApi(Build.VERSION_CODES.LOLLIPOP) @Override public void onPermissionRequest(final PermissionRequest request) { request.grant(request.getResources()); } });
2.IOS系统html5调用手机摄像头,Safari11可用
3、OverconstrainedError错误,部分Android手机会报OverconstrainedError错误,原因是相机参数设置不合理,找不到指定的设置。
感谢您能够仔细阅读这篇文章。 希望小编分享的《如何在Html5中调用手机摄像头并实现人脸识别》这篇文章对您有所帮助,也希望您支持风那云,关注风那云行业资讯频道,更多相关知识等你来学习!