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.3.0

• Framework7: 6.3.16

As of September 8, 2022, a custom build debugger (Android or iOS version) must be created to use this plugin.

Demo

Import the demo to your Monaca account

Usage

• 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.

API references

This section describes some of the main functions used in the Demo. For complete API references, please refer to the API references.

Camera Access Permissions

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.

For iOS

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.

For Android

Set the Target SDK Version to 31 or higher in the App Settings for Android of the Monaca Cloud IDE.

monaca.BarcodeScanner.scan()

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
}

Save the results

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.