Skip to main content
Scanners

QR Code Scanner

Start an environment-facing camera only after permission, scan frames locally with Canvas and jsQR until the first QR payload is found, or decode a chosen image file. Ideal for real-time QR code reading at events, retail, and access control without transmitting data to external servers.

QR tools

camera title

camera description

Camera scanner lens is offline

In brief

Camera access is user-triggered and local: the scanner samples full video frames with jsQR, stops all tracks after the first result, and never uploads pixels.

What this tool supports

  • Requests getUserMedia video only after Activate Scanner Stream, preferring the environment-facing camera and never requesting audio.
  • Draws ready video frames to Canvas, tries normal and inverted QR pixels with jsQR, and stops animation plus all media tracks after the first payload.
  • Provides Stop Camera and a local image-file fallback using the same decoder when permission, hardware, focus, or lighting prevents live scanning.
  • Displays and copies the exact payload, offers an explicit link for strings beginning with http, and optionally stores ten local history entries when enabled.

How to use QR Code Scanner

Follow this implementation-specific workflow for Camera QR Scanner with Local File Fallback; each step reflects the controls and limits in the current browser workspace.

  1. 1

    Step 1

    Provide the exact source

    Open the page in a secure context and press Activate Scanner Stream; approve camera access only when ready.

  2. 2

    Step 2

    Choose the operation

    Aim the preferred rear camera at one complete QR symbol with sharp focus, even lighting, contrast, and visible quiet zone.

  3. 3

    Step 3

    Configure the available options

    Wait for the first decoded payload; the scanner then cancels the frame loop and stops every camera track automatically.

  4. 4

    Step 4

    Run the local operation

    Inspect the exact value and heuristic type before copying or explicitly opening any URL.

  5. 5

    Step 5

    Verify and continue

    Use Scan Image File when live capture fails, and clear optional history after handling sensitive values.

Common mistakes

Expecting camera access on an insecure or disallowed origin

Consequence: getUserMedia is restricted to secure contexts and browser/OS permission policy; the API can be absent or reject the request.

Fix: Use HTTPS or a trusted localhost context and grant permission only through the explicit scanner button.

Opening the first decoded link without inspection

Consequence: A QR symbol can hide a deceptive host, credential path, or look-alike text; prefix classification is not a safety check.

Fix: Read the displayed URL, validate it, and open only after confirming scheme, host, and intent.

Leaving the symbol too close, cropped, reflective, or moving

Consequence: The decoder needs stable pixels and finder patterns; glare, motion blur, missing quiet zone, or autofocus limits prevent a match.

Fix: Increase distance, steady the device, improve diffuse lighting, or capture a sharp image and use file fallback.

Best practices

  • Grant camera permission only for the active scan and press Stop if you no longer need the stream.
  • Decode unknown content to text first and validate URLs, tokens, Wi-Fi credentials, or contacts before acting.
  • Clear browser-level permission and optional local history on shared devices when payloads are sensitive.

Connected workflows

Scan, inspect, and validate an untrusted QR payload

QR Code ScannerURL ValidatorJWT Decoder

Capture one payload with minimal camera exposure, inspect it as text, then use a type-specific local validator before any navigation or import.

  1. Start camera explicitly
  2. Decode one symbol
  3. Stop media tracks
  4. Inspect exact text
  5. Validate before acting

Browser limitations

  • Camera scanning requires getUserMedia, a secure context, user/OS permission, and usable hardware; embedded frames or enterprise policy can block it.
  • Full-resolution video frames are read on the main thread with requestAnimationFrame, which can consume CPU/battery and reduce responsiveness on mobile devices.
  • The scanner returns the first QR code only and has no torch, zoom, camera selector, multi-code scan, other barcode formats, or confidence score.

Authoritative resources

ISO/IEC 18004:2024 QR code symbology specificationPublisher: ISO / IEC · Reviewed: 2026-07-26MediaDevices.getUserMedia()Publisher: MDN Web Docs · Reviewed: 2026-07-26

Concrete examples

Input
A camera frame containing a QR symbol with payload WIFI:T:WPA;S:Guest;P:ExamplePass123;;
Result
Type: wifi; camera tracks stop after the first successful decode.

jsQR returns the exact symbol text and prefix classification labels WIFI: as wifi; no connection attempt or credential validation occurs.

Frequently asked questions

When does the page ask for camera permission?

Only after you press Activate Scanner Stream; no permission prompt is issued during page load.

Does the scanner send video to a server?

No. Each frame is drawn to an in-page Canvas and decoded locally, with no upload or recording path in this workspace.

Why did the camera stop immediately after reading one code?

That is intentional: the first result cancels requestAnimationFrame and stops every media track to minimize continued camera use.

Can I choose a different camera or turn on the torch?

No. The request merely prefers facingMode environment; the current UI has no device selector, zoom, focus, or torch controls.

What can I do if camera permission is denied?

Use Scan Image File with a sharp local photo, or correct site/OS permissions and restart the stream explicitly.

Privacy and offline behavior

Video frames and selected image pixels are processed locally in Canvas and are not recorded or uploaded. Media tracks stop after a result, when you press Stop, or on cleanup; optional history is stored only in this browser when enabled.