<template>
  <div>
    <div class="video-box">
      <video id="video" width="480" height="360" autoplay ></video>
      <canvas id="canvas"  width="480" height="360"></canvas>
    </div>
    <canvas id="screenshotCanvas" width="480" height="360" @click="init"></canvas>

    <div class="switch-button">
      <el-row>
        <el-col :span="12">
          <el-button type="primary"  size="mini" @click="destroyed">关闭摄像头</el-button>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" size="small" @click="init">开始识别</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import tracking from '@/assets/tracking/build/tracking-min.js';
  import '@/assets/tracking/build/data/face-min.js';

  export default {
    data() {
      return {
        trackerTask: null,
        mediaStreamTrack: null,
        video: null,
        screenshotCanvas: null,
        uploadLock: true // 上传锁
      }
    },
    props:['updateTime'],
    mounted() {
      setTimeout( this.init, 1500 )
    },
    beforeDestroy(){
      this.destroyed()
    },
    watch:{
      updateTime(){
        this.init();
      }
    },
    methods: {
      // 初始化设置
      init() {
        this.video = this.mediaStreamTrack = document.getElementById('video');
        this.screenshotCanvas = document.getElementById('screenshotCanvas');
        let canvas = document.getElementById('canvas');
        let context = canvas.getContext('2d');
        // 固定写法
        let tracker = new window.tracking.ObjectTracker('face');
        tracker.setInitialScale(4);
        tracker.setStepSize(2);
        tracker.setEdgesDensity(0.1);
        //摄像头初始化
        this.trackerTask = window.tracking.track('#video', tracker, {
          camera: true
        });

        let _this = this;
        tracker.on('track', function(event) {
          // 检测出人脸 绘画人脸位置
          context.clearRect(0, 0, canvas.width, canvas.height);
          event.data.forEach(function(rect) {
            context.strokeStyle = '#0764B7';
            context.strokeRect(rect.x, rect.y, rect.width, rect.height);
          });
          // event.data.length长度为多少代表检测几张人脸
          if(_this.uploadLock && event.data.length){
          //上传图片
              _this.screenshotAndUpload();
          }
        });
      },
      // 上传图片
      screenshotAndUpload() {
        // 上锁避免重复发送请求
        this.uploadLock = false;
        // 绘制当前帧图片转换为base64格式
        let canvas = this.screenshotCanvas;
        let video = this.video;
        let ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        let base64Img = canvas.toDataURL('image/jpeg', 1);

        this.$emit("getface", base64Img.replace("data:image/jpeg;base64,", "") )

        // 请求接口成功以后打开锁
        this.uploadLock = true;
      },
      //关闭摄像头
      destroyed(){
        if(!this.mediaStreamTrack || !this.mediaStreamTrack.srcObject ){
          return
        }
        let getTracks =  this.mediaStreamTrack.srcObject.getTracks()
        if( getTracks.length >0 ) getTracks[0].stop();
      }
    }
  }
</script>

<style scoped>
  /* 绘图canvas 不需显示隐藏即可 */
  #screenshotCanvas{
    display: none;
  }

  .video-box{
    position: relative;
    margin-left: 5px;
    width: 480px;
    height: 360px;
  }

  .switch-button{
    /* margin-top: -50px; */
    margin: 28px auto;
    text-align: center;
    /* margin-left: 30px; */
    /* text-align: center; */
    /* margin-left: 30px; */
  }
  video,canvas{
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    /* border: #000000 5px solid; */
  }
</style>
