推荐阅读:
- 微服务实战文档分享,阿里内部的Spring cloud微服务精髓都在里面
- 去面试3W月薪的Java岗位,被虐哭了,原来是我这些技术点还有欠缺
- 春招失厉,狂刷200+面试文档,终斩获头条,阿里offer~(Java岗)
之前不是做了个开源项目嘛,在做完GitHub登录后,想着再显得有逼格一点,说要再加个人脸识别登录,就我这佛系的开发进度,过了一周总算是抽时间安排上了。
源码在文末
其实最近对写文章有点小抵触,写的东西没人看,总有点小失落,好在有同行大佬们的开导让我重拾了信心。调整了自己的心态,只要我分享的东西对大家有帮助就好,至于多少人看那就随缘吧!
废话不多说先看人脸识别效果动态,马赛克有点重哈,没办法长相实在是拿不出手。
![6a916716c9edeb77e0cd3efa4c65c46e.gif](https://i-blog.csdnimg.cn/blog_migrate/4561db14f9a0d90f341c9ff7ec443f57.gif)
实现原理
我们看一下实现人脸识别登录的大致流程,三个主要步骤:
![c534299e6ea06a85a17366c1afd4c89c.png](https://i-blog.csdnimg.cn/blog_migrate/688bc59037e8f8556710e527a985454b.jpeg)
- 前端登录页打开摄像头,进行人脸识别,注意:只识别画面中是不是有人脸
- 识别到人脸后,拍照上传当前画面图片
- 后端接受图片并调用人脸库SDK,对人像进行比对,通过则登录成功,并将人像信息注册到人脸库和本地mysql。
前端实现
上边说过要在前端识别到人脸,所以这里就不得不借助工具了,我使用的 tracking.js,一款轻量级的前端人脸识别框架。
前端 Vue 代码实现逻辑比较简单,tracking.js 打开摄像头识别到人脸信息后,对视频图像拍照,将图片信息上传到后台,等待图片对比的结果就可以了。
data() { return { showContainer: true, // 显示 tracker: null, tipFlag: false, // 提示用户已经检测到 flag: false, // 判断是否已经拍照 context: null, // canvas上下文 removePhotoID: null, // 停止转换图片 scanTip: '人脸识别中...',// 提示文字 imgUrl: '', // base64格式图片 canvas: null } }, mounted() { this.playVideo() }, methods: { playVideo() { var video = document.getElementById('video'); this.canvas