Skip to Content

Barcode Scanner

This plugin enables the ability to scan and decode a barcode. It uses the open source BarcodeScanner plugin.

There are a lot of acronyms in this area. The following are some related topics, links and a few brief points on how they compare or relate to barcodes.

UPC or Universal Product Code is a standard way that one dimensional barcodes are encoded. It represents a 12 digit number. The site http://www.barcode-generator.org/ can be used to generate a sample UPC-A barcode.

QR or Quick Response code is a two dimension bar code. It can represent numbers and text such as a URL or a person’s contact information. The ZXing project provides a QR generator and decoder.

RFID or Radio-Frequency Identification is used to transfer data wireless for the purposes of identification. RFID tags can be used with barcodes. For example a pallet may be identified by an RFID tag but each item in the pallet may contain a barcode. Barcodes are less expensive than RFID tags. RFID tags can be read hundreds at a time whereas barcodes must be scanned one at a time. Barcodes can be sent via email such as movie ticket or flight ticket and read off of a screen of mobile device. A RFID chip does not require a line of sight to the reader. Each RFID chip has a unique identifier. Many passports include an RFID chip as do electronic toll transponders. An RFID tag can typically hold a few kilobytes of data.

NFC or Near Field Communication is a set of standards for two devices in close proximity to establish radio communication based on RFID. NFC can be used to bootstrap more capable wireless connections such as Bluetooth. It is also used for mobile payment such as PayPass. It enables two way communication. iOS does not support NFC. On Google Nexus devices the feature is called Android Beam. On Samsung devices it is known as S-Beam. NFC has a lower transfer rate, requires less power, and sets up more quickly than Bluetooth.

Bluetooth is a wireless technology for exchanging data over short distances similar to NFC.

iBeacon is an indoor positioning system used by Apple Inc. It uses Bluetooth Low Energy.

For additional details on the Barcode Scanner plugin see the file C:\SAP\MobileSDK3\KapselSDK\plugins\barcodescanner\www\barcodescanner.js or BarcodeScanner plugin or Using the Kapsel Barcode Scanner Plugin.

The following instructions will demonstrate the barcode scanner plugin.

  • Replace the contents of www\index.html with the following content.
    <html>
        <head>
            <title>Barcode Scanner Sample</title>
            <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
            <script>
                document.addEventListener("deviceready", init, false);
                
                var options = {
                    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)
                    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
                };
    
                function init() {
                }
            
                function scan() {
                    log("scanning");
                    cordova.plugins.barcodeScanner.scan(scanSuccessCallback, scanErrorCallback, options);
                }
    
                function scanSuccessCallback(result) {
                    log(result.text);
                    //log(JSON.stringify(result));
                }
    
                function scanErrorCallback(error) {
                    navigator.notification.alert("Scanning failed: " + JSON.stringify(error));
                }
            
                function encode() {
                    log("encoding");
                    var stringToEncode = "http://www.sap.com";
                    cordova.plugins.barcodeScanner.encode(cordova.plugins.barcodeScanner.Encode.TEXT_TYPE, stringToEncode, encodeSuccessCallback, encodeErrorCallback);
                }
    
                function encodeSuccessCallback(result) {
                    log(JSON.stringify(result));
                }
    
                function encodeErrorCallback(error) {
                    navigator.notification.alert("Encoding failed: " + JSON.stringify(error));
                }
                
                function log(line) {
                    var results = document.getElementById("scan_results");
                    results.innerHTML+= "<br>" + line;
                }
            </script>
        </head>
        <body>
            <h1>Barcode Scanner Sample</h1>
            <button onclick="scan()">Scan</button>
            <button onclick="encode()">Encode</button>
            <div id="scan_results"></div>
        </body>
    </html>
  • Add the dialogs plugin and either the Kapsel or open source barcode scanner.
    cordova plugin add cordova-plugin-dialogs
    
    cordova plugin add kapsel-plugin-barcodescanner --searchpath %KAPSEL_HOME%/plugins
    
    or
    
    cordova plugin add kapsel-plugin-barcodescanner --searchpath $KAPSEL_HOME/plugins
    
    or
    
    cordova plugin add phonegap-plugin-barcodescanner
    
  • Prepare, build and deploy the app.
    cordova run android
    or
    cordova run windows -- --archs=x64 
    or
    cordova run windows --device -- --archs=arm --phone
    or
    cordova run ios
    
  • If the scan fails on Windows, open the appxmanifest.xml file and ensure that the capability Webcam is checked. See also Windows 10 app crashes, when starting barcodescanner.
  • Find or create a barcode and then scan it.
    On iOS, you may need to set the character encoding to IOS-8859-1.

    Here is the result of calling encode on a URL.

