Diving into Dynamsoft JavaScript Barcode Scanner

If you are looking for a JavaScript barcode scanner SDK, Dynamsoft JavaScript Barcode SDK is no doubt the best. The SDK enables developers to quickly build web barcode scanner applications with a few lines of code. Besides, it authorizes developers to use the SDK for 7 days without extra registration and activation steps. This article gives you a better understanding of Dynamsoft JavaScript Barcode Scanner.

What You Should Know About Dynamsoft JavaScript Barcode SDK

Documentation

JavaScript Barcode Scanner API

Getting Started with Dynamsoft JavaScript Barcode Scanner

The JavaScript Barcode Scanner is a part of Dynamsoft JavaScript Barcode SDK. It contains a built-in camera view which is optimized for real-time barcode scanning.

The program is as follows:

You can save the sample code to an file and double-click it to run the program.

The default barcode scanner UI consists of a camera source list, a camera resolution list, a result overlay, and a trial prompt dialog. In the following paragraphs, you will see how to customize the UI and adjust parameters to optimize the performance for the barcode scanner.

Hiding the Trial Prompt Dialog

If you feel the trial prompt dialog is annoying, you can override the function to hide it:

Dynamsoft JavaScript Barcode Scanner is implemented using WebAssembly. Because it takes time to download and compile the wasm file, to avoid blocking the UI, we can manually load the library after the page has been loaded:

UI Customization

As you can see the default camera view is full-screen, which covers other HTML UI elements. To beautify the UI layout, we can append the scanner UI component to a DIV element:

The close button seems redundant. You can hide it:

Create a DIV element to display the barcode result returned from :

The camera view is very small. We use CSS to resize it:

The barcode scanner looks more comfortable now.

Drawing Barcode Results on Overlay

The Barcode Scanner instance contains a built-in overlay used to render the barcode bounding box, but does not provide API for rendering barcode text results. In order to visually display the results, we can override the relevant function .

Find the function in the developer console of the web browser, and extend it by adding the text rendering logic:

With the overlay, the barcode scanner can provide an excellent user-experience.

QR Code Scanner

Dynamsoft JavaScript Barcode SDK supports multi-code decoding by default. It is common sense that the more barcode we support, the more performance loss we get. For specific scenarios that only require one kind of barcode symbologies, the runtime parameters can be further optimized.

We take QR Code as the example:

  • Resize the size of the wasm file to speed up library loading and initialization:
  • Set the barcode type as :
  • Change the deblur level to 0 and expected barcode count to 1:

Here is the best QR Code scanner we can finally have.

Source Code

https://github.com/yushulx/javascript-barcode-scanner

Originally published at https://www.dynamsoft.com on June 7, 2021.

Manager of Dynamsoft Open Source Projects | Tech Lover

Manager of Dynamsoft Open Source Projects | Tech Lover