Learn App Making
with Ionic, Cordova & Flutter.

Start Here Buy Themes

PhoneGap QRCode Scanner Example

by

This article is about Apache Cordova / PhoneGap Bar Code Scanner / QR Code Scanner with Example.

What is a barcode ?

a machine-readable code in the form of numbers and a pattern of parallel lines of varying widths, printed on a commodity and used especially for stock control.

Steps to implement barcode scanner

Let’s create a new project & Add required platforms & plugins.here we’re going to add https://github.com/phonegap/phonegap-plugin-barcodescanner for reading barcode

create a new project

cordova create BarCodeScanner com.codesundar.barcodescanner BarCodeScanner
cd BarCodeScanner
cordova platform add android
cordova plugin add phonegap-plugin-barcodescanner

Syntax

cordova.plugins.barcodeScanner.scan(successCallBack, errorCallback, options);
var options = {
"preferFrontCamera" : true, // iOS and Android
"showFlipCameraButton" : true, // iOS and Android
"prompt" : "Place a barcode inside the scan area", // supported on Android only
"formats" : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
"orientation" : "landscape"
}

To read a barcode, we use scan() function, which has success callback & error callback with options.

Full Source code (index.html)


<head>
    <meta charset="UTF-8"/>
    <title>BarCode Scanner - CodeSundar.com</title>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript">
    function scan(){
    console.log("clicked");
    cordova.plugins.barcodeScanner.scan(function(result){
    //success callback
    alert(JSON.stringify(result));

    },function(error){
    //error callback
    alert(JSON.stringify(error));

    });
    }
    </script>
</head>
<body>
    <h3>BAR CODE SCANNER</h3>
    <button onclick="scan()">SCAN</button>
</body>