Hosted Web Barcode Scanner

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 id='DataSymbolScript'>
	const viewWidth = 320;
	const viewHeight = 240;
	var leftPos = 0;
	var topPos = 0;
	const xAlign = 'none';				//none, left, right, float
	const yAlign = 'none';				//none, top, bottom, float
	const alignGap = 10;
	const opacity = 1.0;
	const addFrameStyle = '';			//additional style settings, for example: 'border: solid 2px #fff;'
	const sWebSDKKey = '';

	var scannerSettings = {
		camera: {
			resx: 640,
			resy: 480,
		},
		barcode: {
			barcodeTypes: ['Code128', 'Code39', 'EAN13', 'UPCA', 'QRCode'],
			frameTime: 1000,
		},
	};

	var myFrame = document.createElement("iframe");
	var bStatic = (xAlign == 'none') && (yAlign == 'none')
	var myJSON = JSON.stringify(scannerSettings); 
	var srcURL = 'https://websdk.datasymbol.com/srvhost/srv?ss=' + encodeURIComponent(myJSON) + '&tid=' + sWebSDKKey;
	var myFrame = document.createElement("iframe");
	myFrame.setAttribute('id', 'DataSymbolFrame');
	myFrame.setAttribute('src', srcURL);
	myFrame.setAttribute('allow', 'camera');
	myFrame.setAttribute('style', 'opacity:' + opacity + ';position:' + (bStatic?'static':'fixed') + ';z-index:10001;left:' + leftPos + 'px;top:' + topPos + 'px;overflow:hidden; display:block; margin:0; padding:0; width:' + viewWidth + 'px; height:' + viewHeight + 'px;' + addFrameStyle);
	myFrame.setAttribute('scrolling', 'no');
	myFrame.setAttribute('frameborder', '0');
	var currScript = document.getElementById("DataSymbolScript");
	currScript.parentNode.insertBefore(myFrame, currScript.nextSibling);
	window.addEventListener("resize", function(e)
	{
		setWinPos();
	} );
	document.body.onload = function(e)
	{
		setWinPos();
	};
	function setWinPos()
	{
		if( xAlign != 'none' )
		{
			if( xAlign == 'left' ) leftPos = alignGap;
			if( xAlign == 'right' ) leftPos = document.documentElement.clientWidth - viewWidth - alignGap;
		}
		if( yAlign != 'none' )
		{
			if( yAlign == 'top' ) topPos = alignGap;
			if( yAlign == 'bottom' ) topPos = document.documentElement.clientHeight - viewHeight - alignGap;
		}
		myFrame.style.left = leftPos + 'px';
		myFrame.style.top = topPos + 'px';
	}
</script>
If you are proficient in HTML/JavaScript you can modify this code however you like.
After embedding this code, Barcode Scanner should start working.




How do you know if a barcode has been decoded?
Use this code.

<script>
	function bin2String (decodingResult, dataEncoding) {
		return String.fromCharCode.apply(null, decodingResult.data);
	}

	window.onmessage = function (e){
		if (!e || !e.data.msgType || e.data.msgType != 'DataSymbolBarcode')
			return;
		var decodingResult = e.data.decodingResult;
		for (var i = 0; i < decodingResult.length; ++i) {
			var sBarcode = bin2String(decodingResult[i]);
			alert(sBarcode);
		}
	}
</script>
This code doesn't do anything useful with the barcode, it just throws a notification with the barcode text "alert(sBarcode);"
A minimal knowledge of JavaScript will allow you to use the decoded barcode to a greater advantage.




As you may have noticed "Hosted Barcode Scanner" contains some settings. You can change them.

