The Preview of Dynamsoft WebAssembly Barcode SDK

WebAssembly (Wasm) is a revolutionary technology for Web development. It aims to execute at native speed in web browsers. With WebAssembly, it is convenient to port C/C++ code for web client and server applications. Dynamsoft Barcode Reader 6.2 is the most potent barcode SDK ever, and its WebAssembly edition is on the way. Let’s see what we can do with the preview edition of Dynamsoft WebAssembly barcode SDK.

Browser Compatibility

Visit MDN to check the browser compatibility.

wasm browser

Testing Environment

  • Chrome Version 67.0.3396.99
  • IIS
  • Windows 10

License

To use the SDK, apply for a valid license beforehand.

WebAssembly Barcode SDK

Parameter Initialization

Configure parameters. Replace the license key with yours.

var dynamsoft = self.dynamsoft || {};
var reader;
dynamsoft.dbrEnv = dynamsoft.dbrEnv || {};
dynamsoft.dbrEnv.resourcesPath = "https://tst.dynamsoft.com/demo/DBR_WASM";
dynamsoft.dbrEnv.licenseKey = "t0068NQAAAFEiYhAfkotGqCdX6THMV7KARQKp5h14F7LrM4LoGND9F5AdXykh+TOYHnBnMw80FMeKjMJbieYYos5dYLSn/Do=";
dynamsoft.dbrEnv.onAutoLoadWasmSuccess = function () {
  reader = new dynamsoft.BarcodeReader();
};
dynamsoft.dbrEnv.onAutoLoadWasmError = function (status) {
  
};

After setting parameters, include dynamsoft.barcodereader.min.js at the bottom of your HTML page.

<script src="https://tst.dynamsoft.com/demo/DBR_WASM/dynamsoft.barcodereader.min.js"></script>

Loading .wasm file

It takes a while to download the dynamsoft.barcodereader.wasm file.

dynamsoft barcode wasm

Caching with IndexedDB

The .wasm file will be cached in IndexedDB. When you refresh or open the page next time, the loading speed is faster.

wasm IndexedDB

Reading barcodes

With Dynamsoft WebAssembly barcode SDK, you can detect barcodes from different input sources. Here are the available methods:

function decodeFileInMemery(FileName)
function decodeVideo(HTMLVideoElement)
function decodeBase64String(String)
function decodeBuffer(Blob | ArrayBuffer | Uint8Array)

Read an image file loaded via HTML <input> tag.

let image = document.getElementById('uploadImage').files[0];
if (image) {
    reader.decodeFileInMemery(image).then(results => {
        let txts = [];
        for (let i = 0; i < results.length; ++i) {
            txts.push(results[i].BarcodeText);
        }
        barcode_result.textContent = txts.join(", ");
    });
}

Render video frames on canvas and use the corresponding ArrayBuffer for barcode detection.

var imageData = barcodeContext.getImageData(0, 0, imageWidth, imageHeight);
var idd = imageData.data;
reader.decodeBuffer(idd.buffer, imageWidth, imageHeight, imageWidth * 4, dynamsoft.BarcodeReader.EnumImagePixelFormat.IPF_ARGB_8888).then(
    results => {
        let txts = [];
        for (var i = 0; i < results.length; ++i) {
            if (results[i].LocalizationResult.ExtendedResultArray[0].Confidence >= 30) {
                txts.push(results[i].BarcodeText);
            }
        }
    }
);

Read one or multiple barcodes in Desktop Chrome:

webassembly barcode detection

The web app is also compatible with mobile browsers.

webassembly barcode dynamsoft

For more information about the WebAssembly barcode SDK, please contact support@dynamsoft.com.

Source Code

https://github.com/yushulx/webassembly-barcode-reader