JavaScript Barcode Scanner

Scanbot Web Barcode Scanner SDK is available as an npm package and also loadable via jsdelivr.

After the installation, first, you need to add a container element to your HTML file:

<div id="barcode-scanner-container"></div>

Then, you can easily start the JavaScript Barcode Scanner in your JavaScript app:

var barcodeScanner = await scanbotSDK.createBarcodeScanner({
				containerId: 'barcode-scanner-container',
				onBarcodesDetected: onBarcodesDetected,
			});
		

You can configure the 1D and 2D barcode types that you want to recognize:

var barcodeScanner = await scanbotSDK.createBarcodeScanner({
	    containerId: 'barcode-scanner-container',
	    …
	    barcodeFormats: [
	      "AZTEC",
	      "CODABAR",
	      "CODE_39",
	      "CODE_93",
	      "CODE_128",
	      "DATA_MATRIX",
	      "EAN_8",
	      "EAN_13",
	      "ITF",
	      "MAXICODE",
	      "PDF_417",
	      "QR_CODE",
	      "RSS_14",
	      "RSS_EXPANDED",
	      "UPC_A",
	      "UPC_E",
	      "UPC_EAN_EXTENSION",
	      "MSI_PLESSEY",
	    ]
	  });
	

Also, you can customize the UI style of your JavaScript Barcode Scanner:

var barcodeScanner = await scanbotSDK.createBarcodeScanner({
	    containerId: 'barcode-scanner-container',
	    …
	    style: {
	      window: {
	        aspectRatio: 1,
	        paddingPropLeft: 0.5,
	        borderColor: "white",
	        left: "50%",
	        top: "50%",
	        transform: "translate(-50%, -50%)"
	      },
	      text: {
	        color: "white",
	        size: "0.9em",
	        weight: 300,
	      },
	      backgroundColor: "rgba(0, 0, 0, 0.7)",
	      hint: "Please align the barcode or QR code in the frame"
	    }
	  });
	

Complete example projects

To get off to a flying start, check out our GitHub repository. There, you can find full example projects on React, Angular, and Plain JavaScript: https://github.com/doo/scanbot-sdk-example-web/

They demonstrate the integration of all API methods of the Scanbot Web Document Scanner and the Barcode Scanner SDK, such as 1D and 2D barcode scanning, document scanning, the cropping UI, image filters, PDF and TIFF rendering, the MRZ (machine-readable zones) scanner, and more.