Latest Version:
2.8 (June 10 2020)


2.7 (Mar 30 2020)
  • New method has been added: getFrame
  • Some minor bugs have been fixed.

Previous:
  • Day licensing system has been improved.
  • New method has been added: getLicenseInfo.
  • Mirror PDF417 barcode decoding has been added.
  • new Progressive Web Application (PWA) Example
  • New method has been added: DecodeImage
  • New setting property scanner.light
  • Mirror DataMatrix and QRCode barcode decoding has been added.
  • New methods have been added: Destroy, IsScannerReady, getVersion
  • New setting property scanner.scanningRect
  • New parameter (frameSize) for onScannerReady event
  • Method setBarcodeSetings has been removed
  • New properties

    QRCodeDecMirror, DataMatrixDecMirror, ScanningRectLeft, ScanningRectTop, ScanningRectWidth, ScanningRectHeight

    for WebAssembly setProperty method have been added.
  • Minor bugs has been fixed.


Web SDK Getting Started

DataSymbol WebSDK is very easy to use. Basic knowledge is enough for HTML and JavaScript. Add the file "datasymbol-sdk-hlp.min.js" to your HTML page, add few lines of the code to JavaScript. Thus you will get the proper barcode scanner inside your browser.

1. Download Web SDK.

Download and unzip DataSymbol Web SDK.
Download

SDK contains the following files:
  • datasymbol-sdk.wasm - WebAssembly with barcode reader library
  • datasymbol-sdk-hlp.min.js - JavaScript wrapper for WASM library (datasymbol-sdk.wasm)
examples:
  • websdk.html - Simple HTML code
  • websdk-frame.html - how to get and draw a current video frame
  • websdk-ScanFile.html - load a locally image file and find barcode
  • websdk-ScanFile-no-view.html - same as previous but without image drawing
  • websdk-ScanningRect.html - barcode scanning only in required frame part


2. HTML
<!doctype html>
<html lang="en-us">
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="/datasymbol-sdk-hlp.min.js"></script>
</head>
<body>
	<p id='status'>Downloading ...</p>
	<div id="datasymbol-barcode-viewport" style="display:block;width:640px; height:480px;"></div>
</body>
</html>


3. JavaScript

function onBarcodeReady (barcodeResult) {
    var barDataEl = document.getElementById('status');

	for (var i = 0; i < barcodeResult.length; ++i) {
	        var sBarcode = DSScanner.bin2String(barcodeResult[i].data);
	        barDataEl.innerHTML = sBarcode;
	        console.log(barDataEl.innerHTML);
    }
};

function onError(err) {
    var statusElement = document.getElementById('status');
    statusElement.innerHTML = 'Error: ' + err.message;
}

function CreateScanner(device){
    var scannerSettings = {
        viewport: {
            id: 'datasymbol-barcode-viewport',
            width: 500,	//if not defined then 100%
        },
        camera: {
            id: device ? device.id : null,
            label: device ? device.label : null,
            resx: 640,
        },
        barcode: {
            barcodeTypes: ['Code128', 'DataMatrix', 'QRCode', 'QRCodeUnrecognized'],
        },
    };

    DSScanner.addEventListener('onError', onError);
    DSScanner.addEventListener('onBarcode', onBarcodeReady);

    DSScanner.addEventListener('onScannerReady', function () {
        console.log('HTML onScannerReady');
        var statusElement = document.getElementById('status');
        statusElement.innerHTML = ' ';	//statusElement.hidden = true;
        DSScanner.StartScanner();
    });

    DSScanner.Create(scannerSettings);
}

//DOM ready
document.addEventListener("DOMContentLoaded", function(event) {
	CreateScanner();
});