revert scanner

1 files changed, 31 insertions, 174 deletions

diff --git a/src/routes/(app)/scan/+page.svelte b/src/routes/(app)/scan/+page.svelte
index 874fef96..b21a7458 100644
--- a/src/routes/(app)/scan/+page.svelte
+++ b/src/routes/(app)/scan/+page.svelte
@@ -1,204 +1,61 @@
 <script>
+  import { tick } from "svelte";
+  import Icon from "$comp/Icon.svelte";
+  import QrScanner from "qr-scanner";
+  import { onMount, onDestroy } from "svelte";
   import { back } from "$lib/utils";
   import { goto } from "$app/navigation";
-  import { onMount, onDestroy } from "svelte";
   import { BarcodeDetector } from "barcode-detector/ponyfill";
-  import { camera } from "$lib/store";
 
-  let resizing = $state();
+  let scanner,
+    vid = $state(),
+    resizing;
+
   let resize = () => {
     if (resizing) clearTimeout(resizing);
     resizing = setTimeout(initialize, 1000);
   };
 
-  let videoEl = $state();
-  let canvasEl = $state();
-  let cameras = $state([]);
-  let isIOS = $state();
-  let scanningStarted = $state();
-
-  let barcodeDetector;
-  let scanningFrameId;
-  let detectionResult = null;
-
-  async function getCameraDevices() {
-    try {
-      const devices = await navigator.mediaDevices.enumerateDevices();
-      cameras = devices.filter((device) => device.kind === "videoinput");
-
-      if (!$camera && cameras.length > 0) {
-        $camera = cameras[0].deviceId;
-      }
-    } catch (err) {
-      console.error("Error enumerating devices:", err);
-    }
-  }
-
-  async function startCamera(deviceId) {
-    stopCameraStream();
-    detectionResult = null;
-    try {
-      const constraints = deviceId
-        ? { video: { deviceId: { exact: deviceId } } }
-        : { video: { facingMode: "environment" } };
-      const stream = await navigator.mediaDevices.getUserMedia(constraints);
-      videoEl.srcObject = stream;
-      await videoEl.play();
-    } catch (err) {
-      console.error("Error accessing camera:", err);
-    }
-  }
-
-  function stopCameraStream() {
-    if (videoEl && videoEl.srcObject) {
-      const stream = videoEl.srcObject;
-      if (stream.getTracks) {
-        stream.getTracks().forEach((track) => track.stop());
-      }
-    }
-    if (scanningFrameId) {
-      cancelAnimationFrame(scanningFrameId);
-    }
-  }
-
-  function handleDetection(barcode) {
-    detectionResult = barcode.rawValue;
-    stopCameraStream();
-    goto(`/send/${encodeURIComponent(detectionResult)}`);
-  }
-
-  function scanLoop() {
-    if (!videoEl.videoWidth || !videoEl.videoHeight) {
-      scanningFrameId = requestAnimationFrame(scanLoop);
-      return;
-    }
-
-    const context = canvasEl.getContext("2d");
-    if (!context) return;
-
-    canvasEl.width = videoEl.videoWidth;
-    canvasEl.height = videoEl.videoHeight;
-    context.drawImage(videoEl, 0, 0, canvasEl.width, canvasEl.height);
-
-    barcodeDetector
-      .detect(canvasEl)
-      .then((barcodes) => {
-        if (barcodes.length > 0) {
-          handleDetection(barcodes[0]);
-          return;
-        }
-      })
-      .catch((err) => {
-        console.error("Detection error:", err);
-      });
-
-    if (!detectionResult) {
-      scanningFrameId = requestAnimationFrame(scanLoop);
+  let initialize = async () => {
+    if (scanner) {
+      scanner.stop();
+      await new Promise((r) => setTimeout(r, 1000));
     }
-  }
-
-  async function onCameraChange(event) {
-    $camera = event.target.value;
-    await startCamera($camera);
-    videoEl.addEventListener("loadeddata", () => {
-      canvasEl.width = videoEl.videoWidth;
-      canvasEl.height = videoEl.videoHeight;
-      scanLoop();
-    });
-  }
-
-  async function restart() {
-    detectionResult = null;
-    await startCamera($camera);
-    videoEl.addEventListener("loadeddata", () => {
-      canvasEl.width = videoEl.videoWidth;
-      canvasEl.height = videoEl.videoHeight;
-      scanLoop();
-    });
-  }
-
-  function startScanning() {
-    scanningStarted = true;
-    stopCameraStream();
-    detectionResult = null;
-    const constraints = $camera
-      ? { video: { deviceId: { ideal: $camera } } }
-      : { video: { facingMode: "environment" } };
-    navigator.mediaDevices
-      .getUserMedia(constraints)
-      .then((stream) => {
-        videoEl.srcObject = stream;
-        return videoEl.play();
-      })
-      .then(() => {
-        canvasEl.width = videoEl.videoWidth;
-        canvasEl.height = videoEl.videoHeight;
-        scanLoop();
-      })
-      .catch((err) => {
-        console.error("Error accessing camera:", err);
-      });
-  }
 
-  let initialize = async () => {
-    isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
-    barcodeDetector = new BarcodeDetector({ formats: ["qr_code"] });
-    await getCameraDevices();
-    if (!isIOS) startScanning();
+    let options = {
+      highlightScanRegion: true,
+      highlightCodeOutline: true,
+      qrEngine: BarcodeDetector,
+    };
+    let cb = ({ data }) =>
+      scanner.stop() || goto(`/send/${encodeURIComponent(data)}`);
+    scanner = new QrScanner(vid, cb, options);
+    await tick();
+    scanner.start();
   };
 
   onMount(initialize);
-
-  onDestroy(() => {
-    stopCameraStream();
-  });
+  onDestroy(() => scanner?.stop());
 </script>
 
 <svelte:window onresize={resize} />
+
 <div class="flex w-full mb-4 p-4">
-  <div class="mx-auto rounded-3xl space-y-5">
+  <div class="mx-auto rounded-3xl">
     <video
-      bind:this={videoEl}
+      bind:this={vid}
       class="border-4 rounded-3xl border-black max-h-[calc(100vh*0.7)]"
     ></video>
-    <canvas bind:this={canvasEl} style="display: none;"></canvas>
-    <div class="flex justify-center">
-      <button class="btn !w-auto" onclick={back}>Cancel</button>
-    </div>
-
-    {#if cameras.length > 1}
-      <div>
-        <select
-          id="cameraSelect"
-          bind:value={$camera}
-          onchange={onCameraChange}
-        >
-          {#each cameras as camera}
-            <option value={camera.deviceId}>
-              {camera.label || `Camera ${camera.deviceId}`}
-            </option>
-          {/each}
-        </select>
-      </div>
-    {/if}
-
-    {#if !scanningStarted}
-      <div class="flex justify-center">
-        <button class="btn !w-auto" onclick={startScanning}>
-          Start Scanning
-        </button>
-      </div>
-    {/if}
   </div>
 </div>
 
+<div class="flex justify-center">
+  <button class="btn !w-auto" onclick={back}>Cancel</button>
+</div>
+
 <style>
   video {
-    width: 100%;
-    max-width: 600px;
-    border: 4px solid black;
-    border-radius: 1rem;
-    transform: scale(1);
     transition: transform 0.3s ease-out;
+    transform: scale(1);
   }
 </style>