fix: change qr code scanner to one that is supported by safari

Author: balebbae

client/web/package-lock.json

@@ -46,6 +46,7 @@
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
+    "jsqr": "^1.4.0",
     "lucide-react": "^0.562.0",
     "next-themes": "^0.4.6",
     "react": "^19.2.0",

client/web/package.json

@@ -33,7 +33,7 @@ export function ScannerDialog() {
     [performScan],
   );
 
-  const { videoRef, error, supported } = useQrScanner({
+  const { videoRef, error } = useQrScanner({
     enabled: !!activeScanType,
     paused: !!lastScanResult || scanning,
     onDetect: handleScan,
@@ -61,17 +61,7 @@ export function ScannerDialog() {
         </DialogHeader>
 
         <div className="relative">
-          {!supported ? (
-            <div className="flex aspect-square items-center justify-center rounded-lg bg-muted p-6 text-center text-sm text-muted-foreground">
-              <div className="space-y-2">
-                <AlertCircle className="mx-auto size-8" />
-                <p>
-                  QR scanning is not supported in this browser. Please use
-                  Chrome or Safari.
-                </p>
-              </div>
-            </div>
-          ) : error ? (
+          {error ? (
             <div className="flex aspect-square items-center justify-center rounded-lg bg-muted p-6 text-center text-sm text-muted-foreground">
               <div className="space-y-2">
                 <AlertCircle className="mx-auto size-8" />

client/web/src/pages/admin/scans/components/ScannerDialog.tsx

@@ -1,3 +1,4 @@
+import jsQR from "jsqr";
 import { useEffect, useRef, useState } from "react";
 
 interface UseQrScannerOptions {
@@ -9,7 +10,6 @@ interface UseQrScannerOptions {
 interface UseQrScannerReturn {
   videoRef: React.RefObject<HTMLVideoElement | null>;
   error: string | null;
-  supported: boolean;
 }
 
 const DETECTION_INTERVAL_MS = 100; // ~10 FPS
@@ -21,19 +21,18 @@ export function useQrScanner({
 }: UseQrScannerOptions): UseQrScannerReturn {
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const streamRef = useRef<MediaStream | null>(null);
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const onDetectRef = useRef(onDetect);
   const [error, setError] = useState<string | null>(null);
 
-  const supported = "BarcodeDetector" in window;
-
   // Keep callback ref current without restarting effects
   useEffect(() => {
     onDetectRef.current = onDetect;
   });
 
   // Camera lifecycle
   useEffect(() => {
-    if (!enabled || !supported) return;
+    if (!enabled) return;
 
     let cancelled = false;
 
@@ -71,13 +70,17 @@ export function useQrScanner({
         video.srcObject = null;
       }
     };
-  }, [enabled, supported]);
+  }, [enabled]);
 
   // Detection loop
   useEffect(() => {
-    if (!enabled || paused || !supported) return;
+    if (!enabled || paused) return;
+
+    if (!canvasRef.current) {
+      canvasRef.current = document.createElement("canvas");
+    }
+    const canvas = canvasRef.current;
 
-    const detector = new BarcodeDetector({ formats: ["qr_code"] });
     let rafId: number;
     let lastTime = 0;
     let detected = false;
@@ -93,24 +96,31 @@ export function useQrScanner({
       if (!video || video.readyState < HTMLMediaElement.HAVE_ENOUGH_DATA)
         return;
 
-      detector
-        .detect(video)
-        .then((barcodes) => {
-          if (detected || barcodes.length === 0) return;
-          detected = true;
-          onDetectRef.current(barcodes[0].rawValue);
-        })
-        .catch(() => {
-          // Detection errors are non-fatal, continue loop
-        });
+      const { videoWidth, videoHeight } = video;
+      if (videoWidth === 0 || videoHeight === 0) return;
+
+      const ctx = canvas.getContext("2d", { willReadFrequently: true });
+      if (!ctx) return;
+
+      canvas.width = videoWidth;
+      canvas.height = videoHeight;
+      ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
+
+      const imageData = ctx.getImageData(0, 0, videoWidth, videoHeight);
+      const result = jsQR(imageData.data, videoWidth, videoHeight);
+
+      if (result) {
+        detected = true;
+        onDetectRef.current(result.data);
+      }
     }
 
     rafId = requestAnimationFrame(tick);
 
     return () => {
       cancelAnimationFrame(rafId);
     };
-  }, [enabled, paused, supported]);
+  }, [enabled, paused]);
 
-  return { videoRef, error, supported };
+  return { videoRef, error };
 }