玩了一我的脸识别登陆

最近温差大,请别感冒前端

前言

这篇文章就没有目录了,直接从头正序开始便可。git

由于忽然接到了一个需求,一个xx局,内部使用的移动端项目(是咱们开发的),须要添加一我的脸识别登陆的需求。github

内部员工使用的识别登陆,只需也只能作平面的图像识别。因此,针对内部使用的一些权限没那么高的平台。这么开发我的脸识别,客户需增添一些科技感,作平面人脸识别是没什么问题的。web

由于项目中有图像识别的业务,因此,人相对比的算法放在了后台。后来调研,tracking也能够作到图像比对,可是真实业务中图像库不能够放在本地,因此此阶段逻辑只能放在后台。算法

我这边作了一下技术调研,作了一个Demo,在此记录一下。Demo地址放在了文章结尾。单纯跟你们分享一下这个小东西,别指着前端能作3D识别。数据库

开发

一、找个架子

我这边直接用的dva-cli,十分方便,反正我写demo都直接拉的这个架子。感谢做者。canvas

二、插件tracking.js

tracking.js库将不一样的计算机视觉算法和技术引入浏览器环境。经过使用现代HTML5规范,咱们使您可以进行实时颜色跟踪、人脸检测以及更多——全部这些都是经过一个轻量级的核心(约7kb)和直观的界面实现的。api

传送门tracking.js浏览器

三、插件face-api.js

基于tracking.js的浏览器端人脸识别的插件,提供了一些api服务器

四、调用

直接导入,stats.min.js是face-min

五、设计结构

这里确认一下需求流程。

  • 一、调用摄像头
  • 二、检测摄像头中有无人脸
  • 三、若是有人脸,同步画到canvas层
  • 四、导出base64
  • 五、发送给数据库进行比对。(这部分后台同窗作,固然前端也能够本地作,但没什么必要)
  • 六、返回比对分数,是否符合登陆节点。

六、HTML结构

核心就是,须要一个video标签显示摄像头内容,一个canvas画布抓取图像。(HTML并不彻底,只是展现核心)

七、引入声明

八、效果

九、联调

这个我就很少说了,剩下的就是业务阶段,拿到了图片,发送给服务器,服务器比对事后返回给你登陆结果或者一个类似度分数,这样咱们就能够判断是否能够登陆。

十、GitHub地址

传送门: face-web

END

简单的记录一下一种实现方式,也算投石问路,你们能够一块儿交流一下。

最近又出差了,仍是很忙,简单的沉淀一下文章。谢谢各位。

准备更正错误

文章编写了两天以后,首先感谢一下各位的指正,很是感谢@Yoha AI·前端给我指出了文章的错误和不少不足,接下来我打算深刻理解人脸识别原理,并更正此篇文章的错误。但愿你们谅解。

相关文章
相关标签/搜索