Options
All
  • Public
  • Public/Protected
  • All
Menu

Dynamsoft BarcodeReader SDK for Javascript

Dynamsoft JavaScript Barcode SDK

Version 6.5.1

The repository aims to help developers get familiar with Dynamsoft JavaScript Barcode SDK.

This SDK supports decoding 1D, PDF417, QR, DataMatrix, and Aztec.

The supported data sources include Blob, HTMLImageElement, HTMLVideoElement, URL and more.

You can create a web application or a Node.js application to decode the static images and the video stream within 3 minutes.


Online Demo

Online Demo in Dynamsoft


Browser Compatibility

Browser Version
Chrome v57+
Firefox v52+
Edge v16+
Safari* v11+
Internet Explorer not supported

Safari 11.2.2 ~ 11.2.6 are not supported.


API Documentation

class BarcodeReader

class Scanner


Preface

In the following section, I will introduce the basic functions of our SDK in your web application to decode barcodes in the video stream.

For those who are interested in the Node.js or the static images decoding, please refer to the samples and API documents. We will make up for these usages soon.


Helloworld

  • Require a camera that's not occupied by other application connected in the computer with the Internet access

Then just copy the following code into an HTML file and run it from the file browser.

<!DOCTYPE html>
<html>
<body>
    <script src="https://demo.dynamsoft.com/dbr_wasm/js/dbr-6.5.1.min.js"></script>
    <script>
        //https://www.dynamsoft.com/CustomerPortal/Portal/TrialLicense.aspx
        BarcodeReader.licenseKey = 'LICENSE-KEY';
        let scanner = new BarcodeReader.Scanner({
            onFrameRead: results => {console.log(results);},
            onNewCodeRead: (txt, result) => {alert(txt);}
        });
        scanner.open();
    </script>
</body>
</html>

Try in JSFiddle


You may see the following error 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 error is like this.

Trying to call getUserMedia from an insecure document.

If you encounter this issue, the simplest way is to open this file in a newer version of Firefox or Chrome. We will come to this issue in detail in the following sections.


If everything goes on normally, there will be a pop-up from the browser asking for the permission of the camera. Please allow it and then you will see the video stream in the default UI of our scanner. The drop-down list on the left-top corner can be used for changing the video source and the resolution. The button on the right-top is for closing the scanner. After a while with all the resources loaded, you can see some arrays in the browser console.

  • onFrameRead:

    The event that is triggered once a single frame has been scanned. The results object contains all the barcode results that the reader was able to decode.

  • onNewCodeRead:

    This event is triggered when a not duplicated new barcode is found. txt holds the barcode text result. The result contains the actual barcode result, including the text result. The old barcode will remember for duplicateForgetTime.


Implementation

In the previous helloworld, you used the js deployed at www.dynamsoft.com.

When you load dbr- <version> .min.js (UMD) or dbr- <version> .esm.min.js (ES module), it will automatically load the other necessary js and wasm files.


When you are deploying your own application, you will need a web server and deploy the resources under dist to your server.

Required files:

dbr-<version>.min.js

dbr-<version>.wasm.min.js

dbr-<version>.wasm

dbr-<version>.wasm.withio.min.js

dbr-<version>.withio.wasm

dbr-<version>.esm.min.js


You need to set .wasm mimetype to application/wasm in the server config.

Please check the settings below for different environments.


Now you can deploy the helloword in the web server and acess it from your own server. The similar issue occurs again.

