feat: Improve QR scanning reliability for dark borderless codes by AntonioVentilii · Pull Request #759 · dfinity/gix-components

AntonioVentilii · 2026-03-23T08:09:48Z

Motivation

The QR code reader was using html5-qrcode, which has a known issue with inverted (dark-themed, borderless) QR codes on mobile — they simply cannot be scanned. The library is also unmaintained.

Known upstream issues:

A first attempt (#757) tried to fix this by increasing the scan region tolerance within the same library, but that approach still failed on mobile (see test results in that PR).

Since the root cause is a limitation of html5-qrcode itself (no support for inverted QR codes), and the library is no longer maintained, this PR replaces it with barcode-detector — a Barcode Detection API polyfill powered by ZXing C++ WebAssembly under the hood. The underlying engine natively supports inverted code detection (tryInvert is enabled by default). We tested it manually on a mobile device and dark borderless QR codes are now successfully scanned.

Thanks to @sea-snake for the tip!

Changes

Removed the html5-qrcode dependency entirely in component QRCodeReader.
In component QRCodeReader:
- Camera access is now handled directly via the browser navigator.mediaDevices.getUserMedia API, requesting the rear-facing camera (facingMode: "environment") at up to 1920×1080 resolution.
- The video feed is rendered in a native <video> element.
- QR decoding uses the standard BarcodeDetector API (via barcode-detector/ponyfill). A detector instance is created with formats: ["qr_code"] and detector.detect(videoElement) is called at ~10 fps via setInterval(scan, 100). The polyfill accepts the <video> element directly — no intermediate <canvas> needed.
- A frame-processing guard (isProcessingFrame) prevents overlapping decode calls.
- Cleanup on destroy properly clears the scan interval and stops all media tracks.
- The scan overlay is now implemented with a .scan-overlay container with a .scan-region box using box-shadow to mask the surrounding area and a border styled with the primary color. This replaces the old :global(#qr-shaded-region) overrides that targeted html5-qrcode's internal DOM.
Updated the library reference in the QR code reader docs page from jsQR to barcode-detector.
Added barcode-detector@^3.1.1 to dependencies and removed html5-qrcode.

Tests

Manual testing on mobile: dark borderless QR codes are now successfully scanned (this was the main validation, as the core issue only reproduced on real mobile devices).

Screenshots

Updated E2E snapshots.

…k-borderless-codes

Use the BarcodeDetector API polyfill (backed by the same ZXing C++ WASM engine) instead of zxing-wasm directly. This simplifies the component by removing the hidden canvas — BarcodeDetector.detect() accepts the video element directly. Made-with: Cursor

@sea-snake

…des (#12162) # Note This PR is a fork of dfinity/gix-components#759. Awaiting that review, we simply copy the components in our repo and add it to the next release, since it is a time-sensitive issue. # Motivation The QR code reader was using `html5-qrcode`, which has a known issue with inverted (dark-themed, borderless) QR codes on mobile — they simply cannot be scanned. The library is also unmaintained. Known upstream issues: - mebjas/html5-qrcode#766 - mebjas/html5-qrcode#468 - mebjas/html5-qrcode#94 Since the root cause is a limitation of `html5-qrcode` itself (no support for inverted QR codes), and the library is no longer maintained, this PR replaces it with [`barcode-detector`](https://www.npmjs.com/package/barcode-detector) — a [Barcode Detection API](https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector) polyfill powered by ZXing C++ WebAssembly under the hood. The underlying engine natively supports inverted code detection (`tryInvert` is enabled by default). We tested it manually on a mobile device and dark borderless QR codes are now successfully scanned. Thanks to @sea-snake for the tip! # Changes (copied from gix-components's `QRCodeReader`) - Removed the `html5-qrcode` dependency entirely in component `QRCodeReader`. - In component `QRCodeReader`: - Camera access is now handled directly via the browser `navigator.mediaDevices.getUserMedia` API, requesting the rear-facing camera (`facingMode: "environment"`) at up to 1920×1080 resolution. - The video feed is rendered in a native `<video>` element. - QR decoding uses the standard `BarcodeDetector` API (via `barcode-detector/ponyfill`). A detector instance is created with `formats: ["qr_code"]` and `detector.detect(videoElement)` is called at ~10 fps via `setInterval(scan, 100)`. The polyfill accepts the `<video>` element directly — no intermediate `<canvas>` needed. - A frame-processing guard (`isProcessingFrame`) prevents overlapping decode calls. - Cleanup on destroy properly clears the scan interval and stops all media tracks. - The scan overlay is now implemented with a `.scan-overlay` container with a `.scan-region` box using `box-shadow` to mask the surrounding area and a border styled with the primary color. This replaces the old `:global(#qr-shaded-region)` overrides that targeted `html5-qrcode`'s internal DOM. - Updated the library reference in the QR code reader docs page from `jsQR` to `barcode-detector`. - Added `barcode-detector@^3.1.1` to dependencies and removed `html5-qrcode`. # Tests Manual testing on mobile: dark borderless QR codes are now successfully scanned (this was the main validation, as the core issue only reproduced on real mobile devices). <img width="1071" height="1428" alt="IMG_5315" src="https://github.com/user-attachments/assets/f25cbe60-3d92-472c-917e-ffdfb5f1b343" /> <img width="1179" height="2556" alt="IMG_5314" src="https://github.com/user-attachments/assets/6fd3d30d-2080-4464-8263-80ce3d544698" />

yhabib

Left some small questions/nits.

Can you add the CSP comment?
Do you know how this new dep. impacts the bundle size?

yhabib · 2026-03-26T07:43:03Z

+  .scan-region {
+    width: min(90cqw, 90cqh);
+    aspect-ratio: 1;
+    box-shadow: 0 0 0 9999px white;


~~[question] have you tested this with a dark theme? I don't think it adapts well 🤔~~

yhabib · 2026-03-26T07:47:10Z

+          const [qrResult] = results;
+
+          if (nonNullish(qrResult)) {
+            dispatch("nnsQRCode", qrResult.rawValue);


[question] Is it intended to keep pushing events even after successful one? should it not stop? do you know how it worked with the previous library?

Kept as is for parity: the old html5-qrcode success callback also fired on every decoded frame and never stopped itself, and consumers close on the first event, which destroys the component and stops the loop. Happy to make it stop after the first hit if you'd prefer — leaving this thread open for your call.

🤖 Addressed by Claude Code

…ing-reliability-for-dark-borderless-codes # Conflicts: # e2e/busy-screen.e2e.ts-snapshots/Should-hide-spinner-1-Google-Chrome-linux.png # package-lock.json # package.json # src/lib/components/QRCodeReader.svelte

…ing-reliability-for-dark-borderless-codes

zeropath-ai · 2026-08-19T07:31:26Z

✅ No security or compliance issues detected. Reviewed everything up to cd5de3b.

Security Overview

🔎 Scanned files: 7 changed file(s)
🔗 Scan Link: https://zeropath.com/app/repositories/98bf2300-834e-44ab-93d0-06f69eae67e3?scanId=c1a290a6-fda8-4a45-9aed-79321e27cadd&codeScanTypes=PrScan&tab=issues

Detected Code Changes

Change Type	Relevant files
Enhancement	► barcode-detector.ts Update dependency to include zxing-wasm (barcode-detector)
Refactor	► package-lock.json Remove various peer references in package lock entries and adjust peer flags across many dependencies ► optional changes in node_modules entries (various)

- Release the camera stream when the component has no video element, instead of leaving it running. - Replace setInterval with a self-scheduling setTimeout so a slow detection cannot pile up frames, and drop the now-redundant isProcessingFrame guard. - Document the CSP requirements (wasm-unsafe-eval, and the jsDelivr origin the .wasm is fetched from by default).

AntonioVentilii · 2026-08-19T07:38:05Z

Answers to the two questions from the review:

1. CSP — added, both as a comment at the import site and a new Content Security Policy section in the component docs. Two requirements for consuming apps:

script-src must allow wasm-unsafe-eval — decoding is compiled WebAssembly.
By default the ~1 MB .wasm is fetched from a jsDelivr CDN at runtime (zxing-wasm ships a locateFile that resolves to https://fastly.jsdelivr.net/npm/zxing-wasm@3.1.3/...), so connect-src must allow that origin.

The CDN default is worth an explicit decision rather than just a doc note — for a wallet UI it means a third-party request on every scan. The docs now show how to serve the binary from your own origin via setZXingModuleOverrides, and I can wire that into the component instead if you prefer it self-hosted by default.

2. Bundle size — measured, and it moves in opposite directions for JS and WASM:

	old (`html5-qrcode@2.3.8`)	new (`barcode-detector@3.1.1`)
JS served from our origin	~1.07 MB ZXing UMD + ~38 KB wrapper	42.2 KB lazy chunk
WASM	—	1.09 MB, from the CDN (not bundled)
npm unpacked	2.63 MB	265 KB

So the JS shipped from our own origin drops by roughly 1 MB, and the decoder payload becomes a 1.09 MB WASM binary loaded lazily on first scan from a third party. Both libraries only load the decoder when the reader mounts.

🤖 Addressed by Claude Code

…k-borderless-codes

AntonioVentilii and others added 10 commits March 19, 2026 15:45

feat: Improve QR scanning reliability for dark borderless codes

0b02d77

Merge branch 'main' into feat/Improve-QR-scanning-reliability-for-dar…

8c79001

…k-borderless-codes

more

5afa2fd

Merge branch 'main' into feat/Improve-QR-scanning-reliability-for-dar…

c7d5b6e

…k-borderless-codes

lint

9187ef0

more

c4b1e02

revert

29eddc2

🤖 update snapshots

88ad658

🤖 update snapshots

fd108e3

AntonioVentilii marked this pull request as ready for review March 24, 2026 17:17

AntonioVentilii requested review from a team as code owners March 24, 2026 17:17

AntonioVentilii and others added 2 commits March 24, 2026 18:19

refactor

3c6e14b

🤖 update snapshots

ea64f4d

AntonioVentilii requested a review from peterpeterparker March 25, 2026 08:39

AntonioVentilii mentioned this pull request Mar 25, 2026

fix(frontend): Improve QR scanning reliability for dark borderless codes dfinity/oisy-wallet#12162

Merged

yhabib reviewed Mar 26, 2026

View reviewed changes

AntonioVentilii added 2 commits August 19, 2026 09:25

Merge remote-tracking branch 'origin/main' into feat/Improve-QR-scann…

0a986bd

…ing-reliability-for-dark-borderless-codes

Merge branch 'main' into feat/Improve-QR-scanning-reliability-for-dar…

cd5de3b

…k-borderless-codes

Navigation Menu

Uh oh!

feat: Improve QR scanning reliability for dark borderless codes - #759

feat: Improve QR scanning reliability for dark borderless codes#759
AntonioVentilii wants to merge 16 commits into
mainfrom
feat/Improve-QR-scanning-reliability-for-dark-borderless-codes

AntonioVentilii commented Mar 23, 2026 •

edited

Loading

Uh oh!

yhabib left a comment

Uh oh!

yhabib Mar 26, 2026 •

edited

Loading

Uh oh!

yhabib Mar 26, 2026

Uh oh!

AntonioVentilii Aug 19, 2026

Uh oh!

Uh oh!

Uh oh!

zeropath-ai Bot commented Aug 19, 2026 •

edited

Loading

Uh oh!

AntonioVentilii commented Aug 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

AntonioVentilii commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation

Changes

Tests

Screenshots

Uh oh!

yhabib left a comment

Choose a reason for hiding this comment

Uh oh!

yhabib Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yhabib Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

AntonioVentilii Aug 19, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

zeropath-ai Bot commented Aug 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AntonioVentilii commented Aug 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

AntonioVentilii commented Mar 23, 2026 •

edited

Loading

yhabib Mar 26, 2026 •

edited

Loading

zeropath-ai Bot commented Aug 19, 2026 •

edited

Loading