From 64584315e5d4db528a8176f85839a876bd0da470 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 27 May 2026 19:51:08 +0000
Subject: [PATCH 1/2] Fix barcode scanner on iOS Safari

iOS WebKit does not provide a reliable native Barcode Detection API, and
ZXing often failed due to strict camera constraints and video startup timing.

- Install @undecaf/barcode-detector-polyfill (ZBar WASM) on Apple devices
- Fall back through progressively looser getUserMedia constraints
- Wait for video metadata/playback before decoding frames
- Throttle native scans on iOS and tune ZXing retry intervals
- Defer scanner startup until the modal video element is mounted

Co-authored-by: Ned Halksworth <hello@nedhalksworth.com>
---
 package-lock.json                      |  67 +++++-------
 package.json                           |   1 +
 src/components/BarcodeScannerModal.tsx |  44 +++++---
 src/lib/barcodeDetectorSupport.ts      |  35 +++++++
 src/lib/barcodeScanner.ts              | 138 ++++++++++++++++++++-----
 vite.config.ts                         |   1 +
 6 files changed, 203 insertions(+), 83 deletions(-)
 create mode 100644 src/lib/barcodeDetectorSupport.ts

diff --git a/package-lock.json b/package-lock.json
index 7aee627..a41cf41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
+        "@undecaf/barcode-detector-polyfill": "^0.9.23",
         "@vitejs/plugin-react": "^4.3.4",
         "@zxing/browser": "^0.2.0",
         "appwrite": "^25.0.0",
