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.
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.
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.
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:
The web app is also compatible with mobile browsers.
For more information about the WebAssembly barcode SDK, please contact support@dynamsoft.com.
Source Code
https://github.com/yushulx/webassembly-barcode-reader
The post The Preview of Dynamsoft WebAssembly Barcode SDK appeared first on Code Pool.