@rdlabo/capacitor-codescanner

コードスキャナー向けの Capacitor プラグインです。

特定のユースケース向けに作られたバーコードリーダーです。他の Capacitor バーコードリーダープラグインと異なり、このプラグインはモーダルを開き、その中でスキャンを行います。そのため、Web アセットを操作する必要はありません。

インストール

npm install @rdlabo/capacitor-codescanner
npx cap sync

使い方

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,
  });
};

v8.0.3の既知の制限: 公開TypeScriptインターフェースには metadataObjectTypes が定義されていますが、native実装は従来の CodeTypes キーを読み取ります。従来キーは ScannerOption に含まれないため、このリリースではコード種別による絞り込みを省略してください。

機能

• 自動ライト制御: スキャナー開始時にフラッシュライトが自動で点灯します
• バイブレーション: コード検出時にバイブレーションでフィードバックします
• 検出エリア表示: 検出エリアを赤い枠で視覚的に表示します
• 検出コードのハイライト: 検出したコードを赤い枠でハイライトします
• 閉じるボタン: 左上の「✕」ボタンでスキャナーを閉じられます
• 複数スキャンモード: isMulti: true で複数コードを連続スキャンできます

API

<docgen-index>

• present(...)
• addListener('CodeScannerCatchEvent', ...)
• インターフェース
• 型エイリアス

</docgen-index>

<docgen-api>

present(...)

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

addListener('CodeScannerCatchEvent', ...)

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

戻り値: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>></code>

インターフェース

ScannerOption

PluginListenerHandle

型エイリアス

MetadataObjectTypes

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

</docgen-api>