PhoneGap QRCode Scanner Example

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 http://github.com/phonegap/phonegap-plugin-barcodescanner for reading barcode

create a new project

<span class="hljs-symbol">cordova</span> create <span class="hljs-keyword">BarCodeScanner </span>com.codesundar.<span class="hljs-keyword">barcodescanner </span><span class="hljs-keyword">BarCodeScanner
</span><span class="hljs-symbol">cd</span> <span class="hljs-keyword">BarCodeScanner
</span><span class="hljs-symbol">cordova</span> platform <span class="hljs-keyword">add </span><span class="hljs-keyword">android
</span><span class="hljs-symbol">cordova</span> plugin <span class="hljs-keyword">add </span>phonegap-plugin-<span class="hljs-keyword">barcodescanner</span>

Syntax

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

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

Full Source code (index.html)

<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>/></span>
    <span class="hljs-tag"><<span class="hljs-name">title</span>></span>BarCode Scanner - CodeSundar.com<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"cordova.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="javascript">
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">scan</span>()</span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"clicked"</span>);
    cordova.plugins.barcodeScanner.scan(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">result</span>)</span>{
    <span class="hljs-comment">//success callback</span>
    alert(<span class="hljs-built_in">JSON</span>.stringify(result));

    },<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>)</span>{
    <span class="hljs-comment">//error callback</span>
    alert(<span class="hljs-built_in">JSON</span>.stringify(error));

    });
    }
    </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>BAR CODE SCANNER<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"scan()"</span>></span>SCAN<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>