How to Create a Online Barcode Scanner Application in JavaScript

Integrate barcode scanning to your web application in JavaScript

Barcodes are everywhere today. They are particularly popular with retail stores, for warehouse inventory applications, and more. Essentially, barcodes are important for applications where easily sharing information via computers or mobile devices is important.

As the hunger for more online information sharing and saving grows so too does the need to process barcode information from a web application. But how can you integrate barcode reading technology with web technologies?

If you have tried integrating a barcode with a web application before, you will know how time-consuming the task can be. However, with the help of Dynamsoft Barcode Reader JavaScript SDK, you can make it happen in just a few minutes.

Get 30-day free trial
(with the sample code included)

In this tutorial, I will show you step by step how to build a simple online barcode reading application. You need a basic understanding of HTML and JavaScript. We’ll concentrate on the barcode functionality in this tutorial. Even if you are a novice to web programming, you will find this tutorial easy to follow. So just take it easy and have some fun.

How to Create a JavaScript Barcode Scanner Application

  1. Start a Web Application
    Create an empty HTML page named readbarcode.html
  2. Copy the DBRResources folder to your project
    You can find DBRResources under the installation folder of Dynamsoft Barcode Reader JavaScript SDK.
  3. Add the barcode reader JavaScript SDK to the HTML page
    Include the two Dynamsoft’s JS files in the <head> tag.

    <script type="text/javascript" src="DBRResources/dynamsoft.barcodereader.config.js"> </script>
    <script type="text/javascript" src="DBRResources/dynamsoft.barcodereader.initiate.js"> </script>
  4. Read barcodes in JS.

    First, let’s init dbrObject.

    <script type="text/javascript"> 
        var dbrObject;
        function onDBRInitSuccess() {
            dbrObject = new dynamsoft.dbrEnv.BarcodeReader();
        }
    
        function onDBRInitFailure(errorCode, errorString) {
            alert('Init failed: ' + errorString);
        }
    
        dynamsoft.dbrEnv.init(onDBRInitSuccess, onDBRInitFailure);
    </script>

    Here we use the readBase64 method to demonstrate how to read barcode from base64 string. You can also decode barcode from an image URL or a blob image.

    <img id="barcode" src="data:image/gif;base64,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" />
    <br/>
    <input type="button" value="Read Barcode" onclick="ReadBarcode();" />
    <script type="text/javascript"> 
        function ReadBarcode(){
            if (!dbrObject) return;
    
            var base64img = document.getElementById("barcode").src.split(',')[1];
    
            var result = dbrObject.readBase64(base64img);
            if(result.getCount() > 0) {            
                var strMsg = "Barcode Type: " + result.get(0).formatString + "\n";
                strMsg += "Barcode Value: " + result.get(0).text;
                alert(strMsg);
            } else {
                alert("No barcode(s) found.");
            }
        }
    </script>

Okay, we are all set. You can open readbarcode.html in a browser and start barcode reading.

Read Barcodes from Scanned Documents or Webcam Capture

You can also scan an image from document scanner or capture an image from webcam and then read barcodes. You can use our Dynamic Web TWAIN (since v13.0) and Dynamsoft Camera SDK for image acquisition.

I hope you enjoyed following along. Please contact us if you have any questions regarding barcode processing.

Visit code gallery >

Get 30-day free trial >

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com