PhoneGap Plugin BarcodeScanner, now with ACTUAL browser support

================================

Cross-platform BarcodeScanner for Cordova / PhoneGap.

Follows the Cordova Plugin spec, so that it works with Plugman.

UPDATE: THIS IS THE FIRST WORKING VERSION OF THE BROWSER SUPPORT. PLEASE SEE Browser usage FOR MORE DETAILS.

It only supports QR, ITF, and Code128 and only detects a barcode when you fill the entire width of the screen with the barcode. But it works, and it's better than nothing. Please note any issues or improvements you find on github!

Installation

This requires phonegap 7.1.0+ ( current stable v8.0.0 )

phonegap plugin add cordova-plugin-barcodescanner-browser-support

It is also possible to install via repo url directly ( unstable )

phonegap plugin add https://github.com/Tjieco/phonegap-plugin-barcodescanner-browser-support

Optional variables: This plugin requires the Android support library v4. The minimum version is 24.1.0. Default value is 27.+. Check out the latest version here.

phonegap plugin add cordova-plugin-barcodescanner-browser-support --variable ANDROID_SUPPORT_V4_VERSION="27.1.1"

Supported Platforms

• Android
• iOS
• Windows (Windows/Windows Phone 8.1 and Windows 10)
• Browser

Note: the Android source for this project includes an Android Library Project. plugman currently doesn't support Library Project refs, so its been prebuilt as a jar library. Any updates to the Library Project should be committed with an updated jar.

Note: Windows 10 applications can not be build for AnyCPU architecture, which is default for Windows platform. If you want to build/run Windows 10 app, you should specify target architecture explicitly, for example (Cordova CLI):

cordova run windows -- --archs=x86

PhoneGap Build Usage

Add the following to your config.xml:

<!-- add a version here, otherwise PGB will use whatever the latest version of the package on npm is -->
<plugin name="phonegap-plugin-barcodescanner" />

On PhoneGap Build if you're using a version of cordova-android of 4 or less, ensure you're building with gradle:

<preference name="android-build-tool" value="gradle" />

Using the plugin

The plugin creates the object cordova.plugins.barcodeScanner with the method scan(success, fail).

The following barcode types are currently supported:

| Barcode Type | Android | iOS | Windows | Browser | |---------------|:-------:|:---:|:--------:|:-------:| | QR_CODE | ✔ | ✔ | ✔ | ✔ | | DATA_MATRIX | ✔ | ✔ | ✔ | ✖ | | UPC_A | ✔ | ✔ | ✔ | ✖ | | UPC_E | ✔ | ✔ | ✔ | ✖ | | EAN_8 | ✔ | ✔ | ✔ | ✖ | | EAN_13 | ✔ | ✔ | ✔ | ✖ | | CODE_39 | ✔ | ✔ | ✔ | ✖ | | CODE_93 | ✔ | ✖ | ✔ | ✖ | | CODE_128 | ✔ | ✔ | ✔ | ✔ | | CODABAR | ✔ | ✖ | ✔ | ✖ | | ITF | ✔ | ✔ | ✔ | ✔ | | RSS14 | ✔ | ✖ | ✔ | ✖ | | PDF417 | ✔ | ✖ | ✔ | ✖ | | RSS_EXPANDED | ✔ | ✖ | ✖ | ✖ | | MSI | ✖ | ✖ | ✔ | ✖ | | AZTEC | ✖ | ✖ | ✔ | ✖ |

More browser barcode support will be added with future updates of available ports.

success and fail are callback functions. Success is passed an object with data, type and cancelled properties. Data is the text representation of the barcode data, type is the type of barcode detected and cancelled is whether or not the user cancelled the scan.

A full example could be:

   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
      }
   );

Browser usage

This fork uses the browser functionalities to open the user media, allowing the camera to be used. The javascript code to decode a barcode comes from: https://github.com/zxing-js/library

The "scan" functionality to enter the barcode manually still works. This ensures that existing applications do not break with the addition of this feature. However, you can add a video element to your page. The plugin will look for a HTML element with the id "barcodeScanStream". If the plugin detects the element, it will open the user media and place the camera stream inside the video element.

The default camera will be the back camera. This can be changed using an html element with the id "barcodeScanDevice". Defaultly taking the back camera, or the remaining camera if that does not exist.

An example could be:

        <div class="video">
            <video id="barcodeScanStream"></video>
        </div>

        <div class="inputControls">
            <div id="deviceready">
                <button onclick="scan()" id="scanButton">Scan barcode</button>
                <!-- 0 is the front camera, 1 is the back camera -->
                <input type="text" id="barcodeScanDevice" placeholder="1">
            </div>
        </div>

Encoding a Barcode

The plugin creates the object cordova.plugins.barcodeScanner with the method encode(type, data, success, fail).

Supported encoding types:

• TEXT_TYPE
• EMAIL_TYPE
• PHONE_TYPE
• SMS_TYPE

A full example could be:

   cordova.plugins.barcodeScanner.encode(cordova.plugins.barcodeScanner.Encode.TEXT_TYPE, "http://www.nytimes.com", function(success) {
            alert("encode success: " + success);
          }, function(fail) {
            alert("encoding failed: " + fail);
          }
        );

Browser quirks

Currently, a barcode only gets detected when it takes up almost the entire horizontal space. There's also an issue where the camera does not focus properly. It takes a while for it to adjust. Since node modules with cordova browser works differently than cordova plugins, I could not manage to create a node dependency. The code to scan a barcode is thus minified and copied into the plugin. Unfortunately, I could not forsee a better solution.

iOS quirks

Since iOS 10 it's mandatory to add a NSCameraUsageDescription in the Info.plist.

NSCameraUsageDescription describes the reason that the app accesses the user's camera. When the system prompts the user to allow access, this string is displayed as part of the dialog box. 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 an usage description.

To add this entry you can use the edit-config tag in the config.xml like this:

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

Windows quirks

• Windows implementation currently doesn't support encode functionality.

• On Windows 10 desktop ensure that you have Windows Media Player and Media Feature pack installed.

Thanks on Github

So many -- check out the original iOS, Android and BlackBerry 10 repos.

Licence

The MIT License

Copyright (c) 2010 Matt Kane

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.