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:

1. <video
2. id="webcam"
3. :style="videoStyle"
4. :width="videoWidth"
5. :height="videoHeight"
6. loop
7. preload
8. >
9. </video>

JavaScript：

1. initVideo() {
2. let that = this;
3. this.video = document.getElementById("webcam");
4. setTimeout(() => {
5. if (
6. navigator.mediaDevices.getUserMedia ||
7. navigator.getUserMedia ||
8. navigator.webkitGetUserMedia ||
9. navigator.mozGetUserMedia
10. ) {
11. //调用用户媒体设备, 访问摄像头
12. this.getUserMedia(
13. {
14. video: {
15. width: {
16. ideal: that.videoWidth,
17. max: that.videoWidth
18. },
19. height: {
20. ideal: that.videoHeight,
21. max: that.videoHeight
22. },
23. facingMode: "user", //前置摄像头
24. frameRate: {
25. ideal: 30,
26. min: 10
27. }
28. }
29. },
30. this.videoSuccess,
31. this.videoError
32. );
33. } else {
34. this.$toast.center("摄像头打开失败,请检查权限设置!");
35. }
36. }, 300);
37. },
38. getUserMedia(constraints, success, error) {
39. if (navigator.mediaDevices.getUserMedia) {
40. //最新的标准API
41. navigator.mediaDevices
42. .getUserMedia(constraints)
43. .then(success)
44. .catch(error);
45. } else if (navigator.webkitGetUserMedia) {
46. //webkit核心浏览器
47. navigator.webkitGetUserMedia(constraints, success, error);
48. } else if (navigator.mozGetUserMedia) {
49. //firfox浏览器
50. navigator.mozGetUserMedia(constraints, success, error);
51. } else if (navigator.getUserMedia) {
52. //旧版API
53. navigator.getUserMedia(constraints, success, error);
54. }
55. },
56. videoSuccess(stream) {
57. this.mediaStreamTrack = stream;
58. this.video.srcObject = stream;
59. this.video.play();
60. },
61. videoError(error) {
62. console.error(error);
63. this.$toast.center("摄像头打开失败,请检查权限设置!");
64. },

2、canvas获取摄像头图片

JavaScript：

1. this.canvas = document.createElement("canvas");
2. ....
3. let context = this.canvas.getContext("2d");
4. context.drawImage(this.video, 0, 0, this.videoWidth, this.videoHeight);
5. this.imgSrc = this.canvas.toDataURL("image/png");

3、调用百度AI识别图片

JavaScript：

1. let that = this;
2. let base64Data = this.canvas.toDataURL();
3. let blob = this.dataURItoBlob(base64Data); //
4. var file = new FormData();
5. file.append("file", blob);
6. file.append("key", that.uuid);
7. util.ajax
8. .post("XXXXXXXXXX", file, {
9. headers: {
10. "Content-Type": "multipart/form-data"
11. }
12. })
13. .then(function(response) {
14. if ((response.status = 200)) {
15. .....识别成功，显示结果
16. } else {
17. ......识别失败
18. }
19. })
20. .catch(function(error) {
21. console.error(error);
22. });
23.  
24. //base64转换为Blob
25. dataURItoBlob(base64Data) {
26. var byteString;
27. if (base64Data.split(",")[0].indexOf("base64") >= 0)
28. byteString = atob(base64Data.split(",")[1]);
29. else byteString = unescape(base64Data.split(",")[1]);
30. var mimeString = base64Data
31. .split(",")[0]
32. .split(":")[1]
33. .split(";")[0];
34. var ia = new Uint8Array(byteString.length);
35. for (var i = 0; i < byteString.length; i++) {
36. ia[i] = byteString.charCodeAt(i);
37. }
38. return new Blob([ia], { type: mimeString });
39. },

手机适配

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

1. myWebView.setWebChromeClient(new WebChromeClient() {
2.  
3. @TargetApi(Build.VERSION_CODES.LOLLIPOP)
4. @Override
5. public void onPermissionRequest(final PermissionRequest request) {
6. request.grant(request.getResources());
7. }
8. });
9.  

2、IOS系统，Safari11之后可用

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。