人脸识别

2020-09-07

之前项目中用过人脸识别，主要是js调用器摄像头，通过利用canvas画布将视频当前帧转换成图片的实例，其中用到了 mediaDevices.getUserMedia 方法。合成的图片发送给后台要后台去做活体检测。功能实现没问题，但是前端都是只能靠点击一个按钮来拍照，实现的太傻瓜。后来在掘金上看到一个大佬利用tracking来实现前端部分功能，改库只对人脸有效，而且能够框住人脸和跟踪，于是跟着文章自己实现了一遍。

开发

1、找个架子

我使用的[vue-cli3.0][1]来，快速搭建模板，而且官方的较为标准，有问题也可以在网上找到答案。

2、插件tracking.js

Tracking.js 是一个独立的JavaScript库，用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。它是非常易于使用的API，具有数个方法和事件（足够使用了）。

传送门 tracking.js

3、插件face-api.js

是一个 JavaScript API，是基于 tensorflow.js 核心 API 的人脸检测和人脸识别的浏览器实现。它实现了一系列的卷积神经网络（CNN），针对网络和移动设备进行了优化

4、引入js

下载两个文件后在index.html引入

1 2	<script src="./tracking-min.js"></script> <script src="./face-min.js"></script>

5、设计流程

调用摄像头
检测摄像头中是否有人脸
如果有人脸在画面中画出canvas层
导出base64图片
把图片发送给后端进行人脸叫人
获得返回接口

6、HTML结构

<template>
      <div class="container">
        <div class="face-box">
              <video id="_videoFace" width="375" height="200" preload autoPlay loop muted />
              <canvas id="_canvasFace" class="face-canvas" width="375" height="200" />
        </div>
        <div style='none'>
            <p>实时截图</p>
          <canvas id="_canvas2Face" width="375" height="200" />
        </div>
      </div>
</template>

7、js部分

const tracking = window.tracking;//  index.html引入的，window全局可以拿到
let video,canvas,canvas2,context,context2 
export default {
  data() {
    return {
      canvas: '',
      canvas2: '',
      context: '',
      context2: '',
      timer:true
    }
  },
  mounted() {
    this.initFace()
  },
  methods: {
    initFace() {
      video = document.getElementById('_videoFace');
      canvas = document.getElementById('_canvasFace');
      canvas2 = document.getElementById('_canvas2Face');
      context = canvas.getContext('2d');
      context2 =  canvas2.getContext('2d');
      const tracker = new tracking.ObjectTracker('face');
      tracker.setInitialScale(4);
      tracker.setStepSize(1);
      tracker.setEdgesDensity(0.1);
      tracking.track('#_videoFace', tracker, { camera: true });
      tracker.on('track', (event) => {
        // no-face
        if (event.data.length === 0) return;
        // debounce
        if (this.timer) {
          this.draw(event)
          this.timer = false;
          setTimeout(() => {
            this.timer = true;
          }, 0)
        }
      });
    },
    draw(event) {
      context.clearRect(0, 0, canvas.width, canvas.height);
      event.data.forEach((rect) => {
        context.strokeStyle = '#10ff87';
        context.strokeRect(rect.x, rect.y, rect.width, rect.height);
        context.font = '11px Helvetica';
        context.fillStyle = "#fff";
        context.fillText("x:" + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
        context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
      });
      context2.drawImage(video, 0, 0, 200, 150);
      const snapData = canvas2.toDataURL('image/png');
      const imgSrc = "data:image/png;" + snapData;
      this.$emit('change',imgSrc)
    }
  },
}

8、效果

RUNOOB 图标

仓库地址：https://github.com/airzhanglin/vueFace
效果展示：https://demo.zhanglin168.cn/face.html