vue 人脸识别 demo

<video id="video" preload autoplay loop muted></video>
<canvas id="canvas" width="500" height="500"  style="position:absolute;top:0;left:0;"></canvas>     

export default {
    name: 'componentName',
    data() {
        return {
            videoEle: null,
            trackerTask:null,
            first:null
        }  
    },
    created(){
        this.openCamera();
    },
    mounted(){
    },
    methods: {
        openCamera () {

          var video = document.getElementById('video');
          var canvas = document.getElementById('canvas');
          var context = canvas.getContext('2d');

          var tracker = new tracking.ObjectTracker('face');  // 引入第三方 库
          tracker.setInitialScale(1);           
          tracker.setStepSize(2);
          tracker.setEdgesDensity(0.1);

          this.trackerTask = tracking.track('#video', tracker, { camera: true });
          //-------  指定 canvas 的宽高 ，auto 自动播放
          let constraints = {
                video: {width: 500, height: 500},
                audio: true
            };

          let promise = navigator.mediaDevices.getUserMedia(constraints);   // h5 新的API
            
            promise.then(function (MediaStream) {
                video.srcObject = MediaStream;
                video.play();
            }).catch(function (PermissionDeniedError) {
                console.log(PermissionDeniedError);
            })
            //--------------
            let that = this;
            that.tracker_fun(tracker,video,context,canvas); //open 摄像头，执行tracker_fun( 传入参数 )

      },
      tracker_fun(tracker,video,context,canvas){
        let that = this;
        let set_clear;
        set_clear = setTimeout(function(){ // 每秒 检测人脸 结果
              tracker.on('track', function(event) {     // 视频流
                // context.clearRect(0, 0, canvas.width, canvas.height);
              if(!that.first){     // if  --- > else  检测到人脸 success() =>{}
              event.data.forEach(function(rect) {
                if(rect.x){
                  that.first = rect.x;
                  video.pause();    // success  将暂停 video
                  console.log(rect)
                  console.log(video)
                  context.drawImage(video, 0, 0, 500, 500);   // 绘制到 canvas 
                  context.font = '11px Helvetica';
                  context.fillText("",100,40);
                  context.strokeStyle = '#a64ceb';
                  context.strokeRect(rect.x, rect.y, rect.width, rect.height); 
                  var data_url = canvas.toDataURL('image/png'); //base64 request
                  console.log(data_url)

                  // video.load();
                  // that.first = null;
                  // that.tracker_fun(tracker,video,context,canvas)
                  return;
                }
              });
              }
            });
              clearTimeout(set_clear)
              console.log('-------')
        },5000)
        
      }
    },
    mounted() {

    },
    destroyed() {
        // 停止侦测
        this.trackerTask.stop()
        // 关闭摄像头
        window.tracking.closeCamera()
    }    
}