vue項目人臉偵測(tracking.js)

Vue項目,利用tracking.js 實現人臉偵測(攝像頭輸入,圖片同理)
 1 <template>
<div>
<video autoplay playsinline ref="video" id="video"></video>
<canvas id="canvas" width="500" height="400" class="canvas"></canvas>
<div @click="submit">上傳照片</div>
</div>
</template>
<script>
import tracking from '@/assets/js/tracking.js'
import '@/assets/js/face-min.js'
export default {
  name: 'componentName',
  data () {
    return {
        videoEle: null
    }  
  },
  method () {
    openCamera () {
      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 > 0) {
          console.log('有頭像')
          //人臉位置矩形頂點
          console.log(event.data)
        } else {
          console.log('沒有頭像')
        }
      })
  },
  submit () {
        console.log('提交')
        let that = this
        let canvas = document.getElementById('canvas')
        let context = canvas.getContext('2d')
        let video = document.getElementById('video')
        context.drawImage(video, 0,0, 500, 400)
        canvas.toBlob((blob) => {
          // window.open(URL.createObjectURL(blob))
          // blob 格式 圖片url
          // that.avatarUrl = URL.createObjectURL(blob)
          axios.post({faceUrl: URL.createObjectURL(blob)})
          .then((res) => {
           console.log('上傳成功')
          })
        })        
      }
    }
  },
  mounted () {
    this.videoEle = this.$refs.video
    this.openCamera()
  },
  destroyed () {
    // 停止偵測
    this.trackerTask.stop()
    // 關閉攝像頭
    window.tracking.closeCamera()
  }
}