@@ -1160,9 +1161,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1176,9 +1174,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1192,9 +1187,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1208,9 +1200,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1224,9 +1213,6 @@
       "cpu": [
         "loong64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1240,9 +1226,6 @@
       "cpu": [
         "loong64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1256,9 +1239,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1272,9 +1252,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1288,9 +1265,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1304,9 +1278,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1320,9 +1291,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1336,9 +1304,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1352,9 +1317,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1880,6 +1842,24 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@undecaf/barcode-detector-polyfill": {
+      "version": "0.9.23",
+      "resolved": "https://registry.npmjs.org/@undecaf/barcode-detector-polyfill/-/barcode-detector-polyfill-0.9.23.tgz",
+      "integrity": "sha512-qVr7jSUbE5a30X9dByDym2NzsqyH+MFwyFiu4QSHDQMLCImTJj/et7pEcOtGqlL4UB5J6J3d0hK4/5d4MMowYA==",
+      "license": "MIT",
+      "dependencies": {
+        "@undecaf/zbar-wasm": "^0.9.16"
+      }
+    },
+    "node_modules/@undecaf/zbar-wasm": {
+      "version": "0.9.16",
+      "resolved": "https://registry.npmjs.org/@undecaf/zbar-wasm/-/zbar-wasm-0.9.16.tgz",
+      "integrity": "sha512-T5PcT6g+tLScGjR4WmnRErNvfKqEc3kRg2ux14wHmIDNbvNeXa0BkFK19PRK/jb6zGy5NyWtn4ko6KeNuZc/fQ==",
+      "license": "LGPL-2.1+",
+      "dependencies": {
+        "jschardet": "^3.0.0"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
@@ -3622,6 +3602,15 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jschardet": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/jschardet/-/jschardet-3.1.4.tgz",
+      "integrity": "sha512-/kmVISmrwVwtyYU40iQUOp3SUPk2dhNCMsZBQX0R1/jZ8maaXJ/oZIzUOiyOqcgtLnETFKYChbJ5iDC/eWmFHg==",
+      "license": "LGPL-2.1+",
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
diff --git a/package.json b/package.json
index 7e7fec6..517f57f 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "setup:appwrite": "node scripts/setup-appwrite.mjs"
   },
   "dependencies": {
+    "@undecaf/barcode-detector-polyfill": "^0.9.23",
     "@vitejs/plugin-react": "^4.3.4",
     "@zxing/browser": "^0.2.0",
     "appwrite": "^25.0.0",
diff --git a/src/components/BarcodeScannerModal.tsx b/src/components/BarcodeScannerModal.tsx
index 6bc5705..7caab25 100644
--- a/src/components/BarcodeScannerModal.tsx
+++ b/src/components/BarcodeScannerModal.tsx
@@ -191,24 +191,32 @@ export function BarcodeScannerModal({
     window.setTimeout(() => closeButtonRef.current?.focus(), 80);
 
     let active = true;
-    const video = videoRef.current;
-    if (!video) return undefined;
+    let frameId = 0;
 
-    void startBarcodeScanner(video, handleScannerResult, handleScannerError)
-      .then((controller) => {
-        if (!active) {
-          controller.stop();
-          return;
-        }
-        controllerRef.current = controller;
-        setScannerMode(controller.mode);
-        setPhase("scanning");
-      })
-      .catch((error: BarcodeScannerError) => {
-        if (!active) return;
-        setScannerError(error);
-        setPhase("error");
-      });
+    const startScanner = () => {
+      const video = videoRef.current;
+      if (!video || !active) return;
+
+      void startBarcodeScanner(video, handleScannerResult, handleScannerError)
+        .then((controller) => {
+          if (!active) {
+            controller.stop();
+            return;
+          }
+          controllerRef.current = controller;
+          setScannerMode(controller.mode);
+          setPhase("scanning");
+        })
+        .catch((error: BarcodeScannerError) => {
+          if (!active) return;
+          setScannerError(error);
+          setPhase("error");
+        });
+    };
+
+    frameId = window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(startScanner);
+    });
 
     void listBarcodeCatalog()
       .then((catalog) => {
@@ -224,6 +232,7 @@ export function BarcodeScannerModal({
 
     return () => {
       active = false;
+      window.cancelAnimationFrame(frameId);
       stopScanner();
     };
   }, [applyManualDefaults, handleScannerError, handleScannerResult, open, stopScanner, userId]);
@@ -335,6 +344,7 @@ export function BarcodeScannerModal({
                   <video
                     ref={videoRef}
                     className="aspect-[3/4] w-full bg-black object-cover sm:aspect-video"
+                    autoPlay
                     muted
                     playsInline
                     aria-label="Live camera preview"
diff --git a/src/lib/barcodeDetectorSupport.ts b/src/lib/barcodeDetectorSupport.ts
new file mode 100644
index 0000000..2daefc0
--- /dev/null
+++ b/src/lib/barcodeDetectorSupport.ts
@@ -0,0 +1,35 @@
+import { BarcodeDetectorPolyfill } from "@undecaf/barcode-detector-polyfill";
+
+type WindowWithBarcodeDetector = Window & {
+  BarcodeDetector?: typeof BarcodeDetectorPolyfill;
+};
+
+let detectorReady: Promise<void> | null = null;
+
+export function isAppleMobileDevice() {
+  if (typeof navigator === "undefined") return false;
+  const ua = navigator.userAgent;
+  return /iPad|iPhone|iPod/i.test(ua) || (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
+}
+
+export function ensureBarcodeDetector() {
+  if (detectorReady) return detectorReady;
+
+  detectorReady = (async () => {
+    const globalWindow = window as WindowWithBarcodeDetector;
+    const shouldForcePolyfill = isAppleMobileDevice();
+
+    if (shouldForcePolyfill) {
+      globalWindow.BarcodeDetector = BarcodeDetectorPolyfill;
+      return;
+    }
+
+    try {
+      await globalWindow.BarcodeDetector?.getSupportedFormats();
+    } catch {
+      globalWindow.BarcodeDetector = BarcodeDetectorPolyfill;
+    }
+  })();
+
+  return detectorReady;
+}
diff --git a/src/lib/barcodeScanner.ts b/src/lib/barcodeScanner.ts
index 2ab1e39..d02ea68 100644
--- a/src/lib/barcodeScanner.ts
+++ b/src/lib/barcodeScanner.ts
@@ -4,6 +4,7 @@ import {
   BrowserMultiFormatReader,
   type IScannerControls,
 } from "@zxing/browser";
+import { ensureBarcodeDetector, isAppleMobileDevice } from "./barcodeDetectorSupport";
 import { normalizeBarcode } from "./barcodeLookup";
 
 export type BarcodeScannerErrorCode =
@@ -54,7 +55,7 @@ const ZXING_FORMATS = [
   BarcodeFormat.UPC_A,
   BarcodeFormat.UPC_E,
 ];
-const SCAN_CONSTRAINTS: MediaStreamConstraints = {
+const PREFERRED_SCAN_CONSTRAINTS: MediaStreamConstraints = {
   video: {
     facingMode: { ideal: "environment" },
     width: { ideal: 1280 },
@@ -62,6 +63,7 @@ const SCAN_CONSTRAINTS: MediaStreamConstraints = {
   },
   audio: false,
 };
+const IOS_NATIVE_SCAN_INTERVAL_MS = 150;
 
 export async function startBarcodeScanner(
   videoElement: HTMLVideoElement,
@@ -72,6 +74,8 @@ export async function startBarcodeScanner(
     throw toScannerError(new Error("Camera access is not supported in this browser."));
   }
 
+  await ensureBarcodeDetector();
+
   if (await supportsNativeBarcodeDetector()) {
     try {
       return await startNativeBarcodeScanner(videoElement, onResult);
@@ -121,15 +125,14 @@ function startNativeBarcodeScanner(
   return new Promise((resolve, reject) => {
     let stopped = false;
     let animationFrame = 0;
+    let scanInterval = 0;
     let stream: MediaStream | null = null;
 
     async function start() {
       try {
-        stream = await navigator.mediaDevices.getUserMedia(SCAN_CONSTRAINTS);
-        videoElement.srcObject = stream;
-        videoElement.setAttribute("playsinline", "true");
-        videoElement.muted = true;
-        await videoElement.play();
+        stream = await getCameraStream();
+        prepareVideoElement(videoElement, stream);
+        await waitForVideoReady(videoElement);
 
         const Detector = (window as WindowWithBarcodeDetector).BarcodeDetector;
         if (!Detector) {
@@ -140,13 +143,14 @@ function startNativeBarcodeScanner(
         const stop = () => {
           stopped = true;
           window.cancelAnimationFrame(animationFrame);
+          window.clearInterval(scanInterval);
           stopVideoStream(videoElement);
         };
 
         const scan = async () => {
           if (stopped) return;
           try {
-            if (videoElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+            if (videoElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && videoElement.videoWidth > 0) {
               const barcodes = await detector.detect(videoElement);
               const barcode = barcodes.find((item) => normalizeBarcode(item.rawValue ?? ""));
               if (barcode?.rawValue) {
@@ -156,12 +160,24 @@ function startNativeBarcodeScanner(
                 });
               }
             }
-          } finally {
-            if (!stopped) animationFrame = window.requestAnimationFrame(() => void scan());
+          } catch {
+            // Keep scanning; transient frame errors are common on mobile Safari.
           }
         };
 
-        animationFrame = window.requestAnimationFrame(() => void scan());
+        const scheduleScan = () => {
+          if (stopped) return;
+          void scan().finally(() => {
+            if (!stopped) animationFrame = window.requestAnimationFrame(scheduleScan);
+          });
+        };
+
+        if (isAppleMobileDevice()) {
+          scanInterval = window.setInterval(() => void scan(), IOS_NATIVE_SCAN_INTERVAL_MS);
+        } else {
+          animationFrame = window.requestAnimationFrame(scheduleScan);
+        }
+
         resolve({ mode: "native", stop });
       } catch (error) {
         if (stream) stream.getTracks().forEach((track) => track.stop());
@@ -178,26 +194,28 @@ async function startZxingBarcodeScanner(
   onResult: (result: BarcodeScanResult) => void,
   onError: (error: BarcodeScannerError) => void,
 ): Promise<BarcodeScannerController> {
-  const reader = new BrowserMultiFormatReader();
+  const reader = new BrowserMultiFormatReader(undefined, {
+    delayBetweenScanAttempts: isAppleMobileDevice() ? 150 : 500,
+  });
   reader.possibleFormats = ZXING_FORMATS;
 
   try {
-    const controls = await reader.decodeFromConstraints(
-      SCAN_CONSTRAINTS,
-      videoElement,
-      (result, error) => {
-        if (result) {
-          onResult({
-            value: normalizeBarcode(result.getText()),
-            format: BarcodeFormat[result.getBarcodeFormat()] ?? "unknown",
-          });
-          return;
-        }
-        if (error && !/not.?found/i.test(error.name) && !/not.?found/i.test(error.message)) {
-          onError(toScannerError(error));
-        }
-      },
-    );
+    const stream = await getCameraStream();
+    prepareVideoElement(videoElement, stream);
+    await waitForVideoReady(videoElement);
+
+    const controls = await reader.decodeFromStream(stream, videoElement, (result, error) => {
+      if (result) {
+        onResult({
+          value: normalizeBarcode(result.getText()),
+          format: BarcodeFormat[result.getBarcodeFormat()] ?? "unknown",
+        });
+        return;
+      }
+      if (error && !/not.?found/i.test(error.name) && !/not.?found/i.test(error.message)) {
+        onError(toScannerError(error));
+      }
+    });
 
     return {
       mode: "zxing",
@@ -229,6 +247,72 @@ async function supportsNativeBarcodeDetector() {
   }
 }
 
+async function getCameraStream() {
+  const attempts: MediaStreamConstraints[] = [
+    PREFERRED_SCAN_CONSTRAINTS,
+    { video: { facingMode: { ideal: "environment" } }, audio: false },
+    { video: { facingMode: "environment" }, audio: false },
+    { video: true, audio: false },
+  ];
+
+  let lastError: unknown;
+  for (const constraints of attempts) {
+    try {
+      return await navigator.mediaDevices.getUserMedia(constraints);
+    } catch (error) {
+      lastError = error;
+      if (isCameraAccessError(error) && !(error instanceof DOMException && error.name === "OverconstrainedError")) {
+        throw error;
+      }
+    }
+  }
+
+  throw lastError ?? new Error("Could not access the camera.");
+}
+
+function prepareVideoElement(videoElement: HTMLVideoElement, stream: MediaStream) {
+  videoElement.srcObject = stream;
+  videoElement.setAttribute("playsinline", "true");
+  videoElement.setAttribute("webkit-playsinline", "true");
+  videoElement.setAttribute("autoplay", "true");
+  videoElement.muted = true;
+}
+
+async function waitForVideoReady(videoElement: HTMLVideoElement) {
+  if (videoElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && videoElement.videoWidth > 0) {
+    await playVideoElement(videoElement);
+    return;
+  }
+
+  await new Promise<void>((resolve, reject) => {
+    const onReady = () => {
+      cleanup();
+      void playVideoElement(videoElement).then(resolve).catch(reject);
+    };
+    const onError = () => {
+      cleanup();
+      reject(new Error("Camera preview failed to start."));
+    };
+    const cleanup = () => {
+      videoElement.removeEventListener("loadedmetadata", onReady);
+      videoElement.removeEventListener("error", onError);
+    };
+
+    videoElement.addEventListener("loadedmetadata", onReady, { once: true });
+    videoElement.addEventListener("error", onError, { once: true });
+  });
+}
+
+async function playVideoElement(videoElement: HTMLVideoElement) {
+  try {
+    await videoElement.play();
+  } catch (error) {
+    if (videoElement.paused) {
+      throw error;
+    }
+  }
+}
+
 function isCameraAccessError(error: unknown) {
   if (!(error instanceof DOMException)) return false;
   return ["NotAllowedError", "NotFoundError", "NotReadableError", "OverconstrainedError"].includes(error.name);
diff --git a/vite.config.ts b/vite.config.ts
index 9bfe18e..2c42db0 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -13,6 +13,7 @@ export default defineConfig(({ command }) => ({
           charts: ["recharts"],
           motion: ["framer-motion"],
           icons: ["lucide-react"],
+          barcode: ["@undecaf/barcode-detector-polyfill"],
         },
       },
     },

From aa1bf1b21f18e58df974208e5521a2057f1fdb3b Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 27 May 2026 22:01:48 +0000
Subject: [PATCH 2/2] Harden scanner startup and defer polyfill loading

- Fix waitForVideoReady race by re-checking after listeners and timing out
- Serialize iOS native scans with an in-flight guard and chained timeouts
- Lazy-load @undecaf/barcode-detector-polyfill only when scanning starts

Co-authored-by: Ned Halksworth <hello@nedhalksworth.com>
---
 src/lib/barcodeDetectorSupport.ts | 22 +++++++--
 src/lib/barcodeScanner.ts         | 77 +++++++++++++++++++++++--------
 vite.config.ts                    |  1 -
 3 files changed, 76 insertions(+), 24 deletions(-)

diff --git a/src/lib/barcodeDetectorSupport.ts b/src/lib/barcodeDetectorSupport.ts
index 2daefc0..a764172 100644
--- a/src/lib/barcodeDetectorSupport.ts
+++ b/src/lib/barcodeDetectorSupport.ts
@@ -1,7 +1,12 @@
-import { BarcodeDetectorPolyfill } from "@undecaf/barcode-detector-polyfill";
+type BarcodeDetectorConstructor = {
+  new (options?: { formats?: string[] }): {
+    detect: (source: ImageBitmapSource) => Promise<Array<{ rawValue?: string; format?: string }>>;
+  };
+  getSupportedFormats?: () => Promise<string[]>;
+};
 
 type WindowWithBarcodeDetector = Window & {
-  BarcodeDetector?: typeof BarcodeDetectorPolyfill;
+  BarcodeDetector?: BarcodeDetectorConstructor;
 };
 
 let detectorReady: Promise<void> | null = null;
@@ -12,6 +17,11 @@ export function isAppleMobileDevice() {
   return /iPad|iPhone|iPod/i.test(ua) || (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
 }
 
+async function loadBarcodeDetectorPolyfill() {
+  const { BarcodeDetectorPolyfill } = await import("@undecaf/barcode-detector-polyfill");
+  return BarcodeDetectorPolyfill;
+}
+
 export function ensureBarcodeDetector() {
   if (detectorReady) return detectorReady;
 
@@ -20,14 +30,16 @@ export function ensureBarcodeDetector() {
     const shouldForcePolyfill = isAppleMobileDevice();
 
     if (shouldForcePolyfill) {
-      globalWindow.BarcodeDetector = BarcodeDetectorPolyfill;
+      globalWindow.BarcodeDetector = await loadBarcodeDetectorPolyfill();
       return;
     }
 
     try {
-      await globalWindow.BarcodeDetector?.getSupportedFormats();
+      const getSupportedFormats = globalWindow.BarcodeDetector?.getSupportedFormats;
+      if (!getSupportedFormats) return;
+      await getSupportedFormats.call(globalWindow.BarcodeDetector);
     } catch {
-      globalWindow.BarcodeDetector = BarcodeDetectorPolyfill;
+      globalWindow.BarcodeDetector = await loadBarcodeDetectorPolyfill();
     }
   })();
 
diff --git a/src/lib/barcodeScanner.ts b/src/lib/barcodeScanner.ts
index d02ea68..bf4ab34 100644
--- a/src/lib/barcodeScanner.ts
+++ b/src/lib/barcodeScanner.ts
@@ -64,6 +64,7 @@ const PREFERRED_SCAN_CONSTRAINTS: MediaStreamConstraints = {
   audio: false,
 };
 const IOS_NATIVE_SCAN_INTERVAL_MS = 150;
+const VIDEO_READY_TIMEOUT_MS = 10_000;
 
 export async function startBarcodeScanner(
   videoElement: HTMLVideoElement,
@@ -125,7 +126,8 @@ function startNativeBarcodeScanner(
   return new Promise((resolve, reject) => {
     let stopped = false;
     let animationFrame = 0;
-    let scanInterval = 0;
+    let scanTimeout = 0;
+    let scanning = false;
     let stream: MediaStream | null = null;
 
     async function start() {
@@ -143,14 +145,15 @@ function startNativeBarcodeScanner(
         const stop = () => {
           stopped = true;
           window.cancelAnimationFrame(animationFrame);
-          window.clearInterval(scanInterval);
+          window.clearTimeout(scanTimeout);
           stopVideoStream(videoElement);
         };
 
         const scan = async () => {
-          if (stopped) return;
+          if (stopped || scanning) return;
+          scanning = true;
           try {
-            if (videoElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && videoElement.videoWidth > 0) {
+            if (isVideoFrameReady(videoElement)) {
               const barcodes = await detector.detect(videoElement);
               const barcode = barcodes.find((item) => normalizeBarcode(item.rawValue ?? ""));
               if (barcode?.rawValue) {
@@ -162,21 +165,29 @@ function startNativeBarcodeScanner(
             }
           } catch {
             // Keep scanning; transient frame errors are common on mobile Safari.
+          } finally {
+            scanning = false;
           }
         };
 
-        const scheduleScan = () => {
+        const scheduleNextScan = () => {
           if (stopped) return;
-          void scan().finally(() => {
-            if (!stopped) animationFrame = window.requestAnimationFrame(scheduleScan);
+          if (isAppleMobileDevice()) {
+            scanTimeout = window.setTimeout(() => {
+              void scan().finally(() => {
+                if (!stopped) scheduleNextScan();
+              });
+            }, IOS_NATIVE_SCAN_INTERVAL_MS);
+            return;
+          }
+          animationFrame = window.requestAnimationFrame(() => {
+            void scan().finally(() => {
+              if (!stopped) scheduleNextScan();
+            });
           });
         };
 
-        if (isAppleMobileDevice()) {
-          scanInterval = window.setInterval(() => void scan(), IOS_NATIVE_SCAN_INTERVAL_MS);
-        } else {
-          animationFrame = window.requestAnimationFrame(scheduleScan);
-        }
+        scheduleNextScan();
 
         resolve({ mode: "native", stop });
       } catch (error) {
@@ -278,28 +289,58 @@ function prepareVideoElement(videoElement: HTMLVideoElement, stream: MediaStream
   videoElement.muted = true;
 }
 
+function isVideoFrameReady(videoElement: HTMLVideoElement) {
+  return videoElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && videoElement.videoWidth > 0;
+}
+
 async function waitForVideoReady(videoElement: HTMLVideoElement) {
-  if (videoElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && videoElement.videoWidth > 0) {
+  if (isVideoFrameReady(videoElement)) {
     await playVideoElement(videoElement);
     return;
   }
 
   await new Promise<void>((resolve, reject) => {
+    let settled = false;
+
+    const settle = (action: () => void) => {
+      if (settled) return;
+      settled = true;
+      cleanup();
+      action();
+    };
+
+    const tryReady = () => {
+      if (!isVideoFrameReady(videoElement)) return false;
+      settle(() => {
+        void playVideoElement(videoElement).then(resolve).catch(reject);
+      });
+      return true;
+    };
+
     const onReady = () => {
-      cleanup();
-      void playVideoElement(videoElement).then(resolve).catch(reject);
+      tryReady();
     };
+
     const onError = () => {
-      cleanup();
-      reject(new Error("Camera preview failed to start."));
+      settle(() => reject(new Error("Camera preview failed to start.")));
     };
+
     const cleanup = () => {
+      window.clearTimeout(timeoutId);
       videoElement.removeEventListener("loadedmetadata", onReady);
+      videoElement.removeEventListener("loadeddata", onReady);
       videoElement.removeEventListener("error", onError);
     };
 
-    videoElement.addEventListener("loadedmetadata", onReady, { once: true });
+    const timeoutId = window.setTimeout(() => {
+      settle(() => reject(new Error("Camera preview timed out.")));
+    }, VIDEO_READY_TIMEOUT_MS);
+
+    videoElement.addEventListener("loadedmetadata", onReady);
+    videoElement.addEventListener("loadeddata", onReady);
     videoElement.addEventListener("error", onError, { once: true });
+
+    tryReady();
   });
 }
 
diff --git a/vite.config.ts b/vite.config.ts
index 2c42db0..9bfe18e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -13,7 +13,6 @@ export default defineConfig(({ command }) => ({
           charts: ["recharts"],
           motion: ["framer-motion"],
           icons: ["lucide-react"],
-          barcode: ["@undecaf/barcode-detector-polyfill"],
         },
       },
     },