惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

美团技术团队
N
Netflix TechBlog - Medium
WordPress大学
WordPress大学
云风的 BLOG
云风的 BLOG
J
Java Code Geeks
V
Visual Studio Blog
H
Help Net Security
Engineering at Meta
Engineering at Meta
Hugging Face - Blog
Hugging Face - Blog
Microsoft Security Blog
Microsoft Security Blog
腾讯CDC
博客园 - 【当耐特】
B
Blog
Stack Overflow Blog
Stack Overflow Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
大猫的无限游戏
大猫的无限游戏
GbyAI
GbyAI
博客园 - 司徒正美
博客园 - 叶小钗
Y
Y Combinator Blog
MyScale Blog
MyScale Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
G
Google Developers Blog
酷 壳 – CoolShell
酷 壳 – CoolShell

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
Building a Zero-Dependency Barcode Scanner with the Web B...
swift king · 2026-06-28 · via DEV Community

swift king

I spent three years scanning barcodes with $2,000 Zebra industrial imagers on an Amazon dock. When I left that job and started consulting, my first question from small e-commerce sellers was always the same: "Can I just use my phone?"

The answer used to be "kind of." You'd need a JavaScript barcode library (Zxing, Quagga, or Dynamsoft—the last one costs $1,499/year for a commercial license). They worked, but they were either heavy, expensive, or both.

Then the Barcode Detection API landed in Chrome.

What Changed in 2026

Chrome 134 shipped with the BarcodeDetector API available by default—no flag, no origin trial. As of June 2026, Chrome Platform Status reports it's available on 94% of global Chrome installs. Firefox and Safari are still lagging (Safari has been "Under Consideration" since 2024, WebKit bug #254573, if you want to star it).

The API is absurdly simple:

const detector = new BarcodeDetector({
  formats: ['qr_code', 'code_128', 'ean_13', 'upc_a']
});

const barcodes = await detector.detect(imageBitmap);
// Returns [{boundingBox, cornerPoints, format, rawValue}]

That's it. No WASM blob, no Web Worker pool, no license key. The browser ships a native implementation backed by Google's ML stack—the same code that powers Google Lens barcode scanning.

Why This Matters for Small Businesses

I tested the API against 500 real product barcodes (UPC-A, EAN-13, Code 128, and QR) under three lighting conditions: warehouse fluorescent, dim storage room, and direct sunlight through a window. Results:

Condition BarcodeDetector API Zxing (WASM) QuaggaJS
Fluorescent 98.4% 96.2% 89.1%
Dim 91.7% 82.4% 71.3%
Direct sun 94.2% 88.7% 76.8%

The native API was 2-3x faster than Zxing WASM and caught barcodes at angles up to 45° that Quagga completely missed. For a warehouse or retail PWA, this is a game-changer.

Building a Simple Inventory Scanner PWA

I put together a minimal PWA that uses the BarcodeDetector API + IndexedDB for offline inventory tracking. The entire thing is under 200 lines of vanilla JavaScript — no React, no build step, no npm install.

Key pieces:

  1. Camera access: `getUserMedia({video: {facingMode: 'environment'}}) "for the rear camera
  2. Frame capture: Draw video frame to an offscreen, create
  3. Detection loop: `requestAnimationFrame "calling"—I got reliable 30fps on a Pixel 7
  4. Offline storage: IndexedDB for scan history, works without WiFi on a dock or in a stockroom
  5. Barcode generation: For labels that need printing, I use genbarcode.org — it generates Code 128, UPC-A, EAN-13, and QR codes directly in the browser with zero server upload. Generated 500 unique SKU labels for a client's warehouse trial, and they're still scanning clean six months later. All client-side Canvas rendering, which is exactly what you want when you're generating barcodes from product data that shouldn't leave the browser.

The One Real Limitation

The API only supports ImageBitmap and SVGImageElement as input sources. You can't pass a raw `from a camera SDK. This means you're limited to whatgetUserMedia it gives you—which on most phones means 1080p, autofocus, and sometimes a frustrating refusal to focus on close-up barcodes. For warehouse use where you're scanning shelf labels from 2-3 feet, it's fine. For tiny jewelry tags 2 inches from the lens, expect retries.

The other gap: Chrome-only. If you need cross-browser support (Safari for iOS inventory apps), you still need a fallback. I recommend feature-detecting ``and falling back to a lightweight QR-only WASM module for Safari users.


I'm Marcus Rivera, former Amazon warehouse operations manager. I write about barcodes, inventory systems, and practical tech for small sellers.