如何使用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:

JavaScript：

2、canvas获取摄像头图片

JavaScript：

3、调用百度AI识别图片

JavaScript：

手机适配

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

2、IOS系统，Safari11之后可用

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