Vanilla JavaScript Projects

Project 10, AI in the browser

QR and Barcode Scanner

Point your camera at a QR code or barcode, or drop in a picture of one. You can also make a QR code here and scan it straight back.

Runs on
Your device
Model
Shape Detection or ZXing
First download
About 1 MB fallback
Your browser
Checking

Scan a code

Choosing a detector

Choose a mode above.

Ready

Scanned codes

  • Codes you scan show here.

How it works

  1. Pick a detectorThe page uses the browser's own BarcodeDetector when it exists, otherwise it loads the same API backed by ZXing WebAssembly.
  2. Scan framesAbout five times a second, the current camera frame is passed to detect(), which returns each code with its corner points.
  3. Show resultsCorners are drawn on a canvas over the video, and new codes are added to the history with a short beep.
// Native API, or the same API backed by ZXing WebAssembly
const Detector = "BarcodeDetector" in window
  ? window.BarcodeDetector
  : (await import("https://cdn.jsdelivr.net/npm/barcode-detector@3.2.2/dist/es/ponyfill.js")).BarcodeDetector;

const detector = new Detector({ formats: ["qr_code", "ean_13", "code_128"] });

// Works with <video>, <img>, <canvas>, ImageBitmap or a Blob
const codes = await detector.detect(videoElement);
for (const c of codes) console.log(c.format, c.rawValue, c.cornerPoints);