Can you decode an image file with a barcode directly on the client side in a browser?
Yes, you can. In this article, we’ll show how to do it using our Web SDK for websites.

Why decode barcodes locally in the browser instead of on the server?

Normally, you could upload the file to a server and decode it there using a server-side BarcodeReader SDK. However, there are several use cases where local decoding in the client’s browser is more beneficial:

• Security reasons – The image file with the barcode is processed locally on the user’s computer. The file never leaves the device.
• Reduced server load – If high traffic is expected, you don’t need powerful server infrastructure. Since decoding happens on the client device, even a lightweight IoT device can serve as the HTTP host.
• Easy deployment – A barcode scanning application is still simple to manage and benefits from all the advantages of the Web SDK for websites.

How to configure the Web SDK for decoding files instead of using the camera

To disable the use of the device camera and enable image file decoding, you just need to pass a ScannerSettings object without a “camera” property when creating the scanner (DSScanner.Create).

Here’s an example configuration:

var scannerSettings = {
  scanner: {
    key: '',
  },
  viewport: {
    id: 'datasymbol-barcode-viewport',
  },
  barcode: {
    barcodeTypes: ['Code128', 'Code39', 'QRCode'],
  },
};

Now, when you call:

DSScanner.Create(scannerSettings);

the Web SDK will detect that no “camera” object is provided and will create an image file decoder instead.

Example of decoding barcodes from image files

Original OnLine URL: https://websdk.datasymbol.com/appfile/