<script setup>
import { Html5Qrcode } from "html5-qrcode";

const emit = defineEmits(["scanned"]);
let scanner;

onMounted(async () => {
  scanner = new Html5Qrcode("scanner-region");
  await scanner.start(
    { facingMode: "environment" }, // or 'user' for front cam
    { fps: 10, qrbox: 450 },
    (decodedText) => {
      console.log("scanned", decodedText);
      emit("scanned", decodedText);
      scanner.stop(); // stop after first scan
    },
    (errorMsg) => {
      console.log("errorMsg", errorMsg);
    }, // ignore per-frame scan failures
  );
});

onBeforeUnmount(() => {
  scanner?.stop().catch(() => {});
});
</script>

<template>
  <div id="scanner-region"></div>
</template>
