PhoneGap Bar Code Scanner Example

phonegap-bar-code-scanner-with-example
phonegap-bar-code-scanner-with-example
phonegap-bar-code-scanner-with-example

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

What is 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:

create a new project (or) Choose existing project

cordova create BarCodeScanner com.phonegappro.barcodescanner BarCodeScanner

Change your Directory

cd BarCodeScanner

Add your platform (Android, iOS)

cordova platform add android

Add your plugin https://github.com/phonegap/phonegap-plugin-barcodescanner

cordova plugin add phonegap-plugin-barcodescanner

Syntax

cordova.plugins.barcodeScanner.scan(successCallBack, errorCallback, options);

Options are,

      {
          "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" // Android only (portrait|landscape), default unset so it rotates with the device
      }

 

Full Source code (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>BarCode Scanner - PhoneGapPro.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>
</html>

 

 

  • Roy

    Somehow, nothing happens if I press the “SCAN” button. Are you sure that the index.html is right? I’m using it with PhoneGap 6.2.7 on a Android 6.0

  • Roy

    Hello again, it’s a strange behavior… if i compile the app and install the apk on the device, everything works properly. Android asks me if i would allow my app to capture some pictures. And somehow this isn’t the case when I’m using the PhoneGap Mobile App. Any ideas? If set all the permissions manually for the PhoneGap App.

    • Unfortunately NO!
      That’s the feature of latest Android devices for user’s privacy

  • Anuj

    Hello @sundara_vel:disqus

    After following your steps for creating barcode scanner app . I am getting error in eclipse. I am attaching image of error that I get in eclipse. please help me in fixing this issue , I am really stuck in this issue

    Thanks
    Anuj