How to Enable QR code Scanning from Mobile Cameras in Web

Jan 03, 2020
 Tutorials

If you need to enable web-based barcode scanning for your mobile browsers but don’t want the additional effort of an app for both users and developers, then this post is for you. We will be discussing how you can build an online QR code scanner using the mobile camera. Primarily, there are two methods to decode barcodes in mobile browsers:

  • Client-Side Scanning

    Using a web-based barcode scanner, the barcode decoding happens on the client side. This means you don’t have to upload the video stream to the server, which can save on data and processing time.

    See it in action: barcode web scanner >

  • Server-Side Scanning

    With this method, users access the webpage via their mobile browsers, take a snapshot or load an existing one, upload it to the server, and the server then decodes the barcode content. Afterward, the server returns the decoded result to the user. You can see a demonstration of server-side barcode scanning here.

This post focuses on a client-side solution for web-based barcode scanning from mobile browsers using Dynamsoft’s JavaScript barcode reader SDK.

FREE DOWNLOAD Dynamsoft Barcode Reader 30-day trial    

Reading Barcodes in the Web Using Mobile Cameras

Dynamsoft’s JavaScript Barcode Reader SDK, based on WebAssembly technology, enables you to read barcodes from a live video stream within desktop and mobile browsers. It offers real-time localization and decoding from a live camera feed. The SDK supports various barcodes, including:

See it in action: QR code web scanner >

Hello World

The JavaScript SDK allows you to integrate barcode and QR code scanning effortlessly into your browser-based workflow. With this, your customers and employees won’t need to download an app on their mobile phones, making the process simpler and faster.

Below is a basic ‘Hello World’ example demonstrating how to implement this:

<!DOCTYPE html>
<html>

<body>
    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.3.1/dist/dbr.js"></script>
    <script>
        // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.3.1&product=dbr&package=js to get your own trial license good for 30 days. 
        Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
        // Initializes and uses the SDK
        (async () => {
            let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
            scanner.onFrameRead = results => {
                if (results.length > 0) console.log(results);
            };
            scanner.onUniqueRead = (txt, result) => {
                alert(txt);
            };
            await scanner.show();
        })();
    </script>
</body>

</html>

Integrating an Online QR Code Scanner into Your Application

As an enterprise-grade barcode scanning SDK, the Dynamsoft Barcode Reader SDK can help you embed barcode reading functionality seamlessly into your applications. Whether you’re a developer looking to streamline your work process, or a business wanting to simplify your user interface, this SDK can provide the solution you need. Contact us to learn more or try our 30-day free trial to explore its features on your own.