HTML5 QR Code Scanner
The working scanner, plus the API details if you are building one.
Camera access is requested only when you press the button. Frames are decoded on this device and discarded.
An HTML5 scanner is three browser APIs stacked: getUserMedia for the camera stream, canvas for frame sampling, and a decoder — the native BarcodeDetector where it exists, a bundled JavaScript decoder where it does not. There is no plugin and no native code involved.
This page is both the tool and the explanation, because most people arriving on this search are about to build one themselves and want to know which parts are load-bearing.
How to use it
- Use the scanner above if you just need to read a code.
- Read the implementation notes below for the API sequence.
- Check the compatibility notes before choosing a decoder for production.
The implementation sequence
Request the stream with `getUserMedia({ video: { facingMode: 'environment' } })`, attach it to a video element, and set `playsinline` — without it iOS Safari takes the video fullscreen. Then draw frames to a canvas at a throttled rate, typically 8-10 fps, and pass the canvas to the decoder. On success, stop the tracks.
The trap is resolution. Passing a 1080p frame to a decoder is slow and no more accurate than a 640-pixel-wide one. Downscale first, and decode at a fixed interval rather than on every animation frame.
Reviewed 2026-10-21. This tool runs entirely in your browser — no server, no account, and nothing you generate is stored.
Frequently asked questions
Do I need a library like html5-qrcode?
Not necessarily. The library handles cross-browser quirks and UI, which is worth it if you need many formats. For QR only, BarcodeDetector plus a jsQR fallback is a few dozen lines and far smaller.
Why does getUserMedia throw on my site?
It requires a secure context — HTTPS or localhost. On plain HTTP `navigator.mediaDevices` is undefined, which is the most common cause.
How do I stop the camera when done?
Call `stream.getTracks().forEach(t => t.stop())`. Also listen for `pagehide` to release the camera if the user navigates away mid-scan.
Related tools
More from QR codes.