Vue人臉識別登陸

項目需求做登陸頁面，先是准考證號，然后人臉識別驗證匹配登陸！

因為要判斷有沒有人臉，沒有人臉的話就不會拍照對比，所以這里主要用到的是tracking.js,在組建中引入tracking.js和face-min.js(當然也可以npm安裝)

/*
*template
*/
<el-button type="primary" :loading="forming" @click="formTable">確認</el-button>//准考證號確認按鈕，點擊后開始調用攝像頭

<video width="375" height="290" autoplay playsinline ref="video" id="video" v-show="true"></video>
<canvas id="canvas" width="500" height="400" class="canvas" v-show="false"></canvas>

/*
*script
*/
export default{
   data(){
     return{
      submitBase:""//存儲拍到的base64照片,作為接口參數
      videoEle: null,
      trackerTask: null,
      mediaStreamTrack: null
     }
   },
   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 = 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;
            //下面就是axios調用接口了
      }
   }
}

效果圖：

借鑒地址：https://www.cnblogs.com/wangrui38/p/12503486.html