@rdlabo/capacitor-codescanner

Capacitor Plugin for Code Scanner

This is a barcode reader created for specific use cases. Unlike other Capacitor barcode reader plugins, this plugin opens a modal and performs scanning within it. Therefore, there is no need to manipulate web assets.

Install

npm install @rdlabo/capacitor-codescanner
npx cap sync

Usage

import { CodeScanner } from '@rdlabo/capacitor-codescanner';

// Scan a QR code
const scanQRCode = async () => {
  await CodeScanner.addListener('CodeScannerCatchEvent', (event) => {
    console.log('Scanned code:', event.code);
  });

  await CodeScanner.present({
    detectionWidth: 0.6,
    detectionHeight: 0.15,
    isMulti: false,
  });
};

// Continuously scan codes
const scanMultipleCodes = async () => {
  await CodeScanner.addListener('CodeScannerCatchEvent', (event) => {
    console.log('Scanned code:', event.code);
  });

  await CodeScanner.present({
    detectionWidth: 0.8,
    detectionHeight: 0.2,
    isMulti: true,
  });
};

Known limitation in v8.0.3: the public TypeScript interface exposes metadataObjectTypes,
but the native implementations still read the legacy CodeTypes key. Because the legacy key is
not part of ScannerOption, omit code-type filtering with this release.

Functions

• Automatic Light Control: Flashlight automatically turns on when the scanner starts
• Vibration: Provides vibration feedback when a code is detected
• Detection Area Display: Visually displays the detection area with a red frame
• Detected Code Highlighting: Highlights detected codes with a red frame
• Close Button: You can close the scanner with the "✕" button in the upper left corner
• Multiple Scan Mode: You can continuously scan multiple codes with isMulti: true

API

<docgen-index>

• present(...)
• addListener('CodeScannerCatchEvent', ...)
• Interfaces
• Type Aliases

</docgen-index>

<docgen-api>

present(...)

present(scannerOption: ScannerOption) => Promise<void>

addListener('CodeScannerCatchEvent', ...)

addListener(eventName: 'CodeScannerCatchEvent', listenerFunc: (event: { code: string; }) => void) => Promise<PluginListenerHandle>

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>></code>

Interfaces

ScannerOption

PluginListenerHandle

Type Aliases

MetadataObjectTypes

<code>'aztec' | 'code128' | 'code39' | 'code39Mod43' | 'code93' | 'dataMatrix' | 'ean13' | 'ean8' | 'face' | 'interleaved2of5' | 'itf14' | 'pdf417' | 'qr' | 'upce' | 'catBody' | 'dogBody' | 'humanBody' | 'salientObject'</code>

</docgen-api>