Xiao Ling

Posted on Jun 25 • Originally published at dynamsoft.com

How to Build a Web Barcode Scanner App with HTML5 and JavaScript

#webdev #javascript #barcode #programming

The Dynamsoft Barcode Scanner JavaScript SDK is built on top of the Dynamsoft Capture Vision SDK, providing ready-to-use user interfaces and advanced APIs to simplify the development of web-based barcode scanner applications.

In this tutorial, you'll learn how to:

Integrate the SDK into your HTML5 + JavaScript app
Scan 1D/2D barcodes from a live camera or a file (JPEG, PNG, or PDF)

Demo: JavaScript Barcode Scanner

Live Demo

Try the Online Barcode Scanner

Documentation

Dynamsoft Barcode Scanner Documentation

Online Barcode Generator

Use this online barcode generator to create 1D/2D barcodes for testing:
https://yushulx.me/barcode-qrcode-generator/

Prerequisites

License Key: Get a FREE 30-day trial.

JavaScript Barcode Scanner SDK: Include the dynamsoft-barcode-reader-bundle in your HTML page:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.bundle.js"></script>

Dynamsoft Document Viewer: Include the Dynamsoft Document Viewer in your HTML page for PDF conversion.
```
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ddv.js"></script>
```

Getting Started: "Hello World" Barcode Scanner

With just a few lines of JavaScript, you can quickly implement a fully functional barcode scanner in your web app.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dynamsoft Barcode Scanner</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.bundle.js"></script>
</head>

<body>

    <script>
        const barcodeScannerConfig = {
            license: "LICENSE-KEY",
            scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
            showResultView: true,
        };
        const barcodeScanner = new Dynamsoft.BarcodeScanner(barcodeScannerConfig);

        (async () => {
            const result = await barcodeScanner.launch();
        })();
    </script>
</body>

</html>

Replace LICENSE-KEY with your own license key, then run the code in your browser. The barcode scanner will open a camera view for scanning barcodes in real-time and display the results in a results panel.

Embedding the Barcode Scanner into a Custom HTML Element

Customizing the barcode scanner and embedding it into existing HTML elements is straightforward.

Follow the steps below to embed the barcode scanner into a custom HTML element:

Create a container element for the scanner.

CSS

#divScanner {
    border: 1px solid #ccc;
    transition: all 0.3s ease;
}

#container {
    width: 100%;
    height: 100%;
}

HTML

<div id="divScanner">
    <div id="container"></div>
</div>

Instantiate the scanner object by specifying the container property.

const container = document.getElementById("container");
const divScanner = document.getElementById("divScanner");

let BarcodeScanner = new Dynamsoft.BarcodeScanner({
        license: licenseKey,
        container: container,
    });

function resizeScanner() {
    divScanner.style.width = window.innerWidth * 0.5 + "px";
    divScanner.style.height = window.innerHeight * 0.5 + "px";
}

resizeScanner();

Taking Over the Barcode Result Display

In the Hello World example, you can't handle barcode results until the launch() promise resolves. To instantly display the results in a custom UI element, you can use the onUniqueBarcodeScanned() callback and hide the default result view.

<textarea id="result" placeholder="Scan result will appear here..." readonly></textarea>

const resultArea = document.getElementById("result");

barcodeScanner = new Dynamsoft.BarcodeScanner({
        license: licenseKey,
        scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
        container: container,
        onUniqueBarcodeScanned: (result) => {
            if (!result) {
                resultArea.value = "No barcode found.\n";
            }
            else {
                resultArea.value += "Text: " + result.text + "\n";
                resultArea.value += "Format: " + result.formatString + "\n";
            }
        },
        showResultView: false,
    });

Reading Barcodes from Image Files and Drawing Barcode Locations

The JavaScript Barcode Scanner SDK provides a decode() function to read barcodes from a single image file. The implementation is as follows:

Load an image file as a Blob and draw it on a canvas element.

CSS

#imageContainer {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    text-align: center;
    margin: 0;
    max-height: none;
}

#imageContainer canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

HTML

<input type="file" id="file" accept="image/png,image/jpeg,application/pdf" />
<div id="divScanner">
    <div id="container"></div>
    <div id="imageContainer"></div>
</div>

JavaScript

