html5-qrcode: QR and barcode scanning for web browsers
Camera and file-based QR/barcode scanning library.
Learn more about HTML5 QR Code
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);Top in Frontend
Related Repositories
Discover similar tools and frameworks used by developers
Slick
Responsive jQuery plugin for touch-enabled content carousels.
Awesome CSS Frameworks
Categorized catalog of CSS frameworks with GitHub metrics.
hls.js
JavaScript HLS client with MPEG-TS to MP4 transmuxing.
Tailwind CSS Typography
Cascading typographic styles for unstyled HTML containers.
Excalidraw
React canvas library with encrypted collaborative drawing.