<script id='DataSymbolScript'>
	const viewWidth = 320;
	const viewHeight = 240;
	var leftPos = 0;
	var topPos = 0;
	const xAlign = 'none';				//none, left, right, float
	const yAlign = 'none';				//none, top, bottom, float
	const alignGap = 10;
	const opacity = 1.0;
	const addFrameStyle = '';			//additional style settings, for example: 'border: solid 2px #fff;'
	const sWebSDKKey = '';

	var scannerSettings = {
		camera: {
			resx: 640,
			resy: 480,
		},
		barcode: {
			barcodeTypes: ['Code128', 'Code39', 'EAN13', 'UPCA', 'UPCA'],
			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.

Allignment of barcodescanner within site 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".

scannerSettings - Sets all scanner settings. Full description here.





<!DOCTYPE html>
<html>
<head></head>

<body>
Hello, this is main html
<br><br>

<!-- Barcode Scanner Embedding -->
<script id='DataSymbolScript'>
	const viewWidth = 320;
	const viewHeight = 240;
	var leftPos = 0;
	var topPos = 0;
	const xAlign = 'none';		//none, left, right, float
	const yAlign = 'none';		//none, top, bottom, float
	const alignGap = 10;
	const opacity = 1.0;
	const addFrameStyle = '';	//additional style settings, for example: 'border: solid 2px #fff;'
	const sWebSDKKey = '';

	var scannerSettings = {
		camera: {
			resx: 640,
			resy: 480,
		},
		barcode: {
			barcodeTypes: ['Code128', 'Code39', 'EAN13', 'UPCA'],
			frameTime: 1000,
		},
	};

	var myFrame = document.createElement("iframe");
	var bStatic = (xAlign == 'none') && (yAlign == 'none')
	var myJSON = JSON.stringify(scannerSettings); 
	var srcURL = 'https://websdk.datasymbol.com/srvhost/srv?ss=' + encodeURIComponent(myJSON) + '&tid=' + sWebSDKKey;
	var myFrame = document.createElement("iframe");
	myFrame.setAttribute('id', 'DataSymbolFrame');
	myFrame.setAttribute('src', srcURL);
	myFrame.setAttribute('allow', 'camera');
	myFrame.setAttribute('style', 'opacity:' + opacity + ';position:' + (bStatic?'static':'fixed') + ';z-index:10001;left:' + leftPos + 'px;top:' + topPos + 'px;overflow:hidden; display:block; margin:0; padding:0; width:' + viewWidth + 'px; height:' + viewHeight + 'px;' + addFrameStyle);
	myFrame.setAttribute('scrolling', 'no');
	myFrame.setAttribute('frameborder', '0');
	var currScript = document.getElementById("DataSymbolScript");
	currScript.parentNode.insertBefore(myFrame, currScript.nextSibling);
	window.addEventListener("resize", function(e)
	{
		setWinPos();
	} );
	document.body.onload = function(e)
	{
		setWinPos();
	};
	function setWinPos()
	{
		if( xAlign != 'none' )
		{
			if( xAlign == 'left' ) leftPos = alignGap;
			if( xAlign == 'right' ) leftPos = document.documentElement.clientWidth - viewWidth - alignGap;
		}
		if( yAlign != 'none' )
		{
			if( yAlign == 'top' ) topPos = alignGap;
			if( yAlign == 'bottom' ) topPos = document.documentElement.clientHeight - viewHeight - alignGap;
		}
		myFrame.style.left = leftPos + 'px';
		myFrame.style.top = topPos + 'px';
	}
</script>

Barcode: <h3 id='barcodeTxt'></h3>

<!-- Catch Barcode Event -->
<script>
	function bin2String (decodingResult, dataEncoding) {
		return String.fromCharCode.apply(null, decodingResult.data);
	}

	window.onmessage = function (e){
		if (!e || !e.data.msgType || e.data.msgType != 'DataSymbolBarcode')
			return;

		var decodingResult = e.data.decodingResult;

		for (var i = 0; i < decodingResult.length; ++i) {
			if(decodingResult[i].type == 'LinearUnrecognized' || decodingResult[i].type == 'QRCodeUnrecognized' || decodingResult[i].type == 'DataMatrixUnrecognized' || 
				decodingResult[i].type == 'PDF417Unrecognized' || decodingResult[i].type == 'AztecUnrecognized' || 
				!decodingResult[i].barcodeAtPoint )
				continue;

			var sBarcode = bin2String(decodingResult[i]);
		
			document.getElementById('barcodeTxt').innerText = sBarcode;
		}
	}
</script>

</body>
</html>