document.getElementById("file").onchange = async function () {
        imageContainer.style.display = "none";
        const files = Array.from(this.files || []);
        if (files.length) {
            try {
                let fileToProcess = files[0];

                let blob = await readImage(fileToProcess);
                imageContainer.innerHTML = "";

                const imageUrl = URL.createObjectURL(blob);

                const img = new Image();
                img.onload = async function () {
                    const canvas = document.createElement("canvas");
                    const ctx = canvas.getContext("2d");

                    canvas.width = img.width;
                    canvas.height = img.height;

                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

                    imageContainer.appendChild(canvas);
                    imageContainer.style.display = "block";

                };
                img.src = imageUrl;
            } catch (error) {
                console.error("Error processing file:", error);
                resultContainer.innerHTML = `<p>Error: ${error.message}</p>`;
            }
        }

    };

async function readImage(fileToProcess) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();

            reader.onload = async function (e) {
                try {
                    const blob = new Blob([e.target.result], { type: fileToProcess.type });

                    resolve(blob);
                } catch (error) {
                    reject(error);
                }
            };

            reader.onerror = () => {
                reject(new Error("FileReader failed to read the file."));
            };

            reader.readAsArrayBuffer(fileToProcess);
        });
    }

Call decode() function to detect barcodes from the blob object.

let blob = await readImage(fileToProcess);

let result = await barcodeScanner.decode(blob);

Display barcode results and draw barcode locations on the canvas.

if (!result || !result.barcodeResultItems) {
    resultArea.value = "No barcode found.\n";
} else {
    resultArea.value = "";
    result.barcodeResultItems.forEach(item => {
        resultArea.value += "Text: " + item.text + "\n";
        resultArea.value += "Format: " + item.formatString + "\n";

        let localization = item.location;

        ctx.strokeStyle = '#ff0000';
        ctx.lineWidth = 2;

        let points = localization.points;
        ctx.beginPath();
        ctx.moveTo(points[0].x, points[0].y);
        ctx.lineTo(points[1].x, points[1].y);
        ctx.lineTo(points[2].x, points[2].y);
        ctx.lineTo(points[3].x, points[3].y);
        ctx.closePath();
        ctx.stroke();
    });
}

Reading Barcodes from PDF Files

The JavaScript Barcode Scanner SDK doesn't contain a built-in PDF rasterizer. To read barcodes from PDF files, you can first convert PDFs to images using the Dynamsoft Document Viewer.

Initialize the Dynamsoft Document Viewer and create a document object.

await Dynamsoft.DDV.Core.init();
currentDoc = Dynamsoft.DDV.documentManager.createDocument({
    name: Date.now().toString(),
    author: "DDV",
});

Load PDF files and save pages as JPEG images.

const reader = new FileReader();

reader.onload = async function (e) {
    try {
        const blob = new Blob([e.target.result], { type: fileToProcess.type });

        const source = {
            fileData: blob,
            renderOptions: {
                renderAnnotations: "loadAnnotations"
            }
        };
        currentDoc.deleteAllPages();
        await currentDoc.loadSource([source]);
        const settings = {
            quality: 100,
            saveAnnotation: false,
        };

        const image = await currentDoc.saveToJpeg(0, settings);
        resolve(image);
    } catch (error) {
        reject(error);
    }
};

reader.onerror = () => {
    reject(new Error("FileReader failed to read the PDF file."));
};

reader.readAsArrayBuffer(fileToProcess);

Update the readImage() function to handle both images and PDFs.

async function readImage(fileToProcess) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();

        reader.onload = async function (e) {
            try {
                const blob = new Blob([e.target.result], { type: fileToProcess.type });

                if (fileToProcess.type !== "application/pdf") {
                    resolve(blob);
                    return;
                }

                const source = {
                    fileData: blob,
                    renderOptions: {
                        renderAnnotations: "loadAnnotations"
                    }
                };
                currentDoc.deleteAllPages();
                await currentDoc.loadSource([source]);
                const settings = {
                    quality: 100,
                    saveAnnotation: false,
                };

                const image = await currentDoc.saveToJpeg(0, settings);
                resolve(image);
            } catch (error) {
                reject(error);
            }
        };

        reader.onerror = () => {
            reject(new Error("FileReader failed to read the PDF file."));
        };

        reader.readAsArrayBuffer(fileToProcess);
    });
}