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.
="1.0"="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%.