js实现人脸识别给人增加猫耳朵

一起用代码吸猫！本文正在参与【喵星人征文活动】。

现在像有些直播里,可以给自己脸增加人物特效,装饰物,实际上前端也可以做到,我这里主要是依赖Tracking.js进行人脸识别,这个库可以用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。

1. 安装依赖

npm install tracking

2. video显示摄像头的信息,video的上面是覆盖一个canvas，然后通过tracking.js获取canvas人脸的坐标信息，然后通过这些坐标信息，在canvas中进行绘制

<template>
  <div id="app" class="frame">
    <div class="container">
      <video id="video" width="320" height="240" preload autoplay loop muted></video>
      <canvas id="canvas" width="320" height="240"></canvas>
    </div>
    <img id="left" src='./assets/left.png' style="display: none;" />
    <img id="right" src='./assets/right.png' style="display: none;" />
  </div>
</template>

<script>
import 'tracking/build/tracking'
import 'tracking/build/data/face'

// For ESLint:
/* global tracking */

const OFFSET_X = -10;
const OFFSET_Y = 0;

export default {
  mounted: () => {
    let ear_left = document.getElementById("left");
    let ear_right = document.getElementById("right");

    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');
    let video = document.getElementById('video');
    
    //实例化tracker对象
    let tracker = new tracking.ObjectTracker('face');
    tracker.setInitialScale(4);
    tracker.setStepSize(2);
    tracker.setEdgesDensity(0.1);
    
    //tracker对象和标签关联
    // tracking.track('#video', tracker, { camera: true });
    
    window.navigator.getUserMedia({
      video: true,
      audio: false
    }, function (stream) {
      try {
        video.srcObject = stream;
      } catch (err) {
        video.src = window.URL.createObjectURL(stream);
      }
    }, function () {
      throw Error('Cannot capture user camera.');
    }
    );
    tracking.trackVideo_(video, tracker, { camera: true });

    tracker.on('track', function (event) {
      if (event.data.length == 0) {
        return;
      }
      context.clearRect(0, 0, canvas.width, canvas.height);

      event.data.forEach(function (rect) {
        // 给每个人脸绘制对应的框
        // context.strokeStyle = '#a64ceb';
        // context.strokeRect(rect.x, rect.y, rect.width, rect.height); 
        
        context.drawImage(ear_left, rect.x + OFFSET_X, rect.y + OFFSET_Y, 30, 50);
        context.drawImage(ear_right, rect.x + rect.width + OFFSET_X, rect.y + OFFSET_Y, 30, 50);
      });
    });
  }
}
</script>

<style lang="scss">
.container {
  position: absolute;
  top: 0;
  left: 0;
  video,
  canvas {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>

3. 随着摄像头的人脸显示,猫耳朵也会同样长出来显示,这里我的脸就不放上去,不过这里可以强化功能做一个装饰购物栏有各种动物的耳朵,口罩,圣诞帽,表情特效,背景屋也提供用户选择.