PhoneGap BarcodeScanner Plugin

PreviousAdvanced HTTP Plugin NextCordova Custom Config Plugin

Last updated 3 years ago

Was this helpful?

PhoneGap BarcodeScanner Plugin

Deprecated for Cordova 9.0 or higher.

To check third party Cordova plugins, you need to create a custom build debugger (Android version or iOS version).
When using it with the android custom build debugger for cordova 7.1, you need to build with the following settings in config.xml. <preference name="monaca:ANDROID_DEBUGGER_APPCOMPAT_VERSION" value="27.+" />
When combining with the MonacaBackend plugin provided in the Cordova 7.1, the following setting is required for "Install Parameters" on the plugin setting screen. ANDROID_SUPPORT_V4_VERSION=26.+

iOS Quirks

Since iOS 10 it's mandatory to provide usage description in the info.plist if trying to access privacy-sensitive data. When the system prompts the user to allow access, this usage description string will displayed as part of the permission dialog box, but if you didn't provide the usage description, the app will crash before showing the dialog. Also, Apple will reject apps that access private data but don't provide usage description.

This plugins requires the following usage descriptions:

NSCameraUsageDescription specifies the reason for your app to access the device's camera.

To add these entries into the info.plist, you can use the <edit-config> tag in the config.xml file like this:

<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
    <string>To scan barcodes</string>
</edit-config>

Enable Plugin in Monaca

From the IDE menu, go to Configure → Cordova Plugin Settings .
Under Available Plugins section, hover over the Phonegap BarcodeScanner plugin and click Enable button.

PhoneGap BarcodeScanner Demo

Here is a simple example demonstrating how to use the PhoneGap BarcodeScanner Plugin with Monaca:

<!DOCTYPE HTML>
<html>
<head>
  <title>PhoneGap BarcodeScanner Plugin DEMO</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">
  <script>
    function scanBarcode() {
      cordova.plugins.barcodeScanner.scan(
        function (result) {
          alert("We got a barcode\n" +
                "Result: " + result.text + "\n" +
                "Format: " + result.format + "\n" +
                "Cancelled: " + result.cancelled);
        },
        function (error) {
          alert("Scanning failed: " + error);
        },
        {
          preferFrontCamera : true, // iOS and Android
          showFlipCameraButton : true, // iOS and Android
          showTorchButton : true, // iOS and Android
          torchOn: true, // Android, launch with the torch switched on (if available)
          saveHistory: true, // Android, save scan history (default false)
          prompt : "Place a barcode inside the scan area", // Android
          resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
          formats : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
          orientation : "landscape", // Android only (portrait|landscape), default unset so it rotates with the device
          disableAnimations : true, // iOS
          disableSuccessBeep: false // iOS and Android
        }
      );
    }
  </script>
</head>
<body>
  <hr> BarcodeReader DEMO <hr><br>
  <input type="button" onClick ="scanBarcode()" value ="Scan" />
</body>
</html>

iOS Quirks

This plugins requires the following usage descriptions:

NSCameraUsageDescription specifies the reason for your app to access the device's camera.

To add these entries into the info.plist, you can use the <edit-config> tag in the config.xml file like this:

<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
    <string>To scan barcodes</string>
</edit-config>

Enable Plugin in Monaca

From the IDE menu, go to Configure → Cordova Plugin Settings .
Under Available Plugins section, hover over the Phonegap BarcodeScanner plugin and click Enable button.

PhoneGap BarcodeScanner Demo

Here is a simple example demonstrating how to use the PhoneGap BarcodeScanner Plugin with Monaca:

<!DOCTYPE HTML>
<html>
<head>
  <title>PhoneGap BarcodeScanner Plugin DEMO</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">
  <script>
    function scanBarcode() {
      cordova.plugins.barcodeScanner.scan(
        function (result) {
          alert("We got a barcode\n" +
                "Result: " + result.text + "\n" +
                "Format: " + result.format + "\n" +
                "Cancelled: " + result.cancelled);
        },
        function (error) {
          alert("Scanning failed: " + error);
        },
        {
          preferFrontCamera : true, // iOS and Android
          showFlipCameraButton : true, // iOS and Android
          showTorchButton : true, // iOS and Android
          torchOn: true, // Android, launch with the torch switched on (if available)
          saveHistory: true, // Android, save scan history (default false)
          prompt : "Place a barcode inside the scan area", // Android
          resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
          formats : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
          orientation : "landscape", // Android only (portrait|landscape), default unset so it rotates with the device
          disableAnimations : true, // iOS
          disableSuccessBeep: false // iOS and Android
        }
      );
    }
  </script>
</head>
<body>
  <hr> BarcodeReader DEMO <hr><br>
  <input type="button" onClick ="scanBarcode()" value ="Scan" />
</body>
</html>