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

一、前言

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

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

划重点：网页！！

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

复制代码

这样当你点击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。