Create an Online Barcode Scanner Application with JavaScript

Last Updated on

Why Develop an Online Barcode Scanner?

Nowadays cloud services make application development easier. Resulting software can be deployed on various platforms including desktop, web, and mobile. However, as is becoming more evident, web-based applications are becoming more popular.

As a developer, web-based application development is more lightweight and convenient. As an end-user, you don’t have to install an application to get connected with colleagues, to store business or personal data, watch a video, edit documents, publish blog posts, and even to write code.

The reading of barcodes is one application that tends to be online. Therefore, more and more companies are looking to create an online client-side barcode scanner to meet the scanning needs of employees or other end-users. If you are preparing to build an online barcode reader, you can use Dynamsoft Barcode Reader SDK to embed barcode reading functionality in your application. You can decode barcodes on the client side with the Dynamsoft Barcode Reader SDK for the web.

In this article, we’ll show you how to implement barcode recognition functionality into your web-based application using Dynamsoft Barcode Reader SDK. This SDK will save on costs, resources and time.

About Dynamsoft Barcode Reader

Dynamsoft Barcode Reader SDK for web is a JavaScript API for barcode scanning based on the WebAssembly technology. It supports real-time localization and decoding of various barcode types. The library is capable of scanning barcodes from static images as well as directly from live video streams. It also supports reading multiple barcodes at once.

Start your Free 30-Day Trial

Supported Symbologies:

1D barcode: Code 39 (including Code 39 Extended), Code 93, Code 128, Codabar, EAN-8, EAN-13, UPC-A, UPC-E, Interleaved 2 of 5 (ITF), Industrial 2 of 5 (Code 2 of 5 Industry, Standard 2 of 5, Code 2 of 5), ITF-14 .

2D barcode: PDF417, QR, DataMatrix, Aztec, and MaxiCode.

Patch Code

GS1 Composite Code

GS1 DataBar: Omnidirectional, Truncated, Stacked, Stacked Omnidirectional, Limited, Expanded, and Expanded Stacked.

Learn more about the barcode types.

Implementation of Online Barcode Scanner

Before we get started, you can check out the video below to see how the online barcode scanner JavaScript edition works:

You can also try our online barcode scanner JavaScript demo.

online barcode scanner demo

Browser Compatibility:

Supported Browsers: Chrome, Firefox, Edge, Safari.

Generally, the performance of WebAssembly depends on the network connection, device and browser used. Learn more.

Getting Started:

We provide sample code to help you use the library to build a simple web application to decode barcodes from a video stream. Basic requirements include

  • Internet connection
  • camera access
  • HTTPS web server required if you want to access video stream from a camera

Embed the Code in Minutes!

Create an HTML file with the following content. Deploy it to your readily available web server where applicable.

  • The sample is missing one piece of information to actually work, which is the field PRODUCT-KEYS. You can acquire a trial key here and replace the field with your key.
  • If you don’t have a ready-to-use web server and you happen to have a package manager, like npm or yarn, you can set up a simple http server in minutes. To do so, you can check out http-server on npm or yarn.
<!DOCTYPE html>
<html>
<body>
    <!-- Please visit https://www.dynamsoft.com/CustomerPortal/Portal/TrialLicense.aspx to get a trial license. -->
    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.2.3-v2/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
    <script>
        let barcodeScanner = null;
        Dynamsoft.BarcodeScanner.createInstance({
            onFrameRead: results => {console.log(results);},
            onUnduplicatedRead: (txt, result) => {alert(txt);}
        }).then(scanner => {
            barcodeScanner = scanner;
            barcodeScanner.show();
        });
    </script>
</body>
</html>

Try in JSFiddle

If you want more detailed information on how the library works and how you can customize it to your needs, please read this article.

Get a Free Trial and Samples

Are you interested in the above online barcode solution? Download a 30-day free trial of Dynamsoft Barcode Reader to build your barcode application today.

Try our Free Online Demo Start your Free 30-Day Trial

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com