Download 30-Day Trial GetPricing
Table of contents

Dynamsoft Barcode Reader JavaScript Edition - User Guide

Dynamsoft JavaScript Barcode SDK

Dynamsoft BarcodeReader SDK for Web is a JavaScript SDK for barcode scanning based on WebAssembly. It supports real-time barcode localization and decoding of various barcode types. The library is capable of scanning barcodes directly from live video streams as well as static images. It also supports reading multiple barcodes at once.

In this guide, you will learn step by step how to use Dynamsoft Barcode Reader JavaScript Edition in your application:

Getting Started - Hello World

Let’s start by using the library to build a simple web application that will decode barcodes from a live video stream.

Basic Requirements

Step One: Write the code in one minute

Creat a text file anywhere on your local disk and name it “helloworld.html”. Copy the following content in the file and save.

<!DOCTYPE html>
<html>
<body>
    <!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&product=dbr&package=js to get a trial license. -->
    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
    <script>
        // initializes and uses the library
        let scanner = null;
        (async()=>{
            scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
            scanner.onFrameRead = results => {if(results.length > 0 ) console.log(results);};
            scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
            await scanner.show();
        })();
    </script>
</body>
</html>

About the code

  • onFrameRead: This event is triggered after the library finishes scanning a frame from the video stream. The results object contains all the barcode results that the library found on this frame. In this example, we print the results to the browser console.

  • onUnduplicatedRead: This event is triggered when a new barcode (not a duplicate) is found. txt holds the barcode text value while result is an object that holds details of the barcode. In this example, an alert will be displayed for each unique barcode found. Notice that if the same barcode is found on multiple consecutive frames, this event is only triggered once.

Try in JSFiddle

Note:

  • The recommendation is to deploy this page to your web server and run it over HTTPS. If you don’t have a ready-to-use web server but have a package manager like npm or yarn, you can set up a simple HTTP server in minutes. Check out http-server on npm or yarn. However, for simple testing purposes, it’s perfectly fine to just open the file directly from your local disk.

  • You will need to replace PRODUCT-KEYS with a trial key (or your Handshake Code if you have got one) for the sample code to work correctly. You can acquire a trial key here. Notice that the library will still read barcodes without a valid key (Code), but will return an annotated result string.

  • The library only scans a new frame when it has finished scanning the previous frame. Generally, frames come in faster than the library processes a frame (for 30 FPS, the interval is about 33 ms), therefore not all frames are scanned.

Step Two: Enable camera access

Open the HTML page in your browser and you should see a pop-up asking for permission to access the camera. Once the access is granted, the video stream will start in the default UI of the BarcodeScanner object.

Note:

  • If you don’t see the pop-up, wait a few seconds for the initialization to finish.

In this step, you might run into the following issues:

getUserMedia non-HTTPS access issue

If you opened the HTML file as file:/// or http://, the following error may appear in the browser console:

[Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

In Safari 12 the equivalent error is:

Trying to call getUserMedia from an insecure document.

You get this error because to access the camera with the API getUserMedia, HTTPS is required.

Note

  • If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via file:/// and http://localhost.

To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.

Self-signed certificate issue

For testing purposes, a self-signed certificate can be used when configuring HTTPS. When accessing the site, the browser might say “the site is not secure”. In this case, go to the certificate settings and trust this certificate.

In a production environment, a valid HTTPS certificate is required.

Step Three: Time to scan

Place a barcode in front of the camera. You should see an alert pop up with the decoded barcode result and a coloured region on the video to highlight the barcode location.

Installation

For evaluation purposes, we recommend that you get the official package of the library for developers. The following shows how to acquire the package.

If you want to start building your application right away, you can also just make use of the library via CDN as shown in the previous helloworld sample code.

  • cdn

    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
<!-- or -->
<script src="https://unpkg.com/dynamsoft-javascript-barcode@8.2.0/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>

Dynamsoft also provides a Barcode Reader SDK built for Node, see Dynamsoft JavaScript Barcode SDK for Node.

Demos and Examples

The following are the official demo of the library and examples for the most popular JavaScript Frameworks.

This page is compatible for:

Is this page helpful?

YesYes NoNo

In this article: