QR Snapper

QR Snapper is a simple, small, progressive web app that accesses the user's camera and looks for QR Codes.

The QR Code library is a port of JSQRCode and has been ported to work inside a Web Worker for performance.

Features

QR Snapper offers a seamless QR code scanning experience directly in your browser. Key features include:

Real-time QR Code Scanning: Instantly decode QR codes using your device's camera.
Cross-Platform Compatibility: Tested and optimized for major browsers (Chrome, Firefox, Safari) and mobile devices.
x-callback-url support: Allows other applications to receive the decoded QR code data.

Build Instructions

To set up QR Snapper locally, follow these steps:

Prerequisites:

* Node.js (v18 or later) * npm (v9 or later)

Installation:

* Clone the repository: git clone https://github.com/PaulKinlan/qrcode.git * Navigate to the project directory: cd qrcode * Install dependencies: npm install

Development:

* Run the development server: npm run dev * Open your browser to http://localhost:8080

Production Build:

* Build for production: npm run build * Preview the production build: npm run preview

Potential Issues:

* Ensure your Node.js and npm versions meet the prerequisites. * Camera access may require browser permissions. * Use HTTPS in production for camera and service worker support.

Getting Started (Quick Start)

To quickly test QR Snapper, follow these steps:

Clone or Fork the Repository:

\Note: This step requires an internet connection.\* * Clone the repository directly, or fork it and then clone your fork:

git clone https://github.com/PaulKinlan/qrcode.git

git clone https://github.com/YOUR_USERNAME/qrcode.git

Navigate to the Project Directory:

* Open a terminal and navigate to the qrcode/ directory:

cd qrcode

Install Dependencies:

\Note: This step requires an internet connection.\* * Run npm install to install the necessary dependencies (defined in package.json).

Run the tests (optional but recommended):

* npm run test:fast - builds and runs the unit tests (seconds) * npm test - the fast tier plus post-build dist/ assertions

Open in Browser:

* Open index.html (or your main HTML file) in your web browser.

Note: For full functionality (including camera access and advanced build processes), you may need to grant camera permissions and ensure your browser supports the necessary APIs. Refer to the full build instructions for details about build processes.

Code Architecture

To better understand the codebase, here's a breakdown of the key components:

Modern Modular Structure

The application is now organized into focused, maintainable modules:

scripts/main.js:

* Main entry point (32 lines) - initializes the application * Much simpler than the previous 610-line monolithic file

scripts/components/:

* QRCodeCamera.js - Main application coordinator * camera/CameraManager.js - Manages canvas rendering and camera display * camera/CameraSource.js - Low-level camera API interface (modernized, no deprecated prefixes) * camera/WebCamManager.js - Real-time webcam handling with camera switching * camera/CameraFallbackManager.js - Image upload fallback when camera unavailable * dialogs/QRCodeManager.js - Result dialog with share/copy/navigate actions * dialogs/QRCodeCallbackController.js - x-callback-url integration * dialogs/QRCodeHelpManager.js - About/help dialog

scripts/utils/:

* url-utils.js - URL normalization and security validation

scripts/qrclient.js:

* Web Worker interface for QR code detection * Uses Comlink for seamless worker communication

scripts/qrworker.js:

* QR code detection worker implementation * Uses native BarcodeDetector API when available * Falls back to the vendored qrcode-lib.js decoder

scripts/qrcode-lib.js:

* The one and only decoder source in this repo - a concatenation of the JSQRCode/ LazarSoft ZXing port, exported as a single module * Imported by qrworker.js; it has no importer of its own and there is deliberately no second copy of this decoder in the tree * Vendored upstream code: do not edit it casually. A decoder fix belongs upstream or in a clearly marked patch, and it must keep npm run test:fast green (the decoder fixture test decodes a known QR image through this file)

Modern Web APIs

The application uses modern browser APIs:

getUserMedia - No deprecated webkit/moz/ms prefixes
BarcodeDetector API - Native QR detection when available
Web Share API - Share detected URLs
Clipboard API - Copy URLs to clipboard
Service Workers - Offline support and caching

Development Notes

The project uses Vite as the build tool (replaced Gulp)
Modern ES modules throughout ("type": "module")
No Babel transpilation needed for modern browsers
Optimized production builds with Rollup under the hood
Tests use the Node built-in test runner (node --test), so there is no test framework

dependency; app/ is bundled by Vite and only DOM-free modules are unit tested

Contributing

We welcome contributions to QR Snapper! Please follow these guidelines:

Reporting Issues:

* Use the GitHub issue tracker to report bugs or suggest feature requests.

Development Setup:

* Fork the repository and create a branch for your changes.

Coding Standards:

* Follow the existing code style and conventions.

Pull Requests:

* Submit pull requests with clear descriptions of your changes. * Ensure your code is tested and documented.

License

This project is licensed under the Apache License 2.0

PaulKinlan/qrcode: The best web based QR Code reader on the web

QR Snapper

Features

Build Instructions

Getting Started (Quick Start)

Code Architecture

Modern Modular Structure

Modern Web APIs

Development Notes

Contributing

License

Reading Mode

Related Stories

How to Formalize All of Mathematics

What Are Your Chances of Surviving Resident Evil Based on Your Tech Job?

What I Actually Learn When I Build With AI

Natural Languages Have Design Trade-offs Too: Georgian Is Dynamically Typed, English Is Statically Typed

I know why Mathematicians weep

Related Stories