Barcode Scanning in JavaScript
Scan barcodes and QR codes in the browser using the BarcodeDetector API and ZXing library.
Published:
Tags: barcode scanner JavaScript, BarcodeDetector API, ZXing JavaScript
Barcode Scanning in JavaScript Part of our complete guide to this topic — see the full series. The browser now has native barcode detection built in. The API handles Code 128, EAN, UPC, QR, Data Matrix, and more — with no libraries and hardware-accelerated speed on supported platforms. --- What is BarcodeDetector: The Native Approach? Checking Support and Getting Available Formats Detecting from an Image Element Detecting from a File Upload --- What is Live Camera Scanning? --- What zxing fallback for firefox and safari? --- What is unified approach: native api with zxing fallback? --- What is Parsing Common Barcode Payloads? --- What browsers support this? | Browser | BarcodeDetector | Notes | |---------|-----------------|-------| | Chrome 83+ | ✅ | Full support | | Edge 83+ | ✅ | Full…
Frequently Asked Questions
How do I scan a barcode in JavaScript?
Use the BarcodeDetector API: create a detector with your desired formats, then call detector.detect(imageElement) — it returns an array of detected barcodes with their decoded values. For cameras, pass the live video element. Fall back to the ZXing library on browsers that don't support BarcodeDetector.
What is the BarcodeDetector API?
BarcodeDetector is a native browser API (part of the Shape Detection API specification) that detects and decodes barcodes and QR codes from images, canvas elements, and video frames. It uses the OS's native barcode detection hardware or software for speed, making it faster than pure-JavaScript alternatives.
What browsers support BarcodeDetector?
BarcodeDetector is supported in Chrome 83+, Edge 83+, and Android Chrome. It is not available in Firefox or Safari (as of 2026 — the spec is implemented but disabled in those browsers). Use feature detection and fall back to @zxing/library for full cross-browser coverage.
How do I use ZXing for barcode scanning?
Install @zxing/library via npm. Use BrowserMultiFormatReader for any format or BrowserQRCodeReader for QR-only. Call reader.decodeFromVideoDevice(null, videoElement, callback) for live camera scanning or reader.decodeFromImageUrl(url) for image files.
How do I scan barcodes from a webcam?
Request the camera stream with navigator.mediaDevices.getUserMedia, attach it to a video element, then pass the video element to BarcodeDetector.detect() in a polling loop (setInterval or requestAnimationFrame). Use facingMode: 'environment' to select the rear camera on mobile devices.
All articles · theproductguy.in