diff --git a/e2e/busy-screen.e2e.ts-snapshots/Should-hide-spinner-1-Google-Chrome-linux.png b/e2e/busy-screen.e2e.ts-snapshots/Should-hide-spinner-1-Google-Chrome-linux.png
index 6effb2938..ffbd8dd3b 100644
Binary files a/e2e/busy-screen.e2e.ts-snapshots/Should-hide-spinner-1-Google-Chrome-linux.png and b/e2e/busy-screen.e2e.ts-snapshots/Should-hide-spinner-1-Google-Chrome-linux.png differ
diff --git a/e2e/qr-code-reader.e2e.ts-snapshots/Read-QR-code-display-a-mirrored-video-1-Google-Chrome-linux.png b/e2e/qr-code-reader.e2e.ts-snapshots/Read-QR-code-display-a-mirrored-video-1-Google-Chrome-linux.png
index adad223a2..7bd7c921e 100644
Binary files a/e2e/qr-code-reader.e2e.ts-snapshots/Read-QR-code-display-a-mirrored-video-1-Google-Chrome-linux.png and b/e2e/qr-code-reader.e2e.ts-snapshots/Read-QR-code-display-a-mirrored-video-1-Google-Chrome-linux.png differ
diff --git a/e2e/qr-code-reader.e2e.ts-snapshots/Read-QR-code-value-with-camera-1-Google-Chrome-linux.png b/e2e/qr-code-reader.e2e.ts-snapshots/Read-QR-code-value-with-camera-1-Google-Chrome-linux.png
index 13054c114..7ef95c199 100644
Binary files a/e2e/qr-code-reader.e2e.ts-snapshots/Read-QR-code-value-with-camera-1-Google-Chrome-linux.png and b/e2e/qr-code-reader.e2e.ts-snapshots/Read-QR-code-value-with-camera-1-Google-Chrome-linux.png differ
diff --git a/e2e/qr-code-reader.e2e.ts-snapshots/Read-QR-throws-error-Google-Chrome-linux.png b/e2e/qr-code-reader.e2e.ts-snapshots/Read-QR-throws-error-Google-Chrome-linux.png
index a1d87a5b4..58c5b3ed8 100644
Binary files a/e2e/qr-code-reader.e2e.ts-snapshots/Read-QR-throws-error-Google-Chrome-linux.png and b/e2e/qr-code-reader.e2e.ts-snapshots/Read-QR-throws-error-Google-Chrome-linux.png differ
diff --git a/package-lock.json b/package-lock.json
index 597b17cc2..4bae54ab5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,9 @@
       "version": "10.0.0",
       "license": "Apache-2.0",
       "dependencies": {
+        "barcode-detector": "^3.1.1",
         "decimal.js": "^10.6.0",
         "dompurify": "^3.3.1",
-        "html5-qrcode": "^2.3.8",
         "marked": "^9.1.0",
         "qr-creator": "^1.0.0"
       },
@@ -2232,6 +2232,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/emscripten": {
+      "version": "1.41.5",
+      "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.41.5.tgz",
+      "integrity": "sha512-cMQm7pxu6BxtHyqJ7mQZ2kXWV5SLmugybFdHCBbJ5eHzOo6VhBckEgAT3//rP5FwPHNPeEiq4SmQ5ucBwsOo4Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -3108,6 +3114,15 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/barcode-detector": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-3.1.1.tgz",
+      "integrity": "sha512-ghWlEAV93ZCUniO7Co3ih/01XPm+U30CV+NoPbO6Chj5lZzHydDAqKlrBEd+37TkoR+QTH3tnnwd8k8epGTfIg==",
+      "license": "MIT",
+      "dependencies": {
+        "zxing-wasm": "3.0.1"
+      }
+    },
     "node_modules/base64-arraybuffer": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
