Architecture

This page describes Quagga2’s code structure and design decisions.

Project Structure

quagga2/
├── src/
│   ├── quagga.ts           # Main entry point
│   ├── config/             # Configuration handling
│   ├── decoder/            # Barcode decoding
│   │   ├── barcode_decoder.ts
│   │   └── readers/        # Individual barcode readers
│   ├── locator/            # Barcode localization
│   │   ├── barcode_locator.ts
│   │   └── skeletonizer.ts
│   ├── input/              # Input handling
│   │   ├── camera_access.ts
│   │   └── frame_grabber.ts
│   └── common/             # Shared utilities
│       ├── cv_utils.ts     # Computer vision utilities
│       └── image_wrapper.ts
├── dist/                   # Browser builds
├── lib/                    # Node.js build
└── type-definitions/       # TypeScript types

Core Components

Quagga (Main API)

The main entry point (src/quagga.ts) exposes the public API:

• init() / start() / stop()
• decodeSingle()
• onDetected() / onProcessed()
• CameraAccess namespace

Barcode Locator

Located in src/locator/, responsible for finding barcode regions in images:

• barcode_locator.ts: Main localization logic
• skeletonizer.ts: Line structure extraction (asm.js optimized)

Barcode Decoder

Located in src/decoder/, handles barcode decoding:

• barcode_decoder.ts: Coordinates decoding process
• readers/: Individual reader implementations
  • Each reader extends BarcodeReader base class
  • Implements format-specific pattern matching

Input Handling

Located in src/input/:

• camera_access.ts: Camera enumeration and control
• frame_grabber_browser.ts: Browser frame capture
• frame_grabber_node.ts: Node.js image loading

Data Flow

Camera/Image
    ↓
FrameGrabber (captures frame)
    ↓
ImageWrapper (grayscale conversion)
    ↓
BarcodeLocator (finds barcode region)
    ↓
BarcodeDecoder (decodes barcode)
    ↓
Result callbacks

Design Decisions

Bundle Everything

All dependencies are bundled into the final build. This means:

• Consumers never install dependencies directly
• All packages go in devDependencies
• Builds are self-contained

Dual Build Targets

• Browser: dist/quagga.min.js - UMD bundle
• Node.js: lib/quagga.js - CommonJS module

Reader Architecture

Readers are pluggable:

• Built-in readers in src/decoder/readers/
• External readers via Quagga.registerReader()
• All readers extend common BarcodeReader class

Build System

• Webpack 4: Module bundling
• Babel: ES6+ transpilation
• TypeScript: Type checking (but source is mixed JS/TS)

Related

• Algorithm Overview - How the algorithms work
• Create External Readers - Extend Quagga2
• Contributing - Development setup

---

← Back to Explanation