【tracking.js】前端人脸识别框架 tracking.js 活体检测/拍照在 vue2 的使用

Tracking.js 是一个独立的JavaScript库，用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。它是非常易于使用的API，具有数个方法和事件(足够使用了)。

做项目要用到活体检测和拍照的

实现效果

活体检测组件

包需到下载 tracking-min.js 和 face-min.js 压缩文件，自行百度。

点击查看活体检测组件代码

<template>
  <el-dialog
    :visible="modalVisible"
    width="681px"
    custom-class="compaines-dialog"
    title="Complete Registration"
    class="face-dialog"
    v-dialogDrag
    :close-on-click-modal="false"
    @close="close"
    :append-to-body="true"
  >
    <div class="face" v-loading="faceloading">
      <p class="big-title">Liveness detection</p>
      <!-- <p v-if="steps === 'open' || steps === 'screen'">
        Please place your face into the outlined area,we will take the photo
        automatically!
      </p> -->
      <p v-if="steps === 'open' || steps === 'screen'">
        {
   
   { faceTips[imgList.length] }}
      </p>
      <div
        v-if="steps === 'screen' && imgList.length > 0"
        style="text-align: center; font-size: 30px"
      >
        <svg-icon :iconClass="faceLocation[imgList.length]" />
      </div>
      <p v-if="steps === 'end'">
        <span v-if="faceOk" class="success">Successful!</span>
        <span v-else class="fail">Failed!</span>
      </p>
      <div class="video-container" v-show="steps !== 'end'">
        <video
          id="video"
          preload
          autoplay
          loop
          muted
          width="295"
          height="345"
          :style="reverse ? 'transform:rotateY(180deg);' : ''"
        ></video>
        <canvas id="canvas" width="295" height="345"></canvas>
        <canvas
          id="shortCut"
          width="295"
          height="345"
          style="opacity: 0"
        ></canvas>
        <canvas
          id="canvas1"
          width="295"
          height="345"
          style="opacity: 0"
        ></canvas>
        <i @click="reverseVideo" v-show="steps === 'screen'">
          <svg-icon iconClass="icon-camera" class="icon-camera" />
        </i>
      </div>
      <div v-show="steps === 'end'" style="text-align: center">
        <img v-if="faceOk" src="@/icons/img/face-success.png" alt="" />
        <img v-else src="@/icons/img/face-fail.png" alt="" />
      </div>
      <div class="btns">
        <div class="add-num w300" @click="start" v-if="steps === 'open'">
          TURN CAMERA ON
        </div>
        <div
          class="retake-btn w300"
          style="margin-right: 0"
          @click="close"
          v-if="steps === 'screen'"
        >
          TURN CAMERA OFF
        </div>
        <div
          class="retake-btn w300"
          @click="tryAgain"
          v-if="steps === 'end' && !faceOk"
        >
          TRY AGAIN
        </div>
        <div
          class="add-num w300"
          @click="finish"
          v-if="steps === 'end' && faceOk"
        >
          FINISH
        </div>
        <p class="tips" v-if="steps === 'screen'">
          (To complete the liveness detection your camera must remain on)
        </p>
      </div>
      <div class="imgs" v-show="false">
        <p>未保存图片</p>

        <p>已保存图片</p>
        <div id="img"></div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import './tracking-min.js'
import './face-min.js'
import { livenessCheck } from '@modules/kyc/api/system/system'
import debounce from 'lodash/debounce'

export default {
  name: 'testTracking',
  model: {
    prop: 'formData',
    event: 'input',
  },
  props: {
    modalVisible: {
      type: Boolean,
      default: false,