QR Scanner | Zyeon UI

Preview in your theme

Default scanner (rear camera preferred, 200ms decode loop, 2.5s dedupe) — every accepted decode is appended to the log beside it, so the cooldown is visible rather than described.

This browser has no camera API

navigator.mediaDevices.getUserMedia is missing here, so live scanning is unavailable.

Nothing scanned yet

Accepted scans (0)

Nothing yet — start the scanner and hold a QR code in the frame. Keep holding it: the same value is suppressed for 2.5s, so this list gains one row, not dozens.

One-shot check-in with aspect={1} and custom labels — the parent replaces the scanner with the result, and that unmount is what releases the camera.

This browser has no camera API

navigator.mediaDevices.getUserMedia is missing here, so live scanning is unavailable.

Nothing scanned yet

decoder={fn} regionScale={0.6} scanInterval={150} — the injection seam for browsers without BarcodeDetector, showing the exact frame the adapter is handed.

This browser has no camera API

navigator.mediaDevices.getUserMedia is missing here, so live scanning is unavailable.

Nothing scanned yet

What the injected decoder receives

frame: —calls: 0value: —

The component crops the framed square out of the video and hands it over as a 2D canvas every 150ms — one surface every library accepts. Here the adapter delegates to BarcodeDetector — which this browser does not have, so it always returns null. This is exactly the case where you would call zxing-wasm or jsQR instead.. A jsQR adapter is one line: jsQR(ctx.getImageData(0, 0, w, h).data, w, h)?.data ?? null.

Permission-denied / insecure-page / no-decoder paths, and disabled — driven by the real browser, nothing simulated.

These are real getUserMedia calls. Deny the browser prompt and the component switches to its blocked panel: it explains how to re-allow the camera in site settings and offers no retry button, because a browser that has recorded a block will reject every further request without prompting. Fix the setting and the Permissions API change event brings the Start button back with no reload. On a plain http:// page, or a browser without BarcodeDetector and no decoder prop, the live path is unavailable and says so — neither can be forced from this page, since this one is secure and does have a decoder.

Live — try denying the permission prompt

This browser has no camera API

navigator.mediaDevices.getUserMedia is missing here, so live scanning is unavailable.

Nothing scanned yet

disabled — starting the camera and picking a file are both blocked

This browser has no camera API

navigator.mediaDevices.getUserMedia is missing here, so live scanning is unavailable.

Nothing scanned yet

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro