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.
Related Reading
Guides and comparisons from the Greptile content library
API Security: What It Is, Why It Matters, and 7 Best Practices for 2026
What API security is, the OWASP API Security Top 10 risks with real examples from open source PRs, seven best practices to start with, and how to test your APIs with static scanning, dynamic testing, and runtime validation.
Top Greptile alternatives to consider in 2026
A tongue-in-cheek list of Greptile alternatives, from printing out your code to hiring a lizard, with pros, cons, and a comparison table for each.
What is a sandbox environment? Everything you need to know
A sandbox is an isolated, disposable environment where code can run without touching anything else. Learn how sandboxes work, what teams use them for, how to set one up, and why they matter more now that agents write so much of the code.
9 Best Pull Request Automation Tools [2026]
Nine pull request automation tools compared on features, use cases, pricing, and user feedback, so you can work out which one closes the gap between how fast your team writes code and how fast it can review it.