DEV Community

Xiao Ling
Xiao Ling

Posted on • 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/dynamsoft-barcode-reader-bundle@10.5.3000/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/dynamsoft-document-viewer@2.1.0/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/dynamsoft-barcode-reader-bundle@10.5.3000/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>
Enter fullscreen mode Exit fullscreen mode

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.

html5-barcode-scanner-hello-world

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:

  1. 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>

  2. 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();

    javascript-barcode-scanner-custom-ui

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>
Enter fullscreen mode Exit fullscreen mode 
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, });
Enter fullscreen mode Exit fullscreen mode

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:

  1. 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); }); }

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

    let blob = await readImage(fileToProcess); let result = await barcodeScanner.decode(blob);

  3. 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.

  1. 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", });

  2. 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);

  3. 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); }); }

Source Code

https://github.com/yushulx/javascript-barcode-qr-code-scanner/tree/main/examples/barcode_scanner_rtu

Top comments (0)