最近温差大,请别感冒
前言
这篇文章就没有目录了,直接从头正序开始即可。
因为突然接到了一个需求,一个xx局,内部使用的移动端项目(是我们开发的),需要添加一个人脸识别登录的需求,我这边做了一下技术调研,做了一个Demo,在此记录一下。Demo地址放在了文章结尾。
开发
1、找个架子
我这边直接用的dva-cli,十分方便,反正我写demo都直接拉的这个架子。感谢作者。
2、插件tracking.js
tracking.js库将不同的计算机视觉算法和技术引入浏览器环境。通过使用现代HTML5规范,我们使您能够进行实时颜色跟踪、人脸检测以及更多——所有这些都是通过一个轻量级的核心(约7kb)和直观的界面实现的。
传送门tracking.js
3、插件face-api.js
基于tracking.js的浏览器端人脸识别的插件,提供了一些api
4、调用
直接导入,stats.min.js是face-min
5、设计结构
这里确认一下需求流程。
- 1、调用摄像头
- 2、检测摄像头中有无人脸
- 3、如果有人脸,同步画到canvas层
- 4、导出base64
- 5、发送给数据库进行比对。(这部分后台同学做,当然前端也可以本地做,但没什么必要)
- 6、返回比对分数,是否符合登录节点。
6、HTML结构
核心就是,需要一个video标签显示摄像头内容,一个canvas画布抓取图像。(HTML并不完全,只是展示核心)
7、引入声明
8、效果
9、联调
这个我就不多说了,剩下的就是业务阶段,拿到了图片,发送给服务器,服务器比对过后返回给你登录结果或者一个相似度分数,这样我们就可以判断是否可以登录。
10、GitHub地址
传送门: face-web
END
简单的记录一下一种实现方式,也算投石问路,大家可以一起交流一下。
最近又出差了,还是很忙,简单的沉淀一下文章。谢谢各位。