PC人脸识别登录制作出乎意料的简单

目录

实现原理
前端实现
人脸识别

正文

之前不是做了个开源项目嘛，在做完GitHub登录后，想着再显得有逼格一点，说要再加个人脸识别登录，就我这佛系的开发进度，过了一周总算是抽时间安排上了。

源码在文末

其实最近对写文章有点小抵触，写的东西没人看，总有点小失落，好在有同行大佬们的开导让我重拾了信心。调整了自己的心态，只要我分享的东西对大家有帮助就好，至于多少人看那就随缘吧！

废话不多说先看人脸识别效果动态，马赛克有点重哈，没办法长相实在是拿不出手。

回到顶部
实现原理

我们看一下实现人脸识别登录的大致流程，三个主要步骤：

前端登录页打开摄像头，进行人脸识别，注意：只识别画面中是不是有人脸

识别到人脸后，拍照上传当前画面图片

后端接受图片并调用人脸库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 = document.getElementById('canvas');
        this.context = this.canvas.getContext('2d');
        this.tracker = new tracking.ObjectTracker('face');
        this.tracker.setInitialScale(4);
        this.tracker.setStepSize(2);
        this.tracker.setEdgesDensity(0.1);

        tracking.track('#video', this.tracker, {camera: true});

        this.tracker.on('track', this.handleTracked);
    },

    handleTracked(