主要用到的是tracking.js,在組建中引入tracking.js和face-min.js

<video autoplay playsinline ref="video" id="video" class="viedert" v-show="true"></video>
<canvasid="canvas"class="canvas"></canvas>

　　import tracking from'@/assets/js/tracking-min.js'

import '@/assets/js/face-min.js'
export default
 
{
    components:{
        tracking
    },
   data(){
     return{
      submitBase:"",//儲存拍到的base64照片,作為介面引數
      videoEle: null,
      trackerTask: null,
      mediaStreamTrack: null
     }
   },
   mounted() {
        this.formTable()
    },
   methods:{
    formTable(){
        //flag是一個開關,不然tracking.js會不斷的拍照
 

        let flag = true;
        let tracker = new window.tracking.ObjectTracker("face");
        tracker.setStepSize(2);
        //轉頭角度影響識別率
        tracker.setEdgesDensity(0, 13);
        tracker.setInitialScale(5);
        this.trackerTask = window.tracking.track("video", tracker, {
          camera: 
 
true
        });
        tracker.on("track", event => {
          if (event.data.length) {
            //有頭像有頭像執行
            //會一直拍照,所有這裡加個鎖
            if (flag) {
              let vm = this;
              let video = this.mediaStreamTrack = document.querySelector("video");
              let canvas1 = document.querySelector("canvas");
              let context1 = canvas1.getContext("2d");
              canvas1.setAttribute("width", video.videoWidth);
              canvas1.setAttribute("height", video.videoHeight);
              flag = false;
              let image = context1.drawImage(
                video,
                0,
                0,
                video.videoWidth,
                video.videoHeight
              );
              let getBase = canvas1.toDataURL("image/png", 1); //1表示質量(無失真壓縮)
              this.submitBase = getBase;
              if (this.submitBase!== '') {
                  this.$router.push('/success');
                    //下面這句話是關閉攝像頭的
                  this.mediaStreamTrack.srcObject.getTracks()[0].stop();
              }

            //下面就是axios呼叫介面了
      }