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.

Barcode Scanner Lightning App
Barcode Scanner Lightning App

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();

	}
})

Posted

in

by

Comments

11 responses to “Barcode scanner component in Salesforce lightning – Video”

  1. Rakesh Boinepalli Avatar
    Rakesh Boinepalli

    Hi Jitendra, Thanks for excellent article. I’m using IOS which seems to be working ok using camera, but it it taking too long to scan the code. Do you have any recommendations to make this process faster?.

  2. Sanjeev Kumar Shukla Avatar
    Sanjeev Kumar Shukla

    Hi Jitendra,

    I got two error. ”
    1. Uncaught ReferenceError: Quagga is not defined”.
    2. Barcode_quaggaJS:1 Uncaught SyntaxError: Unexpected token !

    Please help me, how to resolve it.

    Thank you.

    1. Jitendra Zaa Avatar

      Please make sure this library is added and accessible in code – http://serratus.github.io/quaggaJS/

    2. Ricky Avatar
      Ricky

      Hi Sanjeev,
      Were you able to resolve this issue? I’m currently running into a similar error that says “ReferenceError: Quagga is not defined”

  3. sunnydalelow Avatar
    sunnydalelow

    Hi Jitendra,

    Thanks for this example! I have your previous version of the code (using VF instead of LightningComponents) but I can’t get the Lightning version to work. I have added the Quagga js file and it’s working fine with my VF page, but I get the following error when trying to scan:

    This page has an error. You might just need to refresh it.
    Action failed: c$BarcodeScanner$controller$scan [Failed to construct ‘Image’: Please use the ‘new’ operator, this DOM object constructor cannot be called as a function.]
    Failing descriptor: {c$BarcodeScanner$controller$scan}

    1. Zachary Price Avatar
      Zachary Price

      I am also getting this error. Any ideas?

    2. Steffi Narang Avatar
      Steffi Narang

      hey i was not able to upload “Quaggajs” file in static resource . Can you please tell me how you uploaded

  4. Prabhu Avatar
    Prabhu

    Hi Ji!

    I am getting CSP error for Quaggajs. Pls post me n how to fix it.

  5. ruban Avatar
    ruban

    This code will work with laptop camara?

  6. ypineiro Avatar
    ypineiro

    I had been train this code didn’t work, I try the other version for vf page and some time work and the other say unable to read for the same bar code???
    Jitendra do you have any updated version ?
    Regards

  7. Thejaswi Avatar
    Thejaswi

    Hi,

    I am not able to upload the zip file to static resource as the file size is more than 10 mb.
    Can you suggest?

    Thanks

Leave a Reply to sunnydalelow Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.