一、前言
因公务业务需要，需要移动端H5人脸认证后开门，而且要在微信浏览器中，也就是嵌入到公众号里。
这要是放在App上做，其实不算什么难点。关键在于他喵的是网页！！！
划重点：网页！！
总所周知，h5调用相机拍照或者摄像，一般用一个input:
<input ref="changeInput" type="file" accept="video/*" capture="user" @change="changeVideo" />
这样当你点击input的时候，会唤醒手机自带的相机，进行拍摄或者拍照。
二、分析
- 难点1 自定义一个这样的遮罩在相机里，完全是异想天开。
- 难点2 实时进行人脸识别，因为唤醒相机进行录像完全是在录像，你不能操作视频流。
- 难点3 各类厂商的浏览器兼容性问题。（突出在IOS和安卓）。
三、思考
咋办捏？
- 办法1 跟客户说做不了网页的，要么搞个App？
- 办法2 删库跑路？？
其实没有这么极端，产品去看了别家的做法，同样也达不到这个理想的效果，都是用input去调自带的相机。
好吧，老老实实用这样办法搞定了。但是我想继续深入研究一下这方面，所以有了这篇文章。
四、来个在线演示吧 在线人脸检测
实现了难度1和2，但是对于各种手机和浏览器的兼容情况就不怎么理想。
| 机型 | 小米浏览器 | 微信浏览器 | QQ浏览器 | UC | Chrome | 猎豹 | Safari |
|---|---|---|---|---|---|---|---|
| 小米8 | fail | pass | pass | pass | pass | pass | -- |
| iphone7P | -- | fail | -- | -- | -- | -- | fail |
| 华为mate20 | -- | pass | -- | -- | -- | -- | -- |
| 华为mate30 | -- | pass | -- | -- | -- | -- | -- |
-- 代表没测
只有小米8都测了是因为是我自己的手机，其他的都是直接微信发给同事测的。
下面放上地址，大家可以帮忙测试一下！
五、实现原理
H5的API: getUserMedia + 人脸检测: trackingjs
实现起来并不难，关键是兼容性的问题。
5.1 getUserMedia
5.2 trackingjs
5.3 将这两者结合使用即可
链接都放出来了，感兴趣的童鞋可以去深入了解，结合自己需求做出相应的产品来。
六、后话
- 虽然说有这个getUserMedia API可以去调用摄像头，但是兼容性始终没有很好的解决。期待各厂商可以支持。
- trackingjs可以检测人脸、眼睛、嘴巴和颜色，在线demo中仅仅使用了人脸检测功能。
- 欢迎大家踊跃提问和发挥idea。
- Github地址
