前端：手撸一个人脸识别？

我不是女神ヾ 2022-11-08 14:27 245阅读 0赞

[![c34432f768a9519647dd06ab43a5e526.png][]][c34432f768a9519647dd06ab43a5e526.png 1]

[能画一张图说说Spring Boot的核心架构吗？][c34432f768a9519647dd06ab43a5e526.png 1]

内部员工使用的识别登录，只需也只能做平面的图像识别。所以，针对内部使用的一些权限没那么高的平台。这么开发个人脸识别，客户需增添一些科技感，做平面人脸识别是没什么问题的。

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

我这边做了一下技术调研，做了一个Demo，在此记录一下。Demo地址放在了文章结尾。单纯跟大家分享一下这个小东西，别指着前端能做3D识别。

## 开发 ##

###     ###

##  ##

1、找个架子

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

###     ###

##  ##

2、插件tracking.js

###     ###

`tracking.js库将不同的计算机视觉算法和技术引入浏览器环境。通过使用现代HTML5规范，我们使您能够进行实时颜色跟踪、人脸检测以及更多——所有这些都是通过一个轻量级的核心（约7kb）和直观的界面实现的。`

##  ##

3、插件face-api.js

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

###     ###

##  ##

4、调用

![bc1d4e7f084c85bc7b62f1e9b062e766.png][]

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

###     ###

##  ##

5、设计结构

这里确认一下需求流程。

*  1、调用摄像头
 *  2、检测摄像头中有无人脸
 *  3、如果有人脸，同步画到canvas层
 *  4、导出base64
 *  5、发送给数据库进行比对。(这部分后台同学做，当然前端也可以本地做，但没什么必要)
 *  6、返回比对分数，是否符合登录节点。

###     ###

##  ##

6、HTML结构

核心就是，需要一个video标签显示摄像头内容，一个canvas画布抓取图像。（HTML并不完全，只是展示核心）

![b86f6d8009a6a4dc11e25371e5ef426d.png][]

###     ###

##  ##

7、引入声明

![1a0c32b53a9768c6dc5a288df7ec83dc.png][]

![827902df212166a2f0260edba67a6f0e.png][]

###     ###

##  ##

联调

这个我就不多说了，剩下的就是业务阶段，拿到了图片，发送给服务器，服务器比对过后返回给你登录结果或者一个相似度分数，这样我们就可以判断是否可以登录。

### 10、GitHub地址 ###

**公众号后台回复【****人脸****】**

**回复**【**干货**】获取精选干货视频教程

**回复**【**加群**】加入疑难问题攻坚交流群

**回复**【**mat**】获取内存溢出问题分析详细文档教程

**回复**【**赚钱**】获取用java写一个能赚钱的微信机器人

**回复**【**副业**】获取程序员副业攻略一份

![e57e6e842c232b324fdfc37ffaf7007b.png][]

![1b93b3c56608604b81f0fb80f38f5726.png][]

都收藏了，就点个「在看」支持一下吧！

![2b7780235631ca99afa96a1624d39583.png][]

点下在看，你最好看

[c34432f768a9519647dd06ab43a5e526.png]: /images/20221023/fa0c0bdc545c440aac6c1191e9fcc55b.png
[c34432f768a9519647dd06ab43a5e526.png 1]: http://mp.weixin.qq.com/s?__biz=MzU2NDc4MjE2Ng%3D%3D&chksm=fc44fafacb3373ec3f4dd9eb0ae1924379ffcc5966787a36b9760ec4b6692c488323dcc80662&idx=1&mid=2247487427&scene=21&sn=3021e8bbe8e27983c3beb128a212714d#wechat_redirect
[bc1d4e7f084c85bc7b62f1e9b062e766.png]: /images/20221023/6f04a5d91df245b082b8e4c90111f730.png
[b86f6d8009a6a4dc11e25371e5ef426d.png]: /images/20221023/132bb340face49a6817b0da97f2fb389.png
[1a0c32b53a9768c6dc5a288df7ec83dc.png]: /images/20221023/ebeba3120e774150932d014f61e8ae03.png
[827902df212166a2f0260edba67a6f0e.png]: /images/20221023/ed0238c803bb4c72b4d35fe92c6137e2.png
[e57e6e842c232b324fdfc37ffaf7007b.png]: /images/20221023/d2db5223c700405ba9bb1a759e449c18.png
[1b93b3c56608604b81f0fb80f38f5726.png]: /images/20221023/60e12e645eb84b4e834897b42c85c6c3.png
[2b7780235631ca99afa96a1624d39583.png]: /images/20221023/f70b825d5fff470a9ca8f8654f120a5c.png