html5-qrcode: QR and barcode scanning for web browsers
Camera and file-based QR/barcode scanning library.
Learn more about html5-qrcode
html5-qrcode is a JavaScript library that integrates barcode and QR code scanning into web applications through the HTML5 Camera API. The library handles camera permission management, frame capture, and code detection across different browsers and platforms. It offers two API levels: Html5QrcodeScanner for a complete UI solution and Html5Qrcode for building custom interfaces. The library also supports scanning from local image files, providing an alternative for browsers with restricted camera access.
Dual API Levels
Html5QrcodeScanner provides a complete UI component for immediate integration, while Html5Qrcode offers low-level camera control for custom interfaces. Choose between zero-configuration setup or full programmatic control over the scanning workflow.
Local File Processing
Scans QR codes and barcodes from uploaded image files without server communication. Enables scanning functionality in mobile browsers with restricted inline camera access or as an alternative input method for desktop users.
Cross-Platform Format Support
Detects QR codes plus multiple 1D/2D barcode formats across all major browsers and operating systems. Single codebase works on Android, iOS, Windows, macOS, and Linux without platform-specific implementations.
import { Html5QrcodeScanner } from "html5-qrcode";
function onScanSuccess(decodedText, decodedResult) {
alert(`QR Code detected: ${decodedText}`);
}
const scanner = new Html5QrcodeScanner(
"reader",
{ fps: 10, qrbox: { width: 250, height: 250 } },
false
);
scanner.render(onScanSuccess);Maintenance release improving backwards compatibility and exporting Html5QrcodeScannerConfig for TypeScript users.
- –Import Html5QrcodeScannerConfig directly from the package for type-safe configuration in TypeScript projects.
- –Review scanner UI changes including updated 'Scanner Paused' color tone that may affect custom styling.
Fixes broken camera-based QR code scanning functionality.
- –Upgrade to restore camera scanning; prior versions fail to capture QR codes via device camera.
- –Release notes do not specify root cause, affected platforms, or configuration changes required.
Patch release fixes minified JS bundle and improves UI accessibility and SEO; no breaking changes or new requirements.
- –Update to resolve issues in the minified JavaScript distribution artifact.
- –Review UI changes for accessibility and SEO improvements if customizing the scanner interface.
Related Repositories
Discover similar tools and frameworks used by developers
chenyuluoyan_thin
A refined thin-weight Chinese font family designed for modern digital interfaces, offering graceful readability and aesthetic appeal for web and application typography.
components
Material Design components and utilities for Angular applications.
vite
Native ESM dev server with Rollup production builds.
Font-Awesome
Scalable vector icon library with multiple rendering formats.
react-beautiful-dnd
Accessible React library for list drag-and-drop interactions.