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

  • Nice!

  • Priyanka Singh

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

    • Whats error you are getting ? How you are performing testing

  • PoP SR

    I Need Format EAN-13 decode thax

  • 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?

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

  • 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 ?

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

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