CodeScanner
CodeScanner はネイティブのスキャナーモーダルを開き、スキャン結果を届けます。インストール のあとで呼び出します。最初の検出を取りこぼさないよう、present より前に addListener を登録します。
present
import { CodeScanner } from '@rdlabo/capacitor-codescanner';
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,
CodeTypes: ['qr'],
});
};
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,
CodeTypes: ['qr', 'code39', 'ean13', 'code128'],
});
};
isMulti: true だとモーダルを開いたまま複数コードをスキャンできます。
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'
addListener
import { CodeScanner } from '@rdlabo/capacitor-codescanner';
const handle = await CodeScanner.addListener('CodeScannerCatchEvent', (event) => {
console.log('Scanned code:', event.code);
});
await handle.remove();
method addListener('CodeScannerCatchEvent', ...)
addListener(eventName: 'CodeScannerCatchEvent', listenerFunc: (event: { code: string; }) => void) => Promise<PluginListenerHandle>
interface PluginListenerHandle
| Prop | Type |
|---|---|
remove |
() => Promise<void> |