# H5实时在线人脸识别

# 一、前言

因公务业务需要,需要移动端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

getUserMedia官方文档

# 5.2 trackingjs

trackingjs官网

# 5.3 将这两者结合使用即可

链接都放出来了,感兴趣的童鞋可以去深入了解,结合自己需求做出相应的产品来。

# 六、后话

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