<template>
  <video ref="videoRef" autoplay playsinline muted style="display: none;" />
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Detector } from './hand_landmark/detector';

const videoRef = ref<HTMLVideoElement | null>(null);
const detector = new Detector();

onMounted(async () => {
  await detector.initialize();

  const video = videoRef.value!;
  video.width = 640;
  video.height = 480;

  navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
    video.srcObject = stream;
    video.play();

    setInterval(async () => {
      const result = await detector.detect(video);
      await detector.process(result);
    }, 200);
  });
});
</script>
