【前端】H5人脸实时识别自动截取人脸照片

1、前言

因公务业务须要，须要移动端H5人脸认证后开门，并且要在微信浏览器中，也就是嵌入到公众号里。

这要是放在App上作，其实不算什么难点。关键在于他喵的是网页！！！

划重点：网页！！

总所周知，h5调用相机拍照或者摄像，通常用一个input:

<input ref="changeInput" type="file" accept="video/*" capture="user" @change="changeVideo" />
复制代码

这样当你点击input的时候，会唤醒手机自带的相机，进行拍摄或者拍照。

2、分析

• 难点1 自定义一个这样的遮罩在相机里，彻底是异想天开。
• 难点2 实时进行人脸识别，由于唤醒相机进行录像彻底是在录像，你不能操做视频流。
• 难点3 各种厂商的浏览器兼容性问题。（突出在IOS和安卓）。

3、思考

咋办捏？

• 办法1 跟客户说作不了网页的，要么搞个App？
• 办法2 删库跑路？？

其实没有这么极端，产品去看了别家的作法，一样也达不到这个理想的效果，都是用input去调自带的相机。

好吧，老老实实用这样办法搞定了。可是我想继续深刻研究一下这方面，因此有了这篇文章。

4、来个在线演示吧 在线人脸检测

实现了难度1和2，可是对于各类手机和浏览器的兼容状况就不怎么理想。

机型	小米浏览器	微信浏览器	QQ浏览器	UC	Chrome	猎豹	Safari
小米8	fail	pass	pass	pass	pass	pass	--
iphone7P	--	fail	--	--	--	--	fail
华为mate20	--	pass	--	--	--	--	--
华为mate30	--	pass	--	--	--	--	--

-- 表明没测

只有小米8都测了是由于是我本身的手机，其余的都是直接微信发给同事测的。

下面放上地址，你们能够帮忙测试一下！

在线人脸检测

5、实现原理

H5的API: getUserMedia + 人脸检测: trackingjs

实现起来并不难，关键是兼容性的问题。

5.1 getUserMedia

getUserMedia官方文档

5.2 trackingjs

trackingjs官网

5.3 将这二者结合使用便可

连接都放出来了，感兴趣的童鞋能够去深刻了解，结合本身需求作出相应的产品来。

6、后话

• 虽说有这个getUserMedia API能够去调用摄像头，可是兼容性始终没有很好的解决。期待各厂商能够支持。
• trackingjs能够检测人脸、眼睛、嘴巴和颜色，在线demo中仅仅使用了人脸检测功能。
• 欢迎你们踊跃提问和发挥idea。