Comment on page
Barcode Scanner Plugin
Tested Version: 1.3.0
This plugin provides a scanning barcode feature. Detect barcode or QR Code[^1] by device's camera and returns extracted strings.
@monaca/monaca-plugin-barcode-scanner
- Cordova 11.0.0 or later
- Android Platform 10.1.2 or later
- iOS Platform 6.2.0 or later
- Android 5.1 or later (9 or later recommended)
- iOS 11 or later (13 or later recommended)
- QR_CODE
- EAN_8
- EAN_13
- ITF
Normal
mode (since v1.0.0) The detected code is displayed on screen and selected by tapping(clicking).One Shot
mode (since v1.1.0) The first detected code is selected and screen closed automatically.
A Specified message can be displayed if no code is detected for a certain period.
monaca.BarcodeScanner.scan(successCallback, failCallback[, options])
- Calling
scan ()
will transition to the scanner screen. - When the barcode is detected, the extracted character string is displayed below the frame.(
Normal
mode) - Tap the string to return to the original screen and the string and barcode type will be returned to
successCallback
. - In the case of
One Shot
mode, the first detected code is returned and screen is closed automatically. - When returned to the original screen without selecting the string, the detection will be cancelled. In order to return to the original screen, click the "Close" (X on the screen) button for iOS and the "Back" button for Android.
successCallback(result)
result: following data
{
data: {
"text": "xxxxxxxx" // detected string
"format": "QR_CODE" // barcode type
},
cancelled: false // detection cancelled(true) or not(false)
}
failCallback(error)
error: error message(string)
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 | Enable or disable One Shot mode. |
timeoutPrompt.show | boolean | false | Show or hide detection timeout message. |
timeoutPrompt.timeout | int | - | Period(in seconds) from when the barcode not detected until the message is displayed. |
timeoutPrompt.prompt | string | "Barcode not detected" | Timeout message. |
debug.preview
(android only) | int | 0 | Debug Preview Mode(Android only)
Displays camera preview bitmap(before sending to MLKit) on screen.
0: OFF(default) 1: Inside detection area 2: Whole camera image |
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"
}
});
Since iOS 10, it's mandatory to provide a usage description in the
info.plist
.
The description string is displayed in the permission dialog box.This plugin requires the following usage descriptions:
NSCameraUsageDescription
specifies the reason for your app to access the device's camera.
To add these entries to the
info.plist
, you can use the <edit-config>
tag in the config.xml
file like this: <platform name="ios">
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
<string>need camera access to scan barcode</string>
</edit-config>
</platform>
The library
androidx.camera:camera-view
used internally requires compileSDKVersion>=31
.
So Target SDK Version
of Android Application setting
in Monaca Cloud IDE should be set 31 or above.This plugin detects barcodes by processing the image captured by the camera (ImageProxy) and passing it to the barcode detection library (MLKit).
ImageProxy can store images in a variety of formats, and it depends on the device what format the camera captures.
Some devices may fail to detect barcodes because they are captured in a format not supported by the plugin.
version | supported format |
---|---|
before ver.1.2.1 | - Support JPEG or YUV_420_888
- Support only when plane buffer's rowStride is same as ImageWidth |
ver.1.3.0 | - Support when plane buffer's rowStride is different from ImageWidth |
You can check the device compatibility by using the
debug preview
feature added in ver.1.3.0.- Enable
debug preview
in options
monaca.BarcodeScanner.scan((result) => {
if (result.cancelled) {
// scan cancelled
} else {
// scan
}
}, (error) => {
// permission error
const error_message = error;
}, {
"debug" : {
"preview" : 1
}
});
- Thumbnail of the image before barcode detection are displayed on the scan screen.
If this thumbnail image is displayed distorted, it will be a device that does not support.

- For iOS, only ITF-14 (14 digits ITF) is supported.
- For Android, various digits ITF is supported.
- Because ITF code standard is prone to cause missdetection, requiring the barcode to be exactly positioned within the detection area.
[^1]: QR Code is a registered trademark of DENSO WAVE INCORPORATED in Japan and in other countries.
Last modified 3mo ago