It is also possible to use the SAPUI5 sap.ndc.BarCodeScannerButton. This is part of the sap.ndc package which has controls with native device capabilities.
Below is a simple example that makes use of this control and a few screenshots demonstrating how it looks.

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>Barcode Scanner App</title>

    <script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m, sap.ui.commons, sap.ndc"></script>
    <script type="text/javascript" src="cordova.js"></script>

    <script>

    var app1 = new sap.m.App("myApp", {
        initialPage: "page1"
    });

    var page1 = new sap.m.Page("page1", {
        title: "Barcode Scanner"
    });

    var buttonScan = new sap.ndc.BarcodeScannerButton({
        text: "Scan"
    });

    var buttonEncode = new sap.m.Button({
        text: "Encode"
    });
    
    var textOp = new sap.m.Text({
        text: "N/A"
    });

    var textOpResult = new sap.m.Text({
        text: "N/A"
    });

    var oLayout2 = new sap.ui.layout.VerticalLayout("Layout2", {
        content: [
            buttonScan,
            buttonEncode,
            textOp,
            textOpResult
        ]
    });

    page1.addContent(oLayout2);

    app1.addPage(page1);

    app1.placeAt("content"); // place the App into the HTML document

    document.addEventListener(
        "deviceready",
        function() {
           log("Device Ready", "All plugins are now ready to be called");
        },
        false
    );
    
    function scanSuccessCallback(result) {
        log("Scan Succeeded", result.mParameters.text);
    }

    function scanFailCallback(error) {
        navigator.notification.alert("Scanning failed: " + JSON.stringify(error));
    }
    
    function encode() {
        var stringToEncode = "http://www.sap.com";
        log("encoding", stringToEncode);
        if (device.platform == "Android") {  //Not supported on iOS
            cordova.plugins.barcodeScanner.encode(cordova.plugins.barcodeScanner.Encode.TEXT_TYPE, stringToEncode, encodeSuccessCallback, encodeErrorCallback);
        }
        else {
            log("Encoding is not supported on iOS.  See https://github.com/wildabeast/BarcodeScanner/issues/106");
        }
    }

    function encodeSuccessCallback(result) {
        log(result.text);
    }

    function encodeErrorCallback(error) {
        navigator.notification.alert("Encoding failed: " + JSON.stringify(error));
    }
    
    function log(operation, result) {
        textOp.setText(operation);
        textOpResult.setText(result);
    }
    
    buttonScan.attachScanSuccess(scanSuccessCallback);
    buttonScan.attachScanFail(scanFailCallback);

    buttonEncode.attachPress(encode);
    
    </script>
</head>

<body class="sapUiBody">
    <div id="content"></div>
</body>

</html>




Note if the Barcode scanner is unable to successfully complete the scan, the following dialog appears to enable manual entry.

Another example is available at BarCodeScannerButton.

If you are not using the device’s camera but a specialized laser barcode scanner, the following video may be of interest showing how to integrate with a Zebra barcode scanner. Zebra DEV { TALK } Want to Integrate DataWedge or Printing into Your Cordova Application

Back to Getting Started With Kapsel

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Nikki Cordova

    Can you give me the steps before I add plugins?

     

    I am getting an error of “Error: Current working directory is not a Cordova-based project.”

     

    Also I have added file in the www folder > index.html

    (0) 
        1. Daniel Van Leeuwen Post author

          A typical hybrid app would contain the JavaScript and HTML that makes up your SAPUI5 application, the plugins you wish to use such as the barcode scanner plugin and would be installed on a device as a regular native app.  Another approach is the technique used in the Fiori Client where the app contains the plugins but the HTML that makes up the app is loaded from a web server or front end server.  See also https://blogs.sap.com/2016/11/10/sap-fiori-client-sp13/

          Hope that helps,

          Dan van Leeuwen

           

          (0) 

Leave a Reply