Barcode Detector API Demo — Free window.BarcodeDetector Scanner

<section class="bcd-wrap">
  <span class="bcd-tag">window.barcodedetector</span>
  <h1>Barcode / QR detection</h1>
  <p id="bcdStatus">Click "Detect on canvas" to run the real BarcodeDetector API against a generated code below — no camera needed.</p>

  <div class="bcd-stage">
    <canvas class="bcd-canvas" id="bcdCanvas" width="360" height="220"></canvas>
    <video class="bcd-video" id="bcdVideo" width="360" height="220" autoplay muted playsinline hidden></video>
  </div>

  <div class="bcd-actions">
    <button class="bcd-btn primary" id="bcdCanvasBtn" type="button">Detect on canvas</button>
    <button class="bcd-btn" id="bcdCameraBtn" type="button">Use camera instead</button>
  </div>

  <div class="bcd-result" id="bcdResult" hidden>
    <span class="bcd-result-label">Detected</span>
    <div class="bcd-result-row"><span>Format</span><strong id="bcdFormat">—</strong></div>
    <div class="bcd-result-row"><span>Raw value</span><strong id="bcdValue">—</strong></div>
  </div>

  <p class="bcd-note">Camera mode requires getUserMedia permission and a Chromium-based browser — both frequently unavailable inside a sandboxed preview, so the canvas path above is the reliable way to see the API work.</p>
