Free Online Barcode Scanner & QR Code Reader

Overview

A high-performance, browser-based utility that allows users to scan barcodes and QR codes using either their webcam or by uploading existing images. The application is designed to be lightweight, fast, and privacy-focused, operating entirely on the client side.

Core Features

• Dual Input Modes: Seamlessly switch between 'Camera Scan' (WebRTC) and 'File Upload' modes.
• Real-Time Detection: Uses high-efficiency barcode detection libraries to identify patterns instantly.
• Scan History: A persistent (in-memory only) log of scanned barcodes during the current session, allowing users to copy results or clear them at will.
• Format Support: Support for common 1D and 2D formats (QR, EAN-13, EAN-8, UPC-A, Code 128, etc.).
• Responsive Design: Mobile-first architecture ensures consistent performance on desktop and handheld devices.
• Clipboard Integration: One-click functionality to copy any scanned barcode value to the system clipboard.

Technical Architecture

• Engine: Utilize html5-qrcode or a similar robust library via CDN for cross-platform barcode detection.
• Architecture: Single-file HTML5/CSS3/Vanilla JS application.
• Storage Strategy: Strictly in-memory data structures (Arrays/Objects). Do not use localStorage, sessionStorage, or cookies. This complies with iframe sandboxing.
• Performance: Use requestAnimationFrame for smooth camera frame processing.

UI Specifications

• Layout:
  • Header: Clean navigation with a clear application title.
  • Main Stage: A large, card-style container housing the video preview or the drag-and-drop file upload zone.
  • Control Bar: Icons/Buttons for toggling input mode and triggering the file selector.
  • Results Panel: A bottom section that expands or populates as codes are detected, featuring a list of found codes with timestamps and copy buttons.
• Visual Style:
  • Palette: Crisp Whites (#ffffff), soft Light Grays (#f8f9fa), and a high-contrast Primary Blue (#2563eb) for action elements.
  • Typography: System-default sans-serif stack for maximum readability.
  • Micro-interactions: Smooth fades for mode switching and subtle 'success' highlights when a code is detected.

Sandbox Compatibility & Rules

• No Persistence: Since localStorage is blocked, ensure all state resets on page refresh.
• Permission Handling: Handle camera permissions gracefully with custom UI prompts rather than browser defaults where possible.
• No External Dependencies: Keep all dependencies limited to CDN-hosted script tags.
• Design Constraints: No dark mode. No branding. No footers.