Barcode Scanner Plugin
This Cordova plugin scans QR codes and barcodes on Android and iOS using the official Monaca plugin Barcode Scanner Plugin.
- Plugin ID/Package Name:
@monaca/monaca-plugin-barcode-scanner - Tested Version: 1.1.0
- Framework7: 6.3.16
- Build this app with the Monaca Cloud IDE. After the app is built, please install it on your device.
- Below is how to use the application.
- Tap the scan button in the footer to display the scan screen.
- Tapping the "Scan" link will take you to the scanner screen with the barcode scanner plugin function.
- When the scanner detects a barcode, it returns to the scanning screen and displays the result.
- Tap the history button in the footer to view the scanned history.
This section describes some of the main functions used in the Demo. For complete API references, please refer to the API references.
Since the barcode scanner uses a camera, permission to use the camera is required. Please note that this is a configuration process that varies with each platform.
Configure the following settings in config.xml to ask for permission to use the camera. Change the "need camera access to scan barcode" part as appropriate for the message to be displayed in the application.
<platform name="ios">
<!-- omission -->
<!-- Add the following -->
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
<string>need camera access to scan barcode</string>
</edit-config>
</platform>
This setting causes the following dialog to appear on the device.
Set the Target SDK Version to 31 or higher in the App Settings for Android of the Monaca Cloud IDE.
Moves to the scanner screen. For more information on the parameters, click here. The sample sets the following options.
www/pages/scan.html
const execute = () => {
return new Promise((res, rej) => {
const option = {
"oneShot": true,
"timeoutPrompt": {
"show": true,
"timeout": 5,
"prompt": "Not detected"
}
}
// Barcode scanner activation
monaca.BarcodeScanner.scan(res, rej, option);
});
}
Parameter Name | Value | Description |
|---|---|---|
oneShot | true | Set true to close the scanner screen after a QR code/barcode is detected. |
timeoutPrompt.show | true | Set true to display a message when detection times out. |
timeoutPrompt.timeout | 5 | Set detection timeout period to 5 seconds. |
timeoutPrompt.prompt | Not detected | Set message for detection timeout. |
If the barcode is not detected, the following screen will be displayed due to the timeoutPrompt setting.
Return Value
The return value of the scan function is obtained using the callback function. Objects in the following format can be obtained.
{
"data":{
"text":"3068320128566",
"format":"EAN_13"
},
"cancelled":false
}
In this sample, the results obtained with the barcode scanner plug-in are stored in Localstrage (local storage).
addScan ({ state }, scan) {
// omission
localStorage.setItem('history', JSON.stringify(state.history))
}
Depending on the requirements of your application, you may need to change it accordingly, such as storing it in a database in the cloud.
Last modified 8mo ago