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:

<video

id="webcam"

style="videoStyle"

width="videoWidth"

height="videoHeight"

loop

preload

>

</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) {

//最新的标准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、由于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错误，原因是摄像头参数设置不合理，找不到指定设置。

注：如代码有错误请主动联系发布者。