Technical Specification: Free Online Barcode & QR Code Scanner

Overview

A high-performance, browser-based utility that utilizes the user's webcam to decode various 1D and 2D barcodes in real-time. The application provides a frictionless experience for users to extract data from codes without installing desktop software.

Core Features

• Real-Time Scanning: Instant visual feedback using html5-qrcode library logic.
• Multi-Format Support: Capability to decode QR, UPC, EAN, ITF, and Code 128 standards.
• In-Memory History: A session-based activity log showing the last 10 scanned items (cleared on page reload due to storage restrictions).
• Copy to Clipboard: One-tap action for captured data.
• Responsive Design: Camera preview automatically adjusts to aspect ratios of different mobile and desktop sensors.

Technical Implementation

• Architecture: Single-file HTML5/CSS3/Vanilla JS.
• Library: Integrate html5-qrcode via CDN.
• Constraints:
  • Storage: STRICTLY NO localStorage or sessionStorage. Maintain state using JavaScript variables only. Data will be ephemeral.
  • Permissions: Implement graceful degradation if camera permissions are denied.
  • Modals: Replace native alert() with a custom, lightweight CSS-based modal system.
  • Sandbox Compatibility: Do not attempt to use window.open or non-standard popups.

UI/UX Design

• Aesthetic: Clean, minimalist "SaaS" aesthetic. High-contrast whites (#FFFFFF) and light grays (#F9FAFB) with vibrant blue (#2563EB) accents.
• Typography: Sans-serif, human-readable font stack (e.g., Inter, system-ui).
• Camera Viewport: Rounded corners, subtle drop-shadow, and a non-intrusive scanning reticle (frame overlay).
• Animations:
  • Smooth fade-in transitions for scanned results.
  • Pulse effect on the "Scan" button.
  • Micro-interactions on hover and clipboard interaction.

Layout Structure

1. Header: Simple, descriptive h1 title and brief utility description.
2. Scanner Area: Primary container holding the video element. Include a "Toggle Camera" button for devices with front/back cameras.
3. Action Bar: Controls for flash/torch (if hardware supported) and manual library selection.
4. Results Board: A clean table or list view showing the Scanned Value, Format, and Timestamp. Includes a "Copy" icon button next to each result.
5. Instruction Section: Brief, SEO-optimized text below the main tool explaining how to use the scanner.

Developer Instructions

• Use a light-mode only color palette (Grays/Blues/Greens). Do not include dark mode.
• Ensure the app is mobile-responsive; test specifically for aspect ratio changes in landscape vs portrait camera orientations.
• Use SVG icons for UI elements to ensure crisp resolution on high-DPI displays.
• Verify all external script calls are secure (HTTPS/Subresource Integrity).