@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';

// 基本的なQRコードスキャン
const scanQRCode = async () => {
  await CodeScanner.addListener('CodeScannerCatchEvent', (event) => {
    console.log('スキャンされたコード:', event.code);
  });

  await CodeScanner.present({
    detectionX: 0.2,
    detectionY: 0.35,
    detectionWidth: 0.6,
    detectionHeight: 0.15,
    isMulti: false,
    CodeTypes: ['qr']
  });
};

// 複数のバーコードタイプを連続スキャン
const scanMultipleCodes = async () => {
  await CodeScanner.addListener('CodeScannerCatchEvent', (event) => {
    console.log('スキャンされたコード:', event.code);
  });

  await CodeScanner.present({
    detectionX: 0.1,
    detectionY: 0.3,
    detectionWidth: 0.8,
    detectionHeight: 0.2,
    isMulti: true,
    CodeTypes: ['qr', 'code39', 'ean13', 'code128']
  });
};

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 right corner
• Multiple Scan Mode: You can continuously scan multiple codes with isMulti: true

API

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

present(...)

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

| Param | Type | | ------------------- | ------------------------------------------------------- | | scannerOption | ScannerOption |

addListener('CodeScannerCatchEvent', ...)

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

| Param | Type | | ------------------ | -------------------------------------------------- | | eventName | 'CodeScannerCatchEvent' | | listenerFunc | (event: { code: string; }) => void |

Returns: Promise<PluginListenerHandle>

Interfaces

ScannerOption

| Prop | Type | Description | | ------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | detectionWidth | number | | | detectionHeight | number | | | enableCloseButton | boolean | Enable close button on the top left of the scanning area (default: true) | | sheetScreenRatio | number | Specify the ratio of the scanning area (sheet modal size) to the screen size. Default is 0.9 for android, 1(pageSheet) for iOS. | | metadataObjectTypes | MetadataObjectTypes[] | Specify the types of codes to recognize (default: ["qr", "code39", "ean13"]) | | isMulti | boolean | Enable multi scan mode (default: false) | | enableAutoLight | boolean | Enable auto light when environment is dark (default: true) |

PluginListenerHandle

| Prop | Type | | ------------ | ----------------------------------------- | | remove | () => Promise<void> |

Type Aliases

MetadataObjectTypes

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