tracker.js进行人脸登录

Tracker.js进行人脸登录

HTML

<div class="video-box" style="width: 550px">
    <div style="font-size: 18px;font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: bold;
                color: #333333;line-height: 12px; text-align: center;margin-top: 5px;">请对准摄像头</div>
    <video style="clear:both;display:block;margin:auto;z-index:-1;position: relative;top: -295px;" id="video"
           width="358" height="270" preload autoplay loop muted></video>
    <canvas id="canvas" width="358" height="270" v-show="false"></canvas>
</div>
<canvas id="screenshotCanvas" width="358" height="270" v-show="false"></canvas>

初始化设置

init() {
  this.video = this.mediaStreamTrack = 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);
  //摄像头初始化
  this.trackerTask = window.tracking.track('#video', tracker, {
    camera: true
  });
  console.log(this.trackerTask,1234)
  let _this = this;
  tracker.on('track', function (event) {
    //检测出人脸 绘画人脸位置
    context.clearRect(0, 0, 300, 300);
    event.data.forEach(function (rect) {
      context.strokeStyle = '#0764B7';
      context.strokeRect(rect.x, rect.y, rect.width, rect.height);
    });
    // event.data.length长度为多少代表检测几张人脸

    if (_this.uploadLock && event.data.length) {
      //上传图片
      _this.screenshotAndUpload();
    }
  });
},

图片转Base64

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.getPic(base64Img)

},

处理登录业务

getPic(base64Img) {
  let file = this.btof(base64Img, 'test')
  console.log(file, 1234)
  let formData = new FormData();
  formData.append("face", file);
  console.log(formData, 22222)
  //转换base64到file
  let config = {
    headers: {'Content-Type': 'multipart/form-data'}
  }
  let url =  后端地址
  console.log("请求地址:"+url)
  console.log("人脸接口开始调用");
  var self = this
  this.$http.post(url, formData, config).then(res => {
    let result = res.data.result
    console.log("人脸接口返回" + JSON.stringify(result));
    //处理返回数据
  })
},
btof(data, fileName) {
  const dataArr = data.split(",");
  const byteString = atob(dataArr[1]);

  const options = {
    type: "image/jpeg",
    endings: "native"
  };
  const u8Arr = new Uint8Array(byteString.length);
  for (let i = 0; i < byteString.length; i++) {
    u8Arr[i] = byteString.charCodeAt(i);
  }
  return new File([u8Arr], fileName + ".jpg", options);
},

关闭摄像

//关闭摄像头
destroyed() {
  if (!this.mediaStreamTrack) {
    return
  }
  this.mediaStreamTrack.srcObject.getTracks()[0].stop();
  this.trackerTask.stop()
  this.trackerTask = null
  this.mediaStreamTrack = null
  this.video = null
  this.screenshotCanvas = null
  this.uploadLock = true // 上传锁
  this.deviceId = null
  this.controlQuit = null
  this.showVideo = false
  this.continueFlag = true // 是否继续调用face接口
  this.canvas = null
},