Dynamsoft JavaScript Barcode SDK for Node.js and Web

• Download associated files - 1.6 KB

Dynamsoft Barcode Reader JavaScript Edition is a JavaScript library for barcode scanning built on WebAssembly technology. It supports real-time localization and decoding of various types of barcodes. The library provides rich APIs including reading barcodes from static images and scanning barcodes from a live video stream. It also features the capability of scanning multiple barcodes at once. The JavaScript barcode SDK is 100% compatible with Node.js and web, which means it is suitable for both backend and frontend development.

In this article, we show you how to integrate barcode scanning functionality into your application. Specifically, we look at two JavaScript-supported environments: Node.js and Web.

To get started, you need to download Dynamsoft JavaScript Barcode SDK. You can also download the source code we mentioned in this article below.

Upon downloading our SDK, you can follow along the article as we show you the step-by-step process of building your own barcode scanning application.

Dynamsoft JavaScript Barcode SDK Overview

License

Get a FREE 30-Day Trial License. The trial license comes pre-populated in the sample code. Open any samples in a text editor and the trial license string is contained in the following line of code

BarcodeReader.licenseKey = "LICENSE-KEY"

Environment

OS	Browser	Version
Windows, Linux, MacOS, Android, iOS	Chrome	v57+
	Firefox	v52+
	Edge	v16+
	Safari*	v11+
	Internet Explorer	not supported

Supported Barcode Symbologies

Linear Barcodes (1D): Code 39, Code 93, Code 128, Codabar, Interleaved 2 of 5, EAN-8, EAN-13, UPC-A, UPC-E, Industrial 2 of 5.

2D Barcodes: QR Code, DataMatrix, PDF417 and Aztec Code.

Online Demo

https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html

Sample Code

https://github.com/DYNAMSOFT-DBR/JAVASCRIPT-BARCODE

API Documentation

https://www.dynamsoft.com/help/Barcode-Reader-wasm/index.html

How to Use the JavaScript Barcode SDK for Node.js Development

Step 1: Use npm command to install the module:

> npm i dynamsoft-javascript-barcode

Step 2: Create a new app.js file and copy the following code.

Step 3: Require the module:

var BarcodeReader = require('dynamsoft-javascript-barcode');

Step 4: Set a valid license key:

BarcodeReader.licenseKey = 'LICENSE-KEY';

Step 5: Instantiate the barcode reader object:

BarcodeReader.createInstance().then(reader => {
});

The createInstance() function will automatically load the relevant wasm file and return an instantiated barcode reader. If you want to manually control the loading step, change the code as follows:

BarcodeReader.loadWasm().then(() => {
var reader = new BarcodeReader('');
});

Step 6: Read barcodes from a sample image:

reader.decode('sample.png').then(results => {
for(var i = 0; i < results.length; ++i){
console.log(results[i].BarcodeText);
}
reader.deleteInstance();
});

The JavaScript barcode SDK provides a .d.ts file for IntelliSense in Visual Studio Code.

Step 7: Run the app in command line tools:

node app.js

How to Use the JavaScript Barcode SDK for Web Development

Step 1: Create an index.html file.

Step 2: Load Dynamsoft JavaScript Barcode Reader SDK:

<script src="https://demo.dynamsoft.com/dbr_wasm/js/dbr-6.5.1.min.js"></script>

Step 3: Set a valid license key:

BarcodeReader.licenseKey = 'LICENSE-KEY';

Step 4: Create and initialize a barcode reader object

let scanner = new BarcodeReader.Scanner({
onFrameRead: results => {console.log(results);},
onNewCodeRead: (txt, result) => {alert(txt);}
});

Step 5: Make the barcode reader object work:

scanner.open();

The BarcodeReader.Scanner, created by JS code at runtime, is a view container that includes:

• <p> element for showing the SDK loading status
• <video> element for playing camera live stream
• <select> element for toggling cameras
• <select> element for setting video resolutions and a button for closing the window

Connect a USB webcam to your PC. Double-click index.html to run the web barcode scanner in Chrome.

How to Deploy Dynamsoft JavaScript Barcode SDK to Your Web Server

Step 1: Extract DBR-JS-6.5.1.zip to a folder.

Step 2: Copy the index.html file mentioned above to the root directory

Step 3: Change the script path to:

<script src="dist/dbr-6.5.1.min.js"></script>

Step 4 (a): Now, if you double-click to open the index.html file, you will see the error message

To fix this issue, a web server is needed. We can quickly set up a web server by installing Web Server for Chrome. In Chrome’s navigation bar, type in chrome://apps to run the Web Server app. We also need to choose a folder.

Step 4 (b): To deploy the file to IIS, Apache or Nginx, you must declare the MIMEType in web configuration files. For our example, we will use IIS.

NOTE: If you only set the project physical path to IIS, you will fail to fetch the wasm file.

The workaround is to create a web.config file under the same or the parent directory of wasm.

<?xml version="1.0" encoding="UTF-8"?>
    <configuration>
        <system.webServer>
            <staticContent>
                <mimeMap fileExtension=".wasm" mimeType="application/wasm" />
            </staticContent>
        </system.webServer>
    </configuration>

How to Use Low-level APIs

In addition to the barcode scanner container, Dynamsoft JavaScript Barcode SDK also provides some low-level APIs for decoding barcodes, such as decode(), decodeBase64String(), decodeBuffer(), and decodeVideo(). Let’s see how to use decode() to read barcodes from a disk file.

Step 1: Create an empty file and save it as decodeFile.html

Step 2: Add a <input> element for loading disk files

<input id="iptDecodeImg" type="file" accept="image/bmp,image/jpeg,image/png,image/gif">

Step 3: Include dbr-6.5.1.min.js:

<script src="https://demo.dynamsoft.com/dbr_wasm/js/dbr-6.5.1.min.js"></script>

Step 4: Set the license and instantiate the barcode reader object:

BarcodeReader.licenseKey = "LICENSE-KEY";

let reader;
BarcodeReader.createInstance().then(r => reader = r );

Step 5: Create a change event listener for <input> element. Invoke decode() method when the event is triggered:

document.getElementById('iptDecodeImg').addEventListener('change', function(){
            if(!reader){return;}
            reader.decode(this.files[0]).then(results => {
                if (results.length > 0) {
                    console.log(results);
                    var txts = [];
                    for (var i = 0; i < results.length; ++i) {
                        txts.push(results[i].BarcodeText);
                    }
                    alert(txts.join("\n"));
                    this.value = '';
                }
                else
                {
                    alert("No barcode found.");
                    this.value = '';
                    }
            });
        });

Download Dynamsoft JavaScript Barcode SDK and build your barcode scanning application.

Technical Support

If you have any questions about the above sample code or the Dynamsoft JavaScript Barcode SDK, please feel free to contact us at support@dynamsoft.com.

History

• v6.5.1, 04/28/2019: Added d.ts file to support TypeScript. Added the UMS/ESM export for Node.js. Added a built-in scanner construct to support video settings.
• v6.5, 03/14/2019: Reduced the library file (.WASM) size to around 2MB. Reduced build time by 106% and improved decoding time by 98%.