@@ -5174,11 +5189,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/html5-qrcode": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/html5-qrcode/-/html5-qrcode-2.3.8.tgz",
-      "integrity": "sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ=="
-    },
     "node_modules/http-proxy-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -8024,6 +8034,18 @@
         "url": "https://opencollective.com/synckit"
       }
     },
+    "node_modules/tagged-tag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",
+      "integrity": "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
@@ -8306,6 +8328,21 @@
         "node": ">=4"
       }
     },
+    "node_modules/type-fest": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-5.5.0.tgz",
+      "integrity": "sha512-PlBfpQwiUvGViBNX84Yxwjsdhd1TUlXr6zjX7eoirtCPIr08NAmxwa+fcYBTeRQxHo9YC9wwF3m9i700sHma8g==",
+      "license": "(MIT OR CC0-1.0)",
+      "dependencies": {
+        "tagged-tag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/typed-array-buffer": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
@@ -9100,6 +9137,19 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
+    },
+    "node_modules/zxing-wasm": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/zxing-wasm/-/zxing-wasm-3.0.1.tgz",
+      "integrity": "sha512-3CLj6iaGkpqPWXAB4pIWkFOR63MwqGekpMzaROFKto4dFowiPmLlC56KoMoOSXzqOCOpI5DAvMdB8ku2va6fUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/emscripten": "^1.41.5",
+        "type-fest": "^5.4.4"
+      },
+      "peerDependencies": {
+        "@types/emscripten": ">=1.39.6"
+      }
     }
   },
   "dependencies": {
@@ -10257,6 +10307,11 @@
       "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
       "dev": true
     },
+    "@types/emscripten": {
+      "version": "1.41.5",
+      "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.41.5.tgz",
+      "integrity": "sha512-cMQm7pxu6BxtHyqJ7mQZ2kXWV5SLmugybFdHCBbJ5eHzOo6VhBckEgAT3//rP5FwPHNPeEiq4SmQ5ucBwsOo4Q=="
+    },
     "@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -10822,6 +10877,14 @@
       "dev": true,
       "peer": true
     },
+    "barcode-detector": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-3.1.1.tgz",
+      "integrity": "sha512-ghWlEAV93ZCUniO7Co3ih/01XPm+U30CV+NoPbO6Chj5lZzHydDAqKlrBEd+37TkoR+QTH3tnnwd8k8epGTfIg==",
+      "requires": {
+        "zxing-wasm": "3.0.1"
+      }
+    },
     "base64-arraybuffer": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
@@ -12187,11 +12250,6 @@
         "whatwg-encoding": "^3.1.1"
       }
     },
-    "html5-qrcode": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/html5-qrcode/-/html5-qrcode-2.3.8.tgz",
-      "integrity": "sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ=="
-    },
     "http-proxy-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -14015,6 +14073,11 @@
         "@pkgr/core": "^0.2.9"
       }
     },
+    "tagged-tag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",
+      "integrity": "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng=="
+    },
     "tapable": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
@@ -14194,6 +14257,14 @@
       "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
       "dev": true
     },
+    "type-fest": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-5.5.0.tgz",
+      "integrity": "sha512-PlBfpQwiUvGViBNX84Yxwjsdhd1TUlXr6zjX7eoirtCPIr08NAmxwa+fcYBTeRQxHo9YC9wwF3m9i700sHma8g==",
+      "requires": {
+        "tagged-tag": "^1.0.0"
+      }
+    },
     "typed-array-buffer": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
@@ -14639,6 +14710,15 @@
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "dev": true,
       "peer": true
+    },
+    "zxing-wasm": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/zxing-wasm/-/zxing-wasm-3.0.1.tgz",
+      "integrity": "sha512-3CLj6iaGkpqPWXAB4pIWkFOR63MwqGekpMzaROFKto4dFowiPmLlC56KoMoOSXzqOCOpI5DAvMdB8ku2va6fUg==",
+      "requires": {
+        "@types/emscripten": "^1.41.5",
+        "type-fest": "^5.4.4"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index d36e616c0..4afcb2a41 100644
--- a/package.json
+++ b/package.json
@@ -71,9 +71,9 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
+    "barcode-detector": "^3.1.1",
     "decimal.js": "^10.6.0",
     "dompurify": "^3.3.1",
-    "html5-qrcode": "^2.3.8",
     "marked": "^9.1.0",
     "qr-creator": "^1.0.0"
   },
