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()
      }
  }