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)
  • websdk.html - Simple HTML code


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();
});