diff --git a/src/lib/components/QRCodeReader.svelte b/src/lib/components/QRCodeReader.svelte
index db7c0c1d1..645fb09f3 100644
--- a/src/lib/components/QRCodeReader.svelte
+++ b/src/lib/components/QRCodeReader.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Html5Qrcode, Html5QrcodeScannerState } from "html5-qrcode";
+  import { isNullish, nonNullish } from "@dfinity/utils";
   import { createEventDispatcher, onDestroy, onMount } from "svelte";
   import { isDesktop } from "$lib/utils/device.utils";
   import { nextElementId } from "$lib/utils/html.utils";
@@ -8,90 +8,123 @@
 
   const dispatch = createEventDispatcher();
 
-  let html5QrCode: Html5Qrcode | undefined;
-
-  let ScannerState: typeof Html5QrcodeScannerState;
+  let videoElement: HTMLVideoElement | undefined;
+  let stream: MediaStream | undefined;
+  let scanInterval: NodeJS.Timeout | undefined;
   let isDestroyed = false;
+  let isProcessingFrame = false;
 
   onMount(async () => {
-    const qrCodeSuccessCallback = (decodedText: string) =>
-      dispatch("nnsQRCode", decodedText);
-
-    // Source documentation: https://scanapp.org/blog/2022/01/09/setting-dynamic-qr-box-size-in-html5-qrcode.html
-    // eslint-disable-next-line local-rules/prefer-object-params
-    const qrboxFunction = (
-      viewfinderWidth: number,
-      viewfinderHeight: number,
-    ) => {
-      const minEdgePercentage = 0.7; // 70%
-      const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
-      const qrboxSize = Math.floor(minEdgeSize * minEdgePercentage);
-      return {
-        width: qrboxSize,
-        height: qrboxSize,
-      };
-    };
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          facingMode: "environment",
+          width: { ideal: 1920 },
+          height: { ideal: 1080 },
+        },
+        audio: false,
+      });
 
-    const { Html5Qrcode, Html5QrcodeScannerState } = await import(
-      "html5-qrcode"
-    );
-    ScannerState = Html5QrcodeScannerState;
+      if (isDestroyed) {
+        stopStream();
 
-    html5QrCode = new Html5Qrcode(id);
+        return;
+      }
 
-    await html5QrCode
-      .start(
-        { facingMode: "environment" },
-        {
-          fps: 10, // Optional, frame per seconds for qr code scanning
-          qrbox: qrboxFunction,
-        },
-        qrCodeSuccessCallback,
-
-        (_errorMessage: string) => {
-          // Do nothing. This error message is throw when the QR code cannot be read.
-          // Examples of error:
-          // QR code parse error, error = NotFoundException: No MultiFormat Readers were able to detect the code.
-          // QR code parse error, error = No barcode or QR code detected.
-          // QR code parse error, error = NotFoundException: No MultiFormat Readers were able to detect the code.
-        },
-      )
-      .catch((err: unknown) => {
-        dispatch("nnsQRCodeError", err);
-      });
-    if (isDestroyed) {
-      // Make sure the camera is stopped if the component is destroyed before
-      // scanning is starte.
-      await html5QrCode?.stop();
+      if (nonNullish(videoElement)) {
+        videoElement.srcObject = stream;
+
+        await videoElement.play();
+
+        await startScanning();
+      }
+    } catch (err: unknown) {
+      dispatch("nnsQRCodeError", err);
     }
   });
 
