バーコードスキャナー
テスト環境(バージョン番号): 1.3.0
このプラグインでは、デバイスのカメラでバーコードやQRコード[^1]を読み取り、 抽出された文字列を取得します。
@monaca/monaca-plugin-scan-barcode
- Cordova 11.0.0 以降
- Android プラットフォーム 10.1.2 以降
- iOS プラットフォーム 6.2.0 以降
- Android 5.1以降 (9以降 推奨)
- iOS 11以降 (13以降 推奨)
- QR_CODE
- EAN_8
- EAN_13
- ITF
一部の端末で正常に動作しない場合があります 。
Normalモード(v1.0.0〜) 検出されたバーコードが示す文字列が画面に表示されます。これをタップすると画面が閉じられて処理を返します。One Shotモード(v1.1.0〜) バーコードが検出されると自動的にスキャナ画面を閉じて処理を返します。
検出されない状態で一定時間経過すると、指定したメッセージが表示されます。
monaca.BarcodeScanner.scan(successCallback, failCallback[, options])
scan()を呼び出すとスキャナ画面に遷移します。- 検出されたバーコードが示す文字列が枠の下に表示されます。(
Normalモード) - 文字列をタップすると元の画面に戻り、文字列とバーコードの種類が返されます。
One Shotモードの場合、最初に検出されたバーコードの文字列と種類が返され、自動的にスキャナ画面が閉じられます。- 文字列を選択していない状態で元の画面に戻ると検出キャンセルとなります。 iOSの場合は「閉じる」(画面上のX)ボタン、Androidの場合は「戻る」ボタンで元の画面へ遷移します。
successCallback(result)result: 以下のデータが返されます。
{
data: {
"text": "xxxxxxxx" // 検出された文字列
"format": "QR_CODE" // バーコードの種類
},
cancelled: false // 検出がキャンセルされたかどうか
}
failCallback(error)error: エラーメッセージ(文字列)
message | description |
|---|---|
permission denied | camera permission is not granted. |
{
"oneShot" : true,
"timeoutPrompt" : {
"show" : true,
"timeout" : 5,
"prompt" : "Not detected"
},
"debug" : {
"preview" : 0
}
}
parameter | type | default value | description |
|---|---|---|---|
oneShot | boolean | false | One Shot モード有効/無効 |
timeoutPrompt.show | boolean | false | 検出タイムアウトメッセージ 表示/非表示 |
timeoutPrompt.timeout | int | - | メッセージが表示されるまでの時間(秒) |
timeoutPrompt.prompt | string | "Barcode not detected" | 検出タイムアウトメッセージ |
debug.preview
(android only) | int | 0 | デバッグプレビューモード(Androidのみ)
スキャン画面にバーコード検出直前の画像を表示
0: OFF(default)
1: 検出エリア内部
2: カメラプレビュー全体 |
monaca.BarcodeScanner.scan((result) => {
if (result.cancelled) {
// scan cancelled
} else {
// scan
const detected_text = result.data.text;
const detected_format = result.data.format;
}
}, (error) => {
// permission error
const error_message = error;
}, {
"oneShot" : true,
"timeoutPrompt" : {
"show" : true,
"timeout" : 5,
"prompt" : "Not detected"
}
});
iOS 10以降、プライバシーに関連するデータにアクセスする場合は、 info.plist にデータにアクセスする説明が必須になります。
この説明文は、アクセス許可ダイアログ に表示されます。
このプラグインでは、次の使用説明が必要になります。
NSCameraUsageDescription：アプリがユーザーのカメラにアクセスする理由を記述します
設定を info.plist に追加するには、
config.xml ファイルの <edit-config> タグに以下のように設定します。 <platform name="ios">
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
<string>need camera access to scan barcode</string>
</edit-config>
</platform>
内部で使用するライブラリ
androidx.camera:camera-view がcompileSDKVersion>=31を必要としています。
このため、Monaca クラウド IDE の [ Androidアプリ設定 ] でターゲットSDKバージョンを31以上に設定する必要があります。このプラグインはカメラでキャプチャした画像(ImageProxy)を変換し、バーコード検出ライブラリ(MLKit)に渡すことでバーコードを検出しています。
ImageProxyには様々なフォーマットの画像を格納することができ、カメラがどのようなフォーマットでキャプチャするのかは端末に依存しています。
一部の端末では、プラグインが対応していない形式でキャプチャされることによりバーコードの検出に失敗する場合があります。
バージョン | 対応フォーマット |
|---|---|
〜ver.1.2.1 | - JPEG および YUV_420_888 フォーマットに対応
- プレーンバッファのrowStride が ImageWidth と同じ場合のみ対応 |
ver.1.3.0 | - プレーンバッファの rowStrideがImageWidthと異なる場合に対応 |
ver.1.3.0 で追加されたデバッグプレビュー機能を用いることでデバイスの対応状況を確認することができます。
- optionsでデ バッグプレビューをONに設定してください。
monaca.BarcodeScanner.scan((result) => {
if (result.cancelled) {
// scan cancelled
} else {
// scan
}
}, (error) => {
// permission error
const error_message = error;
}, {
"debug" : {
"preview" : 1
}
});
- スキャン画面に、バーコード検出直前の画像がサムネイル表示されます。
このサムネイル画像が乱れて表示されている場合は対応していないデバイスとなります。
- iOSでは14桁のITF-14のみ検出することができます。
- Android では様々な桁数のITFコードが検出されます。
- ITFコードは「桁落ち(誤検出)」の発生しやすい規格のため、バーコードを枠内に正確に収めてスキャンして頂く必要があります。
[^1]: QRコードは(株)デンソーウェーブの登録商標です。
最終更新 1mo ago