业务需求

1. 前端检测人脸（必须是含有人脸的时候才拍照，没有人脸的时候不拍照，不上传服务端 ，避免增加服务器压力）
2. 拍照完成自动上传服务端，进行识别验证用户信息

业务实现流程
1.官网下载demo，官网download
官网地址：tracking官网直通车

2. 改动官网所需案例demo
   我用的demo是如图所示
   
   vue中稍微更改即可

<template>
  <div class="testTrackingWrapper">

    <video id="video" width="340" height="300" preload autoplay loop muted></video>
    <canvas id="canvas" width="340" height="300" ></canvas>
    <div class="buttonWrapper">
      <button type="button" @click="submitPhoto">上传</button>
      <button type="button" name="button" @click="openCamera">拍照</button>
    </div>
  </div>
</template>

<script>
    require('./../assets/js/tracking-min');
    require('./../assets/js/face-min.js');
    require('./../assets/js/dat.gui.min.js')
    require('./../assets/js/stats.min')
  export default {
  
    data(){
      return {

      }
    },
    methods:{
      openCamera () {
        var _this=this;
        var video = document.getElementById('video');
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        var tracker = new tracking.ObjectTracker('face');
        tracker.setInitialScale(4);
        tracker.setStepSize(2);
        tracker.setEdgesDensity(0.1);

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

        tracker.on('track', function(event) {
          context.clearRect(0, 0, canvas.width, canvas.height);

          event.data.forEach(function(rect) {
            context.font = '11px Helvetica';
            context.fillText("已识别到人脸，请点击拍照",100,40);
            context.strokeStyle = '#a64ceb';
            context.strokeRect(rect.x, rect.y, rect.width, rect.height);
            
          });
        });

      },
      submitPhoto () {
          let _this = this
          let canvas = document.getElementById('canvas')
          let context = canvas.getContext('2d')
          let video = document.getElementById('video')
          context.drawImage(video, 0,0, 500, 400)
          canvas.toBlob((blob) => {
              console.log(blob,URL.createObjectURL(blob))
                // 此处写上传到后台的接口即可
                
          })
      }
    },
    mounted(){
        this.openCamera()
    },
    destroyed () {
      // 停止侦测
      this.trackerTask.stop()
      // 关闭摄像头
      this.trackerTask.closeCamera()
    }
  }

</script>

<style   scoped>
.testTrackingWrapper {
  height: 100vh;
  width: 100%;
  position: relative;
 }
  video, canvas {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }
 .buttonWrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30%;
  }
</style>

最后效果如图所示

靓女图

大汉图

避坑小节

1. 本地测试 localhost才可以测试成功，本机ip不行
2. 台式机没有摄像头也不行
3. 摄像头里没有妹子不行（开个玩笑）

刚学还是个菜鸟 大佬们请轻喷。。。

附赠js包：
链接1：https://download.csdn.net/download/weixin_43648344/12461083
链接2：https://pan.baidu.com/s/1gzMBxQFgLzKcly8qHiAcSQ
提取码：io3i