Javascript based Barcode decoder in Salesforce1 – Very fast and Simple

Recently there was a need for Barcode decoder  component in Salesforce1 using Javascript. I tried few libraries like JOB (Javascript Only Barcodereader), this post from Bob Buzzard (it uses JOB library) and QuaggaJS. And after comparing all these, decided to go with quaggajs library because of its speed. Bob Buzzard already wrote very good article on JOB library and I would suggest to try that code as well. You can find same code rewritten for lightning component here.

Quaggajs supports Code 128Code 39, Code 39 VIN, EAN, EAN-8UPC, UPC-E and Codabar format of Barcode.

To run this code you will need 3 static resources in your visualforce page :

  1. JQuery
  2. Bootstrap (totally optional and can be safely ignored) and
  3. QuaggaJs

If you want, below images can be used to try this code. Also, please note – If you are using mobile camera to capture barcode, make sure image is white else this library will not work.

Barcode decoder sample in Salesforce 1
Barcode decoder sample in Salesforce 1
Barcode decoder sample in Salesforce 1
Barcode decoder sample in Salesforce 1

Create a Visualforce page with below code, To keep code very simple, I am only displaying extracted code from Barcode on Visualforce page.

<apex:page showheader="false" sidebar="false" standardStylesheets="false" >
    <apex:includeScript value="{!$Resource.JQuery}"/>
    <apex:includeScript value="{!$Resource.Barcode_quaggaJS}"/>
    <apex:stylesheet value="{!URLFOR($Resource.BootStrap3, 'bootstrap-3.1.1-dist/css/bootstrap.min.css')}"/>

    <div class="container">
         <img width="320" height="240" src="" id="picturePreview" style="border:1px solid black" /> <br />
        <input id="barcodeFileInput" type="file" accept="image/*;capture=camera" /> <br />
        <button id="startDecode" class="btn btn-primary">Decode</button>
        <div id="codeResult"> </div>
    </div>

<script type="text/javascript">
    $(function() {
        var App = {
            init: function() {
                App.attachListeners();
            } ,
            debugApp : function(msg){
                    if(true)
                    {
                     debugCon = $("#codeResult");
                     debugCon.text(debugCon.text()+" , "+msg) ;
                    }
                },
            attachListeners: function() {
                var self = this; 

                $("#startDecode").on("click", function(e) {
                    var input = $("#barcodeFileInput");
                    if (input[0].files && input[0].files.length) {
                        var tmpImgURL = URL.createObjectURL(input[0].files[0]) ;
                        App.decode(tmpImgURL);
                    }
                }); 

                $("#barcodeFileInput").on("change",function(e){
                    $("#codeResult").text(" ");
                    var files = e.target.files ;
                        if (files && files.length > 0) {
                            file = files[0];
                            try {
                                var URL = window.URL || window.webkitURL;
                                var imgURL = URL.createObjectURL(file);
                                $("#picturePreview").attr("src",imgURL);
                            }
                            catch (e) {
                                try {
                                    var fileReader = new FileReader();
                                    fileReader.onload = function (event) {
                                     $("#picturePreview").attr("src",event.target.result);
                                    };
                                    fileReader.readAsDataURL(file);
                                }
                                catch (e) {
                                    $("#codeResult").text("Fail !!! createObjectURL and FileReader are not supported by browser");
                                }
                            }
                        }
                });

            },
            detachListeners: function() {
                $("#startDecode").off("click");
            },

            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)
                      {
                        $("#codeResult").text('Code - '+result.codeResult.code);
                      }else{
                        $("#codeResult").text("unable to read");
                      }
                    });
            }
        };
        App.init();
    });
</script>

</apex:page>

Make sure this visualforce is marked to use in Salesforce1 mobile application. After this, Create a Visualforce tab and in Mobile Navigation, enable it for Salesforce 1.

 

Barcode decoder in Salesforce 1 mobile
Barcode decoder in Salesforce 1 mobile
Barcode decoder in Salesforce 1 mobile Output
Barcode decoder in Salesforce 1 mobile Output

Posted

in

by

Comments

28 responses to “Javascript based Barcode decoder in Salesforce1 – Very fast and Simple”

  1. Priyanka Singh Avatar
    Priyanka Singh

    Hi sir this is nt working..plz tell me what to do..

    1. Jitendra Zaa Avatar

      Whats error you are getting ? How you are performing testing

      1. sk Avatar
        sk

        hello,

        I am getting the following error:

        1) Uncaught SyntaxError: Invalid or unexpected token
        2) TestBarcodeReader:71 Uncaught ReferenceError: Quagga is not defined
        at Object.decode (TestBarcodeReader:71)
        at HTMLButtonElement. (TestBarcodeReader:36)
        at HTMLButtonElement.dispatch (JQuery:3)
        at HTMLButtonElement.q.handle (JQuery:3)
        decode @ TestBarcodeReader:71
        (anonymous) @ TestBarcodeReader:36
        dispatch @ JQuery:3
        q.handle @ JQuery:3

  2. PoP SR Avatar
    PoP SR

    I Need Format EAN-13 decode thax

  3. Sid Avatar
    Sid

    QuaggaJS size is more than 10 MB due to which I am unable to upload it as a static resource on my developer org. Is there any alternate way to do this?

    1. Jitendra Zaa Avatar

      You only need js file from QuaggaJS, ignore remaining files.

  4. Purnima Avatar
    Purnima

    I dont receive any js errors. But am not able to decode any of the images shared here. Receiving “unable to read” message. Can you tell me what the issue can be ?

    1. Jitendra Zaa Avatar

      What is format of barcode you are trying to read ? this example only supports – “upc_reader”, “code_128_reader”, “code_39_reader”, “code_39_vin_reader”, “ean_8_reader”, “ean_reader”, “upc_e_reader”, “codabar_reader” formats.

  5. Rama Narasimha Swamy Pragallap Avatar
    Rama Narasimha Swamy Pragallap

    Hey..Its very great article.

    I just wanted to know what kind of Jquery file which i need to use. Will you update the link which is related to Jquery.

  6. Amol Avatar
    Amol

    Hi Jitendra,

    your articles is very great..!.

    My question is; For barcode scanning i’ve to use barcode reader machine and not mobile or tablet.
    Read the barcode and make entry in custom object (Like a Mall)

    My thinking is we can create a VF page for custom object and read the barcode and add data in the field and save the record.
    But the question is how VF page can access data from barcode Machine.

    1. Jitendra Zaa Avatar

      Hi Amol, You will need to access Salesforce webservice to store barcode from machine to Salesforce custom object. Barcode machine should have ability to invoke webservices.

  7. 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.
    Sanjeev Shukla
    sanjeev.shukla@kvpcorp.com

    1. Jitendra Zaa Avatar

      You would need to add Quagga Javascript library in your visualforce page. You can download it from here – http://serratus.github.io/quaggaJS/

      1. Geeta Garg Avatar
        Geeta Garg

        Hi Jitendra,

        Can you provide the Link of the javacript which we need to add on Visualforce page?

        Thanks,
        Geeta Garg

  8. Vu Avatar
    Vu

    Does this still work? When I press decode nothing happens.

    1. Avinash Avatar
      Avinash

      Exactly…Nothing happened.

      1. Jur Avatar
        Jur

        Same here, anyone got a solution?

    2. sk Avatar
      sk

      Yes same here. decode button didn’t work. it refreshes the page everytime i clicked on decode. Did you get any luck later?

  9. Alfin Arafat Avatar
    Alfin Arafat

    Hi Jitendra, this is great simple code. But i have same issues with people here “unable to read”.
    I believed my JQuery & QuaggaJS are working well. I use jquery-1.9.0.min.js & latest version of quagga
    Any solution here? Thanks

  10. Rehana Avatar
    Rehana

    Hi Jitendra,
    I have followed your steps,but i am unable to decode.When i’m trying to press decode button i didn’t get any message.Its simply showing blank.

  11. Begital Avatar

    I could make it work after a few changes:

    1. Upload as static resource only the jquery-3.3.1.min.js and quagga.min.js scripts (my first attemt had a ton of directories in quagga zip file).

    2. I was referencing them in VF page like this:

    1. Sindhu Velmurugan Avatar
      Sindhu Velmurugan

      Hi Begital
      Decode is not working and I don’t know what are the js file to upload in Static Resource.

    2. Sindhu Velmurugan Avatar
      Sindhu Velmurugan

      Decode is not working and I don’t know what are the js files to upload in Static Resource

    3. mehboob rehman Avatar
      mehboob rehman

      can you please provide the quagga.min.js file which i need to upload ,and can you please say how did you reference that in vf page.

  12. Bala Avatar
    Bala

    Guys

    Did anyone did hit a error below, i tried uploading it as a static resource as a zip and also as the individual JS file. It doesnt work.

    Uncaught ReferenceError: Quagga is not defined
    at Object.decode (Scanner:74)
    at HTMLButtonElement. (Scanner:37)
    at HTMLButtonElement.dispatch (JQuery:2)
    at HTMLButtonElement.y.handle (JQuery:2)

    Did anyone hit the same issue and was able to make it work

    Thanks in advance

  13. Peter Avatar

    Hello,

    thanks for this. How can i process this with APEX?

    thanks
    Peter

  14. Sarthak Bajaj Avatar
    Sarthak Bajaj

    Unable to upload 17 MB Quaggajs file in static resource

Leave a 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.