

The barcode scanner still works completely locally in the user's browser. The only difference is that the "datasymbol-sdk-hlp.min.js" and "datasymbol-sdk.wasm" files necessary for the scanner to work will not be downloaded from your site, but from ours.
The scanner will be displayed in a separate HTML iframe tag, this makes it possible to isolate the scanner code from your site code, i.e. the scanner will not affect your site, its design, etc. in any way.
OnLine Test 1 OnLine Test 2
So what does it take to embed a "Hosted Barcode Scanner" into your website?

https://websdk.datasymbol.com
If your site does not support HTTPS, then the scanner will not work.

<script async> onDataSymbolBarcode = function( decodingResult ) { for (var i = 0; i < decodingResult.length; ++i) alert( DSbin2String(decodingResult[i]) ); }; </script> <script async id="DataSymbolScript" src="https://websdk.datasymbol.com/srvhost/v2/scanner.js"></script>
After embedding this code, Barcode Scanner should start working.
onDataSymbolBarcode
How do you know if a barcode has been decoded? Define onDataSymbolBarcode event handler.
This code doesn't do anything useful with the barcode, it just throws a notification with the barcode text.onDataSymbolBarcode = function( decodingResult ) { for (var i = 0; i < decodingResult.length; ++i) alert( DSbin2String(decodingResult[i]) ); };
A minimal knowledge of JavaScript will allow you to use the decoded barcode to a greater advantage.
onDataSymbolMessage
Various messages from the barcode scanner.
onDataSymbolMessage = function( msgData ) { console.log( msgData ); };
"Hosted Barcode Scanner" contains some settings. You can change them.
default settings:var DSHostSettings = { leftPos: 0, topPos: 0, viewWidth: 320, viewHeight: 240, xAlign: 'none', //none, left, right, float yAlign: 'none', //none, top, bottom, float alignGap: 10, opacity: 1.0, addFrameStyle: '', //additional frame style settings, for example: 'border: solid 2px #ff0;' cams: ['0, facing back', 'facing back:0', 'back camera'], sWebSDKKey: '', }; var DSScannerSettings = { camera: { resx: 640, resy: 480, }, barcode: { barcodeTypes: ['Code128', 'Code39', 'EAN13', 'UPCA', 'QRCode'], frameTime: 1000, }, };









How to change the default settings:
<script async> var DSHostSettings = { viewWidth: 640, viewHeight: 480, }; var DSScannerSettings = { barcode: { barcodeTypes: ['QRCode'], //decode only QRCode }, }; onDataSymbolBarcode = function( decodingResult ) { for (var i = 0; i < decodingResult.length; ++i) alert( DSbin2String(decodingResult[i]) ); }; </script> <script async id='DataSymbolScript' src="https://websdk.datasymbol.com/srvhost/v2/scanner.js"></script>
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> </head> <body> Hello, this is main html <br><br> <!-- Barcode Scanner Code Start --> <script id='DataSymbolScript'> onDataSymbolBarcode = function( decodingResult ) { for (var i = 0; i < decodingResult.length; ++i) alert( DSbin2String(decodingResult[i]) ); }; </script> <script src="https://websdk.datasymbol.com/srvhost/v2/scanner.js"></script> <!-- Barcode Scanner Code Stop --> </body> </html>
OnLine Test