vue使用trackingjs

 

• 前言：因為公司是做人工智能-AI的，所有一個web數據平台為了裝X，需要做個人臉登陸。前台需要把人臉的base64發給后台去做人臉校驗。
  　　　功能很簡單，需要注意的是web需要實現“調用攝像頭”和“自動拍照”。於是開始找資料，在github上找到個8363星的trackingjs，不得
           不說js如此強大。可是當我在最后發現trackingjs沒有關閉攝像頭，於是在網上也找了一些例子都沒有成功關閉。被迫不得不去看tracking
           的源碼。最后把代碼發出來，給后人參考。
• 下載
  官網地址：https://trackingjs.com/。我的網盤下載，提取碼：nuex。我這里直接下載壓縮包到本地。解壓后我們需要下面這兩個文件
  tracking.js/build/tracking-min.js,
  tracking.js/build/data/face-min.js
• 引入vue項目使用
  
  

  // 引入trackingjs所需文件
  import tracking from '@/assets/js/tracking-min.js'
  import '@/assets/js/face-min.js'
  
  export default {
      name: 'login',
      data() {
          return {
              trackerTask: null,
              trackering: null,
              mediaStreamTrack: null
          }
      },
      mounted() {
          this.getCompetence()
      },
      methods: {
          getCompetence() {
              let flag = true;
              const _this = this;
              const video = this.mediaStreamTrack = document.getElementById('videoCamera-face');
              const canvas = document.getElementById('canvas-face');
              const context = canvas.getContext('2d');
  
              const tracker = new window.tracking.ObjectTracker('face');
              tracker.setInitialScale(4);
              tracker.setStepSize(2);
              tracker.setEdgesDensity(0.1);
              // 啟動攝像頭初始化
              this.trackerTask = window.tracking.track('#videoCamera-face', tracker, {
                  camera: true
              });
              tracker.on('track', function(event) {
                  context.clearRect(0, 0, canvas.width, canvas.height);
                  event.data.forEach(function(rect) {
                      context.strokeStyle = '#ff0000';
                      context.strokeRect(rect.x, rect.y, rect.width, rect.height);
                  });
                  if (event.data.length) {
                      // 會不停的去檢測人臉，所以這里需要做個鎖
                      if (flag) {
                          // 裁剪出人臉並繪制下來
                          const canvasUpload = document.getElementById('canvas-face-upload')
                          const contextUpload = canvasUpload.getContext('2d')
                          contextUpload.drawImage(video, 0, 0, 105, 105)
                          flag = false
                          // 人臉的basa64
                          const dataURL = canvasUpload.toDataURL('image/jpeg');
                          // ajax請求
                          _this.$store.dispatch('LoginByFaceID', {
                              face_img: dataURL.slice(23) // 我們后台需要的basa64不要前綴
                          }).then(res => {
                              let type = 'success'
                              // 登錄成功跳轉到首頁
                              if (res.data.code === 200) {
                                  _this.$router.push({
                                      path: '/'
                                  });
                              }
                              // 登錄失敗重新進行人臉檢測
                              else {
                                  type = 'error'
                                  setTimeout(() => {
                                      flag = true
                                  }, 1500)
                              }
                              _this.$message({
                                  message: res.data.message,
                                  type,
                                  center: true
                              });
                          }).catch(error => {
                              console.log(error)
                          })
                      }
                  }
              });
          }
      },
      destroyed() {
          if(!this.mediaStreamTrack){
              return
          }
          // 關閉攝像頭和偵測
          this.mediaStreamTrack.srcObject.getTracks()[0].stop();
          this.trackerTask.stop()
      }
  }