Html5调⽤⼿机摄像头并实现⼈脸识别的实现
需求
混合App开发，原⽣壳⼦+webApp，在web部分调⽤原⽣摄像头功能并且在⽹页指定区域显⽰摄像头内容，同时可以⼿动拍照并进⾏⼈脸识别，将识别结果显⽰在⽹页上。
技术栈
vue、Html5、video标签、Android、IOS、百度AI
分析
1、使⽤UserMedia调⽤系统原⽣摄像头功能
2、video标签显⽰摄像头内容
3、canvas标签获取图⽚
4、将图像上传服务器，通过百度AI识别图⽚
5、web显⽰识别结果
核⼼代码
1、调⽤系统原⽣摄像头功能并使⽤video标签显⽰html:
<video
id="webcam"
:
:width="videoWidth"
:height="videoHeight"
loop
preload
>
</video>
JavaScript：
initVideo() {
let that = this;
this.video = ElementById("webcam");
setTimeout(() => {
if (
navigator.webkitGetUserMedia ||
) {
/
/调⽤⽤户媒体设备, 访问摄像头
{
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.$("摄像头打开失败，请检查权限设置!");
}
}, 300);
},
getUserMedia(constraints, success, error) {
if (UserMedia) {
//最新的标准API
.getUserMedia(constraints)
.then(success)
.
catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核⼼浏览器
navigator标签navigator.webkitGetUserMedia(constraints, success, error);
} else if (GetUserMedia) {
//firfox浏览器
} else if (UserMedia) {
//旧版API
}
},
videoSuccess(stream) {
this.video.srcObject = stream;
this.video.play();
},
videoError(error) {
<(error);
this.$("摄像头打开失败，请检查权限设置!");
},
2、canvas获取摄像头图⽚
JavaScript：
this.canvas = ateElement("canvas");
....
let context = Context("2d");
context.drawImage(this.video, 0, 0, this.videoWidth, this.videoHeight); this.imgSrc = DataURL("image/png");
3、调⽤百度AI识别图⽚
JavaScript：
let that = this;
let base64Data = DataURL();
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) {
<(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) {
}
});
2、IOS系统，Safari11之后可⽤
3、OverconstrainedError错误，部分Android⼿机会报OverconstrainedError错误，原因是摄像头参数设置不合理，不到指定设置。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。