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

2019-01-28 11:28:46王冬梅

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、由于Android6之后,Android的权限管理出现变化,Android原生的壳子,需要做如下处理:

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

2、IOS系统,Safari11之后可用

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持易采站长站。