本篇内容主要讲解“如何使用Html5实现人脸识别功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用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"::width="videoWidth":height="videoHeight"looppreload></video>

JavaScript：

initVideo(){letthat=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);}elseif(navigator.webkitGetUserMedia){//webkit核心浏览器navigator.webkitGetUserMedia(constraints,success,error);}elseif(navigator.mozGetUserMedia){//firfox浏览器navigator.mozGetUserMedia(constraints,success,error);}elseif(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");....letcontext=this.canvas.getContext("2d");context.drawImage(this.video,0,0,this.videoWidth,this.videoHeight);this.imgSrc=this.canvas.toDataURL("image/png");

3、调用百度AI识别图片

JavaScript：

letthat=this;letbase64Data=this.canvas.toDataURL();letblob=this.dataURItoBlob(base64Data);//varfile=newFormData();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){varbyteString;if(base64Data.split(",")[0].indexOf("base64")>=0)byteString=atob(base64Data.split(",")[1]);elsebyteString=unescape(base64Data.split(",")[1]);varmimeString=base64Data.split(",")[0].split(":")[1].split(";")[0];varia=newUint8Array(byteString.length);for(vari=0;i<byteString.length;i++){ia[i]=byteString.charCodeAt(i);}returnnewBlob([ia],{type:mimeString});},

手机适配

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

myWebView.setWebChromeClient(newWebChromeClient(){@TargetApi(Build.VERSION_CODES.LOLLIPOP)@OverridepublicvoidonPermissionRequest(finalPermissionRequestrequest){request.grant(request.getResources());}});

2、IOS系统，Safari11之后可用

3、OverconstrainedError错误，部分Android手机会报OverconstrainedError错误，原因是摄像头参数设置不合理，找不到指定设置。

到此，相信大家对“如何使用Html5实现人脸识别功能”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！