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 128, Code 39, Code 39 VIN, EAN, EAN-8, UPC, 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.

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.