Barcode Scanner - WebAssembly Powered

A professional barcode scanner application powered by WebAssembly with advanced image processing and multi-engine detection.

🚀 Features

- Multi-Engine Detection: Native BarcodeDetector API + ZXing WASM
- Advanced Image Processing: Photon WASM for enhancement (grayscale, contrast, sharpen, threshold, histogram equalization)
- Intelligent Frame Caching: SubtleCrypto SHA-256 hashing with JS fallback
- Adaptive Rotation: Automatic 90°/270° rotation with Photon WASM or Canvas fallback
- Configurable FPS: Default 30 FPS, fully configurable
- Parallel Processing: All enhancement techniques run simultaneously
- Multiple Formats: EAN-13, EAN-8, UPC-A, UPC-E, Code128, Code39, QR, DataMatrix, and more
- 📦 NPM Package Ready: Full build and export configuration included

📦 Building as NPM Package

This project includes complete packaging configuration to publish as a reusable npm package with Bun as the bundler!

$3

- Bun - Fast JavaScript runtime and bundler (Install Bun)
``bash
curl -fsSL https://bun.sh/install | bash
`

$3

`bash


Install dependencies (if not already installed)

The build process using Bun:
1. Bundles all React components and hooks into optimized IIFE format
2. Generates TypeScript declarations for full type safety
3. Copies WASM files from dependencies (ZXing, Photon) to dist
4. Exposes global window.FastBarcodeScanner for direct browser use
5. No module system required - works with simple





`

For more details, see IIFE_FORMAT.md.

$3

Once published, your package provides:

✅ Main Hook - useBarcodeScanner hook for React
✅ React Components - CameraPreview, ResultDisplay, ScanHistory
✅ Legacy Barcode Scanner API - Drop-in compatibility layer via LegacyBarcodeScanner namespace
✅ IIFE Format - Universal browser support via window.FastBarcodeScanner
✅ TypeScript - Full type definitions included
✅ WASM Support - ZXing and Photon WASM modules bundled
✅ CDN Ready - Works with jsdelivr, unpkg, and other CDNs

$3

Installation (for npm/module usage):
`bash
npm install fast-barcode-scanner


or

Method 1: Direct Browser Use (IIFE - Recommended for HTML pages):
`html


`

Method 2: Module Import (for React/bundler projects):
`tsx
import { useBarcodeScanner, CameraPreview } from 'fast-barcode-scanner';

function App() {
const { videoRef, canvasRef, isScanning, result, startScanning } =
useBarcodeScanner({ formats: ['EAN-13', 'QRCode'] });

return (


In Browser (IIFE):
`html


`

With Module Import:
`tsx
import { LegacyBarcodeScanner } from 'fast-barcode-scanner';

const settings = new LegacyBarcodeScanner.ScanSettings();
settings.enableSymbologies([LegacyBarcodeScanner.Symbology.EAN13]);

const picker = await LegacyBarcodeScanner.BarcodePicker.create(container, settings);
picker.onDidScan((result) => console.log(result));
picker.startScanning();
`

🎨 Spark Application (This App)

The barcode scanner is also available as a React app in this Spark:

📦 Legacy Barcode Scanner Compatibility Layer

This project includes a compatibility layer for legacy barcode scanner libraries with a familiar API!

$3

`typescript
import { LegacyBarcodeScanner } from '@yknx4/barcode-scanner'

const settings = new LegacyBarcodeScanner.ScanSettings()
settings.enableSymbologies([
LegacyBarcodeScanner.Symbology.EAN13,
LegacyBarcodeScanner.Symbology.QR
])

const picker = await LegacyBarcodeScanner.BarcodePicker.create(container, settings)
picker.onDidScan((result) => {
console.log('Detected:', result.barcodes[0].data)
})

await picker.startScanning()
`

🎨 React Usage

The scanner is also available as a React hook:

`typescript
import { useBarcodeScanner } from '@/hooks/use-barcode-scanner'

function App() {
const { videoRef, canvasRef, startScanning, result } = useBarcodeScanner({
formats: ['EAN-13', 'QR'],
fps: 30
})

return (


`typescript
const config = {
formats: ['EAN-13', 'QR', 'Code128'], // Barcode formats to detect
fps: 30 // Scan rate (frames per second)
}
``

📄 License

The Spark Template files and resources from GitHub are licensed under the terms of the MIT license, Copyright GitHub, Inc.