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
- 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
- What is the best way to save the SDK key?
- Your example doesn’t work on IIS server. Why?
- Response has unsupported MIME type. Why?
- Is it possible to place the .wasm file into a different folder?
- Your barcode Web SDK does not work on my website.
- Browser does not use a modified version of the JS file.
- "Invalid constraint" exception in DSScanner.Create method.
- License key doesn't work.
- How to use a back camera by default?
- How to embed barcode scanner in WordPress?
- I am using barcode scanner WordPress plugin. How to insert barcode in input form field?
- How to use barcode Web SDK with React.JS?
- How to redirect to the required URL in WordPress barcode scanner plugin?
- Beep sound doesn’t playback on iPhone/Safari.
- How to learn the subscription expiration date?
- How can I automatically renew a One-Year Subscription?
- The Web SDK fails to work correctly on some mobile devices.
- How to use Web SDK barcode scanner on the Angular platform?
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]);
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();
});