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:
Let’s create 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" // Android only (portrait|landscape), default unset so it rotates with the device
}To read a barcode, we use scan() function, which has success callback & error callback with options.
Full Source code (index.html)
<!DOCTYPE html>
<html lang="en">
<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>
</html>