[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.

That's because most browsers today need to be deployed on https to use getUserMedia. Below are some samples for configuring an HTTPS server.


After deploying the site to https server, the browser might say "the site is not secure". It's because we are using a self-certified certification. Please go to advanced and keep visiting. The issue should all be gone even in Safari. You may change the certification to a formal one in production.


Initialization

You might notice that the decoding process doesn't start immediately. It's because our library needs some time for the initialization including downloading the resources and compile them. If the helloworld is deployed, the program will cache the wasm file in the indexDB to speed the download up. You can check the download status with the _onWasmDownloadedcallback. Please note this function is only triggered in the first visit because that's the only time the download of the wasm files is required.

Every time you open the page, the initialization will start only once. You can check with the isLoaded function to see if it's successful.

The loadWasm is the most basic function for initialization, you can call it over and over again or add it in your page initialization to speed up. The promise will be resolved if the initialization is done.

createInstance and Scanner.open will call loadWasm on the backend so no initialization is required for those functions.


Debug Tool

You could insert a debug tool in our samples.

<!--any version jq is ok-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://demo.dynamsoft.com/dbr_wasm/js/kConsole.js"></script>

Try in JSFiddle

Please click the button console in the top right of the screen.

You could find dbr wasm version, initialization process, and other useful info.


Configuring Scanner Settings

The scanner interface comes with a number of properties. For example:

// Use config when new the object
let scanner = new BarcodeReader.Scanner({
    // Use back camera in mobile. Set width and height.
    // Refer [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax).
    videoSettings: { video: { width: 1280, height: 720, facingMode: "environment" } },
    //The default setting is for an environment with accurate focus and good lighting. The settings below are for more complex environments.
    runtimeSettings: { mAntiDamageLevel: 9, mDeblurLevel: 9 },
    // The same code awlways alert? Set duplicateForgetTime longer.
    duplicateForgetTime: 10000,
    onFrameRead: results => {console.log(results);},
    onNewCodeRead: (txt, result) => {alert(txt);}
});
// change config
scanner.duplicateForgetTime = 20000;
scanner.onFrameRead = undefined;
scanner.runtimeSettings.mBarcodeFormatIds = BarcodeReader.EnumBarcodeFormat.All;

Try in JSFiddle

Customize the UI

Try running the code below.

<!DOCTYPE html>
<html>
<body>
    <div id="div-video-container">
        <video class="dbrScanner-video" playsinline="true"></video>
    </div>
    <script src="https://demo.dynamsoft.com/dbr_wasm/js/dbr-6.5.1.min.js"></script>
    <script>
        //https://www.dynamsoft.com/CustomerPortal/Portal/TrialLicense.aspx
        BarcodeReader.licenseKey = 't0068MgAAAAxT9peWqAbLNI2gDlg9yk8dqzhp5Me5BNCgFIg2p5X+8TPYghCr9cz6TNFlkmkpzOJelNHJaQMWGe7Bszoxoo4=';
        let scanner = new BarcodeReader.Scanner({
            htmlElement: document.getElementById('div-video-container'),
            onFrameRead: results => {console.log(results);},
            onNewCodeRead: (txt, result) => {alert(txt);}
        });
        scanner.open();
    </script>
</body>
</html>

Try in JSFiddle

Now that we have defined the htmlElement to be the document body, you can customize the video source and resolution dropdown boxes. Here is how to add a source select dropdown when you have more than one video source:

<select class="dbrScanner-sel-camera"></select>

Try in JSFiddle

And here is how to add a resolution select dropdown menu:

<select class="dbrScanner-sel-resolution"></select>

The dropdown will still show the same 8 options for the resolution. If the camera does not support the selected resolution, it will find the closest supported resolution. Try in JSFiddle

You can provide limited resolution options to avoid overwhelming the user. Here is how to do that, as well as hide the currently selected resolution:

<select class="dbrScanner-sel-resolution">
    <!-- <option class="dbrScanner-opt-gotResolution" value="got"></option> -->
    <option data-width="1920" data-height="1080">1920 x 1080</option>
    <option data-width="1280" data-height="720">1280 x 720</option>
    <option data-width="640" data-height="480">640 x 480</option>
</select>

Try in JSFiddle

Here is how to play the video at a special resolution in js:

scanner.play(null, 1920, 1080).then(r=>{
    alert(r.width+'x'+r.height);
});

Try in JSFiddle

Now suppose you do not want to use either of the select classes listed above. With the video reader object, you can use the API methods to populate any UI element you want to use.

For creating the resolution list, the UI element will need to be manually populated as shown in the a couple of code snippets ago.

For the device list, you can get source lists like this:

scanner.updateDevice().then(infos=>{
    // The camera currently in use
    alert(JSON.stringify(infos.current, null, 2));
    // An array of all cameras
    alert(JSON.stringify(infos.all, null, 2));
});

Try in JSFiddle

Get source lists during opening:

scanner.open().then(infos=>{
    // The resolution of the video currently playing
    alert(JSON.stringify(infos.width+'x'+infos.height, null, 2));
    // The camera currently in use
    alert(JSON.stringify(infos.current, null, 2));
    // An array of all cameras
    alert(JSON.stringify(infos.all, null, 2));
});

Try in JSFiddle

Select a camera by deviceId:

// Play the first camera.
scanner.play(infos.all[0].deviceId);

Try in JSFiddle

Select a friendly named camera. Note that the camera may display different names on the browser in different environments or timings. So this is not a very safe practice. You need to test this code on your target browser.

scanner.open().then(infos=>{
    for(let info of infos.all){
        if(info.label == 'Your camera name'){
            scanner.play(info.deviceId);
            break;
        }
    }
});

Try in JSFiddle

In conclusion: The device list is returned in the Promise result of open or updateDevice. You can then play the selected device using open or play(when already open).

How to complete a form using the Barcode Reader

Based on the HTML code snippet with the custom UI elements, let's add some input tags.

Adding three <input> elements:

<input id="ipt-0">
<input id="ipt-1">
<input id="ipt-2">

Modify the configurarion settings of the video reader to complete the form with the results of three barcodes once they are found:

let iptIndex = 0;
let scanner = new BarcodeReader.Scanner({
    onNewCodeRead:(txt)=>{
        document.getElementById('ipt-' + iptIndex).value = txt;
        if(3 == ++iptIndex){
            scanner.onNewCodeRead = undefined;
            scanner.close();
        }
    }
});

Try in JSFiddle


Decode Part of Video

If you are not interested in exhausting resources to read the entire video stream, you can choose to decode a specific region of the stream. Here is how:

// take a center 50% * 50% part of the video and resize the part to 1280 * 720 before decode
scanner.searchRegion = {sx: 0.25, sy: 0.25, sWidth: 0.5, sHeight: 0.5, dWidth: 1280, dHeight: 720};

Try in JSFiddle


Change log

6.5.1

Added video view for barcode scan. Compatible with Node.js.

6.4.1.3

The dbr-6.4.1.3.wasm size is now reduced to 3.41M.

6.4.1.1

Fixed a memory leak related to mTimeout in RuntimeSettings.

6.4.1.0

Built Dynamsoft Barcode Reader 6.4.1 to JS(WebAssembly) version.

Combined the normal and the mobile version into one.

6.3.0.2

Added built-in Worker support.

6.3.0.1

Set dbr-<version>.js(stable) as the main branch.

Added dbr-<version>.mobile.js(smaller, compiles quicker, requires less memory, but not as stable) for mobile Safari.

6.3.0

Built Dynamsoft Barcode Reader 6.3.0 to JS(WebAssembly) version.


Contact Us

If there is any questions, please feel free to contact support@dynamsoft.com.

License Agreement

Dynamsoft Barcode Reader JavaScript Edition License Agreement

Generated using TypeDoc