<template>
  <div class="wrapp">
    <div
        class="status"
        :style="{ color: msg === '檢測到人臉' ? 'green' : 'red' }">
      {{ msg }}
    </div>
    <div class="rWrapp">
      <video id="myVideo" preload="preload" autoplay loop muted />
      <canvas ref="myCanvas" class="myCanvas" width="200" height="200" ></canvas>
    </div>
    <div class="flex align-items please-do-not justify-content-sb">
      <div>
        <img src="@/assets/img/eyes.png"
             alt="">
        <p>不能佩戴眼睛</p>
      </div>
      <div>
        <img src="@/assets/img/face.png"
             alt="">
        <p>不能遮擋臉部</p>
      </div>
      <div>
        <img src="@/assets/img/face-upward.png"
             alt="">
        <p>不能仰頭俯拍</p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Toast } from "vant";

const msg = ref<string>("沒識別到人臉...");

let trackerTask: any = null;

// 標識用的畫布
const myCanvas = ref<HTMLCanvasElement | null>(null);

// 例項顏色檢查器
const myTracker: any = new tracking.ObjectTracker("face");
myTracker.setInitialScale(4);
myTracker.setStepSize(2);
myTracker.setEdgesDensity(0.1);

// 監聽顏色檢查器
myTracker.on("track", (event: tracking.TrackEvent) => {
  const context = myCanvas.value?.getContext("2d") as CanvasRenderingContext2D;
  if (myCanvas.value) {
    context.clearRect(0, 0, myCanvas.value.width, myCanvas.value.height);
  }
  if (event.data.length === 0) {
    msg.value = "沒識別到人臉...";
  } else {
    trackerTask.stop();
    msg.value = "檢測到人臉";
    const myVideo = document.querySelector("#myVideo") as HTMLVideoElement;
    context.drawImage(myVideo, 0, 0, 210, 200);
    setTimeout(() => {
      Toast.success("識別成功");
    }, 1000);

    // @ts-ignore
    if (typeof window.stream === "object") {
      myVideo.srcObject = null;
      // @ts-ignore
      window.stream.getTracks().forEach((track) => track.stop());
    }
  }
});

onMounted(() => {
  // 觸發顏色檢查器
  trackerTask = tracking.track("#myVideo", myTracker, { camera: true });
});
</script>
<style lang="less" scoped>
.wrapp {
  height: 100%;
  background: url('../assets/img/background.png') no-repeat;
  background-size: 100% 100%;
  padding-top: 100px;
  .rWrapp {
    width: 200px;
    height: 200px;
    margin: auto;
    margin-top: 30px;
    position: relative;
    .myCanvas {
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 50%;
      width: 100%;
      height: 100%;
    }
    #myVideo {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }
  }
  .status {
    //margin-top: 100px;
    text-align: center;
  }

  .please-do-not {
    padding: 0 11.7%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    div {
      text-align: center;
    }
    img {
      width: 1.08rem;
      margin-bottom: 5%;
    }
    p {
      font-family: PingFangSC-Regular;
      font-size: .26rem;
      color: rgba(255,255,255,0.60);
      letter-spacing: 0;
    }
  }
}
</style>