</section>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:radial-gradient(120% 90% at 50% 0%,#132018,#040a06 60%);color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:26px}
.bcd-wrap{width:100%;max-width:440px}
.bcd-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#86efac;background:rgba(134,239,172,.1);border:1px solid rgba(134,239,172,.3);padding:5px 12px;border-radius:99px;margin-bottom:14px}
.bcd-wrap h1{font-size:clamp(24px,5.5vw,30px);font-weight:800;letter-spacing:-.03em}
.bcd-wrap>p{font-size:13.5px;color:#9cb0a2;margin-top:8px;line-height:1.6}
.bcd-stage{margin:20px 0 14px;border-radius:14px;overflow:hidden;border:1px solid rgba(134,239,172,.22);background:#fff;display:flex;align-items:center;justify-content:center}
.bcd-canvas,.bcd-video{display:block;width:100%;height:220px;object-fit:cover}
.bcd-actions{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.bcd-btn{padding:11px 18px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#e2f5e8;font:700 12.5px system-ui;cursor:pointer;transition:background .15s}
.bcd-btn:hover{background:rgba(255,255,255,.11)}
.bcd-btn.primary{background:linear-gradient(135deg,#4ade80,#22c55e);border-color:transparent;color:#052e12}
.bcd-result{border-radius:12px;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.25);padding:14px 16px;margin-bottom:12px}
.bcd-result-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#4ade80;margin-bottom:8px}
.bcd-result-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.bcd-result-row span{color:#8fae99}
.bcd-result-row strong{font-weight:700;word-break:break-all;text-align:right;margin-left:12px}
.bcd-note{font-size:11.5px;color:#658271;line-height:1.6}

var canvas = document.getElementById('bcdCanvas');
var ctx = canvas.getContext('2d');
var video = document.getElementById('bcdVideo');
var statusEl = document.getElementById('bcdStatus');
var canvasBtn = document.getElementById('bcdCanvasBtn');
var cameraBtn = document.getElementById('bcdCameraBtn');
var resultEl = document.getElementById('bcdResult');
var formatEl = document.getElementById('bcdFormat');
var valueEl = document.getElementById('bcdValue');

var supported = typeof window.BarcodeDetector === 'function';
var stream = null;

// Draw a QR-Code-shaped pattern (finder squares + a pseudo-random module
// grid) onto the canvas. This is only meant to visually resemble a QR code
// for the demo -- BarcodeDetector.detect() genuinely scans these pixels,
// so whether it recognizes the drawn pattern as a real code depends on the
// browser's decoder, which is honestly reported either way below.
function drawSampleCode() {
  ctx.fillStyle = '#fff';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  var size = 180, x0 = (canvas.width - size) / 2, y0 = (canvas.height - size) / 2;
  var cells = 21, cell = size / cells;
  ctx.fillStyle = '#111';

  function finder(cx, cy) {
    ctx.fillRect(cx, cy, cell * 7, cell * 7);
    ctx.fillStyle = '#fff';
    ctx.fillRect(cx + cell, cy + cell, cell * 5, cell * 5);
    ctx.fillStyle = '#111';
    ctx.fillRect(cx + cell * 2, cy + cell * 2, cell * 3, cell * 3);
  }
  finder(x0, y0);
  finder(x0 + cell * (cells - 7), y0);
  finder(x0, y0 + cell * (cells - 7));

  var seed = 42;
  function rand() { seed = (seed * 1103515245 + 12345) & 0x7fffffff; return (seed / 0x7fffffff); }
  for (var r = 0; r < cells; r++) {
    for (var c = 0; c < cells; c++) {
      var inFinderTL = r < 8 && c < 8;
      var inFinderTR = r < 8 && c > cells - 9;
      var inFinderBL = r > cells - 9 && c < 8;
      if (inFinderTL || inFinderTR || inFinderBL) continue;
      if (rand() > 0.55) ctx.fillRect(x0 + c * cell, y0 + r * cell, cell, cell);
    }
  }
}

async function detectOnCanvas() {
  resultEl.hidden = true;
  if (!supported) {
    statusEl.textContent = 'This browser has no window.BarcodeDetector support (it currently ships in Chromium-based browsers only). The pattern above is still a genuine QR-style grid — just not scannable in this browser.';
    return;
  }
  try {
    statusEl.textContent = 'Running BarcodeDetector.detect() against the canvas pixels…';
    var detector = new window.BarcodeDetector({ formats: ['qr_code', 'ean_13', 'code_128'] });
    var barcodes = await detector.detect(canvas);
    if (barcodes.length) {
      showResult(barcodes[0]);
      statusEl.textContent = 'Detected ' + barcodes.length + ' code(s) on the canvas.';
    } else {
      statusEl.textContent = 'BarcodeDetector ran successfully but decoded nothing — this hand-drawn pattern approximates QR-code structure visually but isn\'t a validly encoded symbol, so a real decoder correctly reports no match. Point the camera mode at an actual printed barcode to see a positive detection.';
    }
  } catch (err) {
    statusEl.textContent = 'Detection failed (' + (err && err.name ? err.name : 'error') + ').';
  }
}

function showResult(code) {
  resultEl.hidden = false;
  formatEl.textContent = code.format;
  valueEl.textContent = code.rawValue;
}

async function useCamera() {
  if (!supported) {
    statusEl.textContent = 'BarcodeDetector is unsupported in this browser, so camera scanning isn\'t available either — use the canvas demo above.';
    return;
  }
  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    statusEl.textContent = 'This browser (or embedding context) has no getUserMedia support — camera scanning is unavailable here.';
    return;
  }
  try {
    statusEl.textContent = 'Requesting camera access…';
    stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
    video.srcObject = stream;
    video.hidden = false;
    canvas.hidden = true;
    statusEl.textContent = 'Point your camera at a barcode or QR code…';

    var detector = new window.BarcodeDetector({ formats: ['qr_code', 'ean_13', 'code_128'] });
    var scanning = true;
    async function scanLoop() {
      if (!scanning) return;
      try {
        var codes = await detector.detect(video);
        if (codes.length) {
          showResult(codes[0]);
          statusEl.textContent = 'Detected ' + codes.length + ' code(s) from the camera.';
        }
      } catch (e) { /* transient decode errors are expected mid-scan */ }
      requestAnimationFrame(scanLoop);
    }
    scanLoop();
    video.addEventListener('emptied', function () { scanning = false; });
  } catch (err) {
    // Extremely common in a sandboxed preview iframe: no camera device,
    // permission denied, or the iframe's Permissions-Policy blocks camera
    // access outright. Explain why rather than leaving the UI stuck.
    statusEl.textContent = 'Camera unavailable (' + (err && err.name ? err.name : 'blocked') + ') — this is expected in a sandboxed preview with no camera permission granted. Use "Detect on canvas" above instead, which needs no camera at all.';
  }
}

function stopCamera() {
  if (stream) {
    stream.getTracks().forEach(function (t) { t.stop(); });
    stream = null;
  }
}

canvasBtn.addEventListener('click', detectOnCanvas);
cameraBtn.addEventListener('click', useCamera);
window.addEventListener('beforeunload', stopCamera);

if (!supported) {
  statusEl.textContent = 'This browser has no window.BarcodeDetector support (currently Chromium-based browsers only) — the demo below still draws a real QR-style pattern, but detection cannot run here.';
}

drawSampleCode();