CodeScanner
CodeScanner はネイティブのスキャナーモーダルを開き、スキャン結果を届けます。インストール とカメラ権限の設定のあとで呼び出します。ボタンなどユーザー操作から開始します。最初の検出を取りこぼさないよう、present より前に addListener を登録します。present はモーダルが閉じたとき(スキャン後またはユーザーがキャンセルしたとき)に解決します。再スキャンでリスナーが積み上がらないよう、その後ハンドルを remove します。
present
既知の QR を 1 件読み、リスナーで event.code を確認してからモーダルを閉じます(単発スキャンでは検出後に閉じる場合もあります)。
import { CodeScanner } from '@rdlabo/capacitor-codescanner';
import type { PluginListenerHandle } from '@capacitor/core';
const scanQRCode = async () => {
let handle: PluginListenerHandle | undefined;
try {
handle = await CodeScanner.addListener('CodeScannerCatchEvent', (event) => {
console.log('Scanned code:', event.code);
});
await CodeScanner.present({
detectionWidth: 0.6,
detectionHeight: 0.15,
isMulti: false,
});
} finally {
await handle?.remove();
}
};
連続マルチスキャンでは、listen → present → remove の流れはそのまま、isMulti: true を設定します。前のハンドルを remove せずに addListener を重ねないでください。
await CodeScanner.present({
detectionWidth: 0.8,
detectionHeight: 0.2,
isMulti: true,
});
isMulti: true だとユーザーが閉じるまでモーダルを開いたまま複数コードをスキャンできます。
コード種別のフィルタ
バージョン 8.0.3 では、公開 TypeScript 型は metadataObjectTypes を、ネイティブ実装は CodeTypes を想定しており不一致があります。このバージョンでは既定値(qr、code39、ean13)を使ってください。
method present(...)
present(scannerOption: ScannerOption) => Promise<void>
interface 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) |
type alias MetadataObjectTypes
'aztec' | 'code128' | 'code39' | 'code39Mod43' | 'code93' | 'dataMatrix' | 'ean13' | 'ean8' | 'face' | 'interleaved2of5' | 'itf14' | 'pdf417' | 'qr' | 'upce' | 'catBody' | 'dogBody' | 'humanBody' | 'salientObject'
イベントの値は { code: string } です。型はAPIを参照してください。