-  onDestroy(async () => {
-    isDestroyed = true;
+  const startScanning = async () => {
     try {
-      if (html5QrCode?.getState() !== ScannerState?.NOT_STARTED) {
-        await html5QrCode?.stop();
+      const { BarcodeDetector } = await import("barcode-detector/ponyfill");
+
+      if (isDestroyed) {
+        return;
       }
+
+      const detector = new BarcodeDetector({
+        formats: ["qr_code"],
+      });
+
+      const scan = async () => {
+        if (
+          isProcessingFrame ||
+          isDestroyed ||
+          isNullish(videoElement) ||
+          videoElement.readyState < HTMLMediaElement.HAVE_CURRENT_DATA
+        ) {
+          return;
+        }
+
+        isProcessingFrame = true;
+
+        try {
+          const results = await detector.detect(videoElement);
+
+          const [qrResult] = results;
+
+          if (nonNullish(qrResult)) {
+            dispatch("nnsQRCode", qrResult.rawValue);
+          }
+        } catch {
+          // Decoding failed on this frame — expected when no QR code is visible
+        } finally {
+          isProcessingFrame = false;
+        }
+      };
+
+      scanInterval = setInterval(scan, 100);
     } catch (err: unknown) {
-      console.error(err);
-      dispatch(
-        "nnsQRCodeError",
-        new Error("There was an error while destroying the QR code reader."),
-      );
+      dispatch("nnsQRCodeError", err);
+    }
+  };
+
+  const stopStream = () => {
+    if (nonNullish(stream)) {
+      stream.getTracks().forEach((track) => track.stop());
+
+      stream = undefined;
+    }
+  };
+
+  onDestroy(() => {
+    isDestroyed = true;
+
+    if (nonNullish(scanInterval)) {
+      clearInterval(scanInterval);
+
+      scanInterval = undefined;
     }
+
+    stopStream();
   });
 
   // We optimistically assume that if the QR code reader is used on desktop, it has most probably only a single "user" facing camera and that we can invert the displayed video
   const mirror = isDesktop();
 </script>
 
-<article {id} class="reader" class:mirror></article>
+<article {id} class="reader" class:mirror>
+  <video bind:this={videoElement} autoplay muted playsinline></video>
+
+  <div class="scan-overlay">
+    <div class="scan-region"></div>
+  </div>
+</article>
 
 <style lang="scss">
   .reader {
     position: relative;
     width: 100%;
-    height: auto;
+    height: 100%;
 
     border-radius: var(--border-radius);
     overflow: hidden;
@@ -99,13 +132,29 @@
     &.mirror {
       transform: scaleX(-1);
     }
+  }
 
-    :global(#qr-shaded-region) {
-      border-color: rgba(var(--primary-rgb), 0.4) !important;
-    }
+  video {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 
-    :global(#qr-shaded-region > div) {
-      background: white !important;
-    }
+  .scan-overlay {
+    position: absolute;
+    inset: 0;
+    container-type: size;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  .scan-region {
+    width: min(90cqw, 90cqh);
+    aspect-ratio: 1;
+    box-shadow: 0 0 0 9999px white;
+    border: 2px solid rgba(var(--primary-rgb), 0.4);
   }
 </style>
diff --git a/src/routes/(split)/components/qr-code-reader/+page.md b/src/routes/(split)/components/qr-code-reader/+page.md
index 64ae114e9..767df32c6 100644
--- a/src/routes/(split)/components/qr-code-reader/+page.md
+++ b/src/routes/(split)/components/qr-code-reader/+page.md
@@ -32,7 +32,7 @@ If used in a modal, prefer the wrapper `<QRCodeReaderModal />`.
 
 ## Library
 
-This component uses the library [jsQR](https://github.com/cozmo/jsQR).
+This component uses [barcode-detector](https://github.com/Sec-ant/barcode-detector) — a [Barcode Detection API](https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector) polyfill powered by ZXing C++ WebAssembly — for QR code decoding, with native camera access via `getUserMedia`.
 
 ## Events