vue 人臉識別 demo

 看到很多網上 vue  實現人臉識別的 demo ，很多都是不成形的源碼。沒辦法，工作需要，自己借鑒別人的寫了一個demo。（ 可以滿足所有的需求 ）

1.需要引入 tracking.js 第三方庫

2.檢測到人臉自動 stop

3.canvas 壓縮圖片體積   正在上傳中...........  

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

demo 僅限於 pc端。

有問題，請大家幫忙指出