vue使用tracking人脸识别实现拍照并上传给后台安装 npm install tracking -s

116 阅读 0 评论 77 点赞

我是靠谱客的博主糟糕丝袜，最近开发中收集的这篇文章主要介绍vue使用tracking人脸识别实现拍照并上传给后台安装 npm install tracking -s，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

安装 npm install tracking -s

<template>
  <div class="face" v-show="isShowFace">
    <div class="faceBack"></div>
    <div class="faceDataDlo">
      <div class="titleDialog" >
         <p>人脸识别</p><i></i>
        <em  class="el-icon-close detIcon" @click="isOpenShow()"></em>
      </div>
      <div class="faceDiv" v-if="isSuccessful === ''">
        <p>请衣着整齐，坪石摄像头，并正对光源</p>
        <div class="faceData">
          <div class="leftTop"></div>
          <div class="rightTop"></div>
          <div class="leftButton"></div>
          <div class="rightButton"></div>
          <i class="faceDataLine"></i>
          <video  autoplay playsinline id="video" width="300" height="300"></video>
          <canvas id="canvas" width="300" height="300"></canvas>
        </div>
        <el-button class="refer-btn"  type="primary">人脸识别中...</el-button>
      </div>

<!--      审核中-->
      <div class="faceDivSuccessful" v-if="isSuccessful === 'audit'">
        <img class="auditImg" src="../assets/images/auditImg.png" alt="">
        <p>人工正在识别中请耐心等待...</p>
        <p style="width: 400px"><el-progress :percentage="waitingTme" :format="format"></el-progress></p>
      </div>
<!--      成功-->
      <div class="faceDivSuccessful" v-if="isSuccessful === 'successful'">
        <img src="../assets/images/faceSuccessful.png" alt="">
        <p>已识别成功<br>
          点击下方按钮就开始考试</p>
        <el-button class="refer-btn"  type="primary" @click="isRouter()">{{isOnline? '继续考试' : '开始考试'}}</el-button>
      </div>
<!--      失败-->
      <div class="faceDivSuccessful" v-if="isSuccessful === 'failure'">
        <img src="../assets/images/faceErr.png" alt="">
        <p>识别失败<br>
          请拨打下方电话，联系管理员<br>
          400-038-8978
        </p>
        <el-button class="refer-btn"  type="primary">申请人工审核</el-button>
        <el-button class="refer-btn"  type="primary" @click="setSuccessful()">重新识别</el-button>
      </div>
    </div>
  </div>

</template>

<script>
require('tracking/build/tracking-min.js');
require('tracking/build/data/face-min.js');
import { faceServe } from '@/api/home'
export default {
  name: "face",
  props: {
    isOnline: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      isShowFace: true,
      trackerTask: null,
      mediaStreamTrack: null,
      start: true,
      isSuccessful: '',
      waitingTme: 10,
    }
  },

  mounted() {
    this.openUserMedia()
    this.openCamera()

  },
  methods: {
    format(percentage) {
      return percentage? '' : `${percentage}%`;
    },
    setTime() {
      const isTime = setInterval(() => {
        this.waitingTme += 1
        if(this.waitingTme === 99) {
          clearInterval(isTime)
        }
      }, 200)
    },
    isRouter() {
      this.$emit('isRouter')
    },
    isOpenShow() {
      this.$emit('isValidationFace')
      this.trackerTask.stop();
    },
    setSuccessful() {
      this.isSuccessful = ''
    },
    success(stream) {
      const than = this;
      let video = document.getElementById("video");
      than.mediaStreamTrack = null;
      than.mediaStreamTrack = stream;
      try {
        video.srcObject = stream;
      } catch (e) {
        console.log("访问用户媒体设备失败：", e.name, e.message);
      }
      video.play();//播放视频
    }, error(error) {
      console.log('访问用户媒体失败：', error.name, error.message);
    },

    getUserMediaToPhoto(constraints, success, error) {
      if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
      } else if (navigator.webkitGetUserMedia) {
        navigator.webkitGetUserMedia(constraints, success, error);
      } else if (navigator.mozGetUserMedia) {
        navigator.mozGetUserMedia(constraints, success, error);
      } else if (navigator.getUserMedia) {
        navigator.getUserMedia(constraints, success, error);
      }
    },
    openCamera() {
      const than = this;
      let tracker = new window.tracking.ObjectTracker('face');
      tracker.setInitialScale(4);
      tracker.setStepSize(2);
      tracker.setEdgesDensity(0.1);
      than.trackerTask = tracking.track('#video', tracker, {camera: true})
      tracker.on('track', (event) => {
        if (event.data.length > 0) {
          event.data.forEach( () => {
            console.log('识别成功')
            if(than.start) {
              than.setTime()
              this.isSuccessful = 'audit'
              than.isOpen()
            }
          });
        }

      })
    },
    openUserMedia() {
      if (navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia) {
        this.getUserMediaToPhoto({
          video: {
            width: 300,
            height: 300,
            facingMode: "user"
          }
        }, this.success, this.error);
      } else {
        alert('你的浏览器不支持访问用户媒体设备');
      }
    },
    async isOpen() {
      let video = document.getElementById('video'),
        canvas = document.getElementById('canvas');
        // vendorUrl = window.URL || window.webkitURL;
      navigator.getMedia = navigator.getUserMedia ||
        navagator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia;
      navigator.getMedia({
        video: true, //使用摄像头对象
        audio: false  //不适用音频
      }, function(){
        video.play();
      }, function(error) {
        //error.code
        console.log(error);
      });
      canvas.getContext('2d').drawImage(video, 0, 0, 300, 300);
       const imgData = canvas.toDataURL("image/png")
      const [ , imgDataTwo] = imgData.split(',')
      let formData = new FormData()
      formData.append('file', imgDataTwo);
      this.start = false;
      // 接口请求
     const data = await faceServe.personVerify(formData);
      if(data.data.code !== 0) {
        this.isSuccessful = 'failure'
      }else {
        this.isSuccessful = 'successful'
      }
      this.trackerTask.stop()
    },
  },
}
</script>

<style scoped lang="scss">
.face{width: 100%;height: 100%;position: fixed;left: 0;top: 0;z-index: 111;display: flex;justify-content: center;background: rgba(0,0,0,0.5)}
.face .faceDataDlo{width: 665px;height: 600px;background: #fff;margin-top: 10%}
.titleDialog{display: flex;flex-direction: column;align-items: center;padding-top: 20px;position: relative}
.titleDialog p{font-size: 20px;color: #333;}
.titleDialog i{width: 105px;height: 13px;@include bgColor('primary');margin-top: -12px;opacity: 0.37}
.faceDiv{display: flex;flex-direction: column;align-items: center}
.faceDiv p{font-size: 15px;color: #333;margin: 50px 0 42px}
.faceDiv .faceData{width: 300px;height: 300px;overflow: hidden;position: relative;margin-bottom: 50px}
.faceDiv .leftTop{width: 50px;height: 50px;border-left: 10px solid #2E58FF;border-top: 10px solid #2E58FF;position: absolute;left: 0;top: 0}
.faceDiv .rightTop{width: 50px;height: 50px;border-right: 10px solid #2E58FF;border-top: 10px solid #2E58FF;position: absolute;right: 0;top: 0}
.faceDiv .leftButton{width: 50px;height: 50px;border-left: 10px solid #2E58FF;border-bottom: 10px solid #2E58FF;position: absolute;left: 0;bottom: 0}
.faceDiv .rightButton{width: 50px;height: 50px;border-right: 10px solid #2E58FF;border-bottom: 10px solid #2E58FF;position: absolute;right: 0;bottom: 0}
.faceDiv .faceDataLine{width: 300px;height: 2px;background: #2E58FF;position: absolute;top: 0; animation: keyLine 1.5s infinite }
.faceDivSuccessful{display: flex;flex-direction: column;align-items: center}
.faceDivSuccessful p{font-size: 15px;color: #999;text-align: center;margin-bottom: 45px}
.faceDivSuccessful img{margin: 55px 0 25px}
.faceDivSuccessful .auditImg{margin: 150px 0 25px}
.refer-btn {width: 233px;border-radius: 50px;}
.detIcon{font-size: 30px;position: absolute;top: 10px;right: 10px;cursor: pointer}
.detIcon:hover{color: #2E58FF }
@keyframes keyLine {
  0%{top: 0}
  50%{top: 300px}
  100%{top: 0}
}



</style>