What is "Hosted Barcode Scanner"?

This is an even easier way to integrate a barcode scanner into your website. You do not need to place any additional files on your site and make any additional settings for this.

In this case, you retain all the same benefits as with the usual use of the Barcode Web SDK.
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?

Firstly, the page on your site where the scanner will be installed must work over HTTPS (all browsers require a secure connection when working with a camera). Our "Hosted Barcode Scanner" is also hosted on the secured site:
https://websdk.datasymbol.com
If your site does not support HTTPS, then the scanner will not work.

To embed a barcode scanner in your page, simply add the following JavaScript code in the required place of your HTML (inside body tag).

    <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.

onDataSymbolBarcode = function( decodingResult ) {
	for (var i = 0; i < decodingResult.length; ++i)
		alert( DSbin2String(decodingResult[i]) );
};

This code doesn't do anything useful with the barcode, it just throws a notification with the barcode text.
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,
    },
};

viewWidth/viewHeight - Size of the scanner window. This size must be proportional to frame resolution (scannerSettings.camera.resx, scannerSettings.camera.resy). For example, if the frame resolution is 640 X 480, then the following sizes can be used: 160 X 120, 320 X 240, 640 X 480, etc.

leftPos/topPos - Specifies the window's coordinates if one of xAlign/yAlign is not equal to 'none'.

xAlign/yAlign - Sets the anchor of the barcode scanner window to some edge of the window.



alignGap - Gap from the edge of the browser window if using Align/yAlign

opacity - The transparency of the scanner window. 0 - completely transparent. 1 - not transparent.

addFrameStyle - Additional CSS styles you can add.

sWebSDKKey - License key for the scanner to work in production mode. Without a key, the scanner works in demo mode (adds the '*' character to the decoded barcode). You can use any license except "users per day".

DSScannerSettings - Sets all scanner settings. Full description here.


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