<template>
  <div class="renlianBox">
    <div class="videoBox">
      <video id="video" width="290" height="300" preload autoplay loop muted></video>
      <div class="renlian" style="z-index: 999">
        <div class="box">
          <div class="line"></div>
          <div class="bottom"></div>
        </div>
      </div>
      <canvas id="canvas" width="500" height="500" style="position: fixed;top: -10000px"></canvas>
    </div>

  </div>
</template>

<script>
import tracking from '@/api/tracking-min'
import '@/api/face-min'
import { post, get } from "@/api/common";
export default {
  name: "renlian",
  data () {
    return {
      video: null,
      canvas: null,
      uploadLock: true
    };
  },
  mounted () {
    this.openCamera()
  },
  methods: {
    // 初始化设置
    openCamera () {
      this.video = document.getElementById('video');
      this.canvas = document.getElementById('canvas');
      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);
      window.tracking.track('#video', tracker, {
        camera: true
      });
      let that = this;
      tracker.on('track', (event) => {
        // 检测出人脸 绘画人脸位置
        context.clearRect(0, 0, canvas.width, canvas.height);
        event.data.forEach((rect) => {
          context.strokeStyle = '#0764B7';
          context.strokeRect(rect.x, rect.y, rect.width, rect.height);
          // 上传图片
          that.uploadLock && that.screenshotAndUpload();
        });
      });
    },
    // 上传图片
    screenshotAndUpload () {
      // 上锁避免重复发送请求
      this.uploadLock = false;
      // 绘制当前帧图片转换为base64格式
      let canvas = this.canvas;
      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');
      let imgBase64 = base64Img.split(',')
      // 使用 base64Img 请求接口即可
      post('/CustomFace/faceIdentify', { image: imgBase64[1], loginType: 0 }).then(res => {
        if (res.code == 10000) {
          this.$emit('loginClick', res.data.phone)
        }
      }).catch(err => {
        setTimeout(() => {
          this.uploadLock = true
        }, 3000)

      })
      // 三秒后重新检测人脸

    },
  }

}
</script>

<style lang="scss">
.renlianBox {
  width: 100%;
  height: 100%;

  .videoBox {
    width: 290px;
    height: 290px;
    margin: 30px auto;
    position: relative;
  }
}

.renlian {
  position: absolute;
  left: 0;
  top: 0;
  background-size: 100% 100%;
}

.video {
  position: relative;
  // height: 90px;
  // width: 274px;
  background-size: 100% 100%;
}

.renlian .box {
  width: 300px;
  height: 300px;
  // max-height: 30vh;
  // max-width: 30vh;
  overflow: hidden;
  border: 0.1rem solid rgba(3, 169, 244, 0.2);
}

.renlian .line {
  height: calc(100% - 2px);
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #03a9f4 211%);
  border-bottom: 2px solid #03a9f4;
  transform: translateY(-100%);
  animation: radar-beam 2s infinite;
  animation-timing-function: cubic-bezier(0.3, 0, 0.43, 0.7);
  animation-delay: 1.4s;
  z-index: 999;
}

.renlian .box:after,
.renlian .box:before,
.renlian .bottom:after,
.renlian .bottom:before {
  content: "";
  display: block;
  position: absolute;
  width: 3vw;
  height: 3vw;
  z-index: 999;
  border: 0.2rem solid transparent;
}

.renlian .box:after,
.renlian .box:before {
  top: 0;
  border-top-color: #03a9f4;
  z-index: 999;
}

.renlian .bottom:after,
.renlian .bottom:before {
  bottom: 0;
  border-bottom-color: #03a9f4;
}

.renlian .box:before,
.renlian .bottom:before {
  left: 0;
  border-left-color: #03a9f4;
}

.renlian .box:after,
.renlian .bottom:after {
  right: 0;
  border-right-color: #03a9f4;
}

@keyframes radar-beam {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}
</style>
