Javascript based Barcode decoder in Salesforce1 – Very fast and Simple

Very fast and Simple Barcode decoder in Salesforce1 using quaggaJS javascript library

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

Related posts

21 thoughts on “Javascript based Barcode decoder in Salesforce1 – Very fast and Simple”

      1. 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

  1. 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?

  2. 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. 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.

  3. 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.

  4. 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. 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.

  5. 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. Hi Jitendra,

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

        Thanks,
        Geeta Garg

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

  6. 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

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

Leave a Reply

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