Barcode scanner component in Salesforce lightning – Video

This post is rewritten of previous post for decoding Barcode using JavaScript in Salesforce1 mobile application. Assuming you already have static resource of javascript library  QuaggaJS (we need only js file from dist folder).

This code was written live on my streaming channel on 10-Jul-2015, You can find recording here.

I have not added capability for image preview like I did in previous did, but it can be easily done by referring this blog post from Peter Knolle.

BarcodeApp.app

<aura:application >
    <ltng:require scripts="/resource/Quaggajs" />
    <c:BarcodeScanner />
</aura:application>

BarcodeScanner.cmp

<aura:component >
    <aura:attribute name="codeOutput" type="String" />

    <input type="file" accept="image/*;capture=camera" aura:id="file" />
    <ui:button label="Scan" press="{!c.scan}"/>
    <br />
    Output : <ui:outputText value="{!v.codeOutput}" />

</aura:component>

BarcodeScannerController.js

({
	scan : function(component, event, helper) { 

        var fileInput = component.find("file").getElement();
        var file = fileInput.files[0] ; 

        var App = {
            init: function() {
                App.attachListeners();
            } ,
            attachListeners: function() {
                 if(file)
                 {
                     var imgURL = URL.createObjectURL(file);
					 App.decode(imgURL);
                 }else{
                     component.set("v.codeOutput","Error !!! Select file to scan") ;
                 }
            },
            decode: function(src) {
                Quagga.decodeSingle(
                    {
                      inputStream: {
                        size: 640,
                        singleChannel: false
                      },
                      locator: {
                        patchSize: "large",
                        halfSample: false
                      },
                      decoder: {
                        readers: ["upc_reader", "code_128_reader", "code_39_reader", "code_39_vin_reader", "ean_8_reader", "ean_reader", "upc_e_reader", "codabar_reader"]
                    },
                      locate: true,
                      src: src
                    },
                 function(result){
                      if(result && result.codeResult && result.codeResult.code)
                      {
                        component.set("v.codeOutput",result.codeResult.code) ;
                      }else{
                        component.set("v.codeOutput","Error !!! Unable to read Barcode") ;
                      }
                    });
            }
        };
        App.init();

	}
})