vue 使用tracking.js开发人脸识别功能

PS1: tracking.js 处理器开销比较大。

PS2: 本地调试只能使用locahost访问 上线需要使用有https的域名 否则无法吊起摄像头

 

示例效果:

开发思路: 前端只负责检测摄像头内是否存在人脸，如果存在人脸截图当前帧调用接口后台进行人脸对比校验，通过接口返回来确认是否识别成功。

前端使用人脸识别类库 trackingjs 可以直接在github上直接下载，npm安装感觉有问题。 github下载地址。

下载完毕以后放入到 src/assets 目录下文件夹更名为 tracking 方便引入

HTML 示例代码

<template>
  <div>
    <div class="video-box">
      <video id="video" width="320" height="240" preload autoplay loop muted></video>
      <canvas id="canvas" width="320" height="240"></canvas>
    </div>
    <canvas id="screenshotCanvas" width="320" height="240"></canvas>
  </div>
</template>

 

 

JS 示例代码

<script>
  import tracking from '@/assets/tracking/build/tracking-min.js';
  import '@/assets/tracking/build/data/face-min.js';

  export default {
    data() {
      return {
        video: null,
        screenshotCanvas: null,
        uploadLock: true // 上传锁
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      // 初始化设置
      init() {
        this.video = document.getElementById('video');
        this.screenshotCanvas = document.getElementById('screenshotCanvas');

        let canvas = document.getElementById('canvas');
        let context = canvas.getContext('2d');

        // 固定写法
        let tracker = new window.tracking.ObjectTracker('face');
        tracker.setInitialScale(4);
        tracker.setStepSize(2);
        tracker.setEdgesDensity(0.1);
        window.tracking.track('#video', tracker, {
          camera: true
        });

        let _this = this;
        tracker.on('track', function(event) {

          // 检测出人脸 绘画人脸位置
          context.clearRect(0, 0, canvas.width, canvas.height);
          event.data.forEach(function(rect) {
            context.strokeStyle = '#0764B7';
            context.strokeRect(rect.x, rect.y, rect.width, rect.height);

            // 上传图片
            _this.uploadLock && _this.screenshotAndUpload();
          });
        });
      },
      // 上传图片
      screenshotAndUpload() {
        // 上锁避免重复发送请求
        this.uploadLock = false;

        // 绘制当前帧图片转换为base64格式
        let canvas = this.screenshotCanvas;
        let video = this.video;
        let ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        let base64Img = canvas.toDataURL('image/jpeg');

        // 使用 base64Img 请求接口即可
        console.log('base64Img:',base64Img)

        // 请求接口成功以后打开锁
        // this.uploadLock = true;
      }
    }
  }
</script>

CSS 示例代码

<style scoped>
  /* 绘图canvas 不需显示隐藏即可 */
  #screenshotCanvas{
    display: none;
  }
 
  .video-box{
    position: relative;
    width: 320px;
    height: 240px;
  }
  
  
  video,canvas{
    position: absolute;
    top: 0;
    left: 0;
	border: #000000 5px solid;
  }
</style>

示例代码中都有注释可以直接参考注释查看，加了一个锁避免请求还没回复就再次请求，总的来说就是前端先检测出人脸之后再由后端来验证，避免过多无效的请求。

 

示例项目代码

https://wws.lanzoui.com/i14fXohavif
密码:fhzh

 

区域内滑动元素功能参考 https://blog.csdn.net/weixin_30684743/article/details/102142674