How to Scan Barcodes Online with JavaScript and HTML5

The Dynamsoft Barcode Scanner JavaScript SDK (v10.5) 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)

What you’ll build: A vanilla JavaScript HTML5 online barcode scanner web app that streams a live camera feed, scans 1D/2D barcodes in real time, and also reads barcodes from uploaded JPEG, PNG, and PDF files - all using the Dynamsoft Barcode Scanner SDK with no framework dependencies.

Key Takeaways

  • You can scan barcodes online by running a JavaScript barcode scanner in the browser, either from a live webcam feed or from uploaded image and PDF files.
  • The Dynamsoft Barcode Scanner SDK v11.x provides a drop-in BarcodeScanner class that launches a fully functional camera-based scanner with a single launch() call - no manual camera stream setup required.
  • The onUniqueBarcodeScanned callback and showResultView: false option let you replace the built-in result panel with your own UI element while keeping the SDK’s camera logic intact.
  • Barcode reading from static image files is handled via barcodeScanner.decode(blob), which accepts any Blob including JPEG and PNG loaded with the FileReader API.
  • PDF barcode scanning requires first rasterizing the PDF to a JPEG using the Dynamsoft Document Viewer SDK (DDV.Core.init() + saveToJpeg()), since the barcode scanner has no built-in PDF parser.

Common Developer Questions

How do I scan a barcode online in a web browser?

Use an HTML5 page with the Dynamsoft Barcode Scanner JavaScript SDK. Include the SDK script, create a Dynamsoft.BarcodeScanner instance with a license key, and call launch() to open the camera-based online barcode scanner in the browser.

How do I add a JavaScript barcode scanner to a plain HTML5 web page without React or a framework?

Include dynamsoft-barcode-reader-bundle from a CDN, instantiate Dynamsoft.BarcodeScanner, and optionally pass a container element if you want the scanner embedded in your own layout instead of launched as the default full scanner UI.

How do I read barcodes from a PDF file in the browser using JavaScript?

Convert the PDF page to an image first with Dynamsoft Document Viewer, then pass the generated image Blob to barcodeScanner.decode(blob). The barcode scanner decodes images, so PDF support requires rasterizing each page before barcode recognition.

How do I draw the barcode location bounding box on a canvas element after decoding?

After calling barcodeScanner.decode(blob), read each result item’s location.points array and draw the four-point polygon on the same canvas that displays the source image.

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 30-day free 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>

Step 1: Add a “Hello World” Barcode Scanner in 10 Lines

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>

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

Step 2: Embed the Barcode Scanner into a Custom HTML Container

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.

     #divScanner {
     border: 1px solid #ccc;
     transition: all 0.3s ease;
 }
    
 #container {
     width: 100%;
     height: 100%;
 }

     <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

Step 3: Handle Barcode Results in a Custom UI Element

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

Step 4: Read Barcodes from Image Files and Highlight Locations on Canvas

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. 
     #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;
 }

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

     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();
     });
 }

Step 5: Convert a PDF File to an Image and Read Its Barcodes

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

Common Issues & Edge Cases

  • Camera permission denied or no devices found: Browsers require a secure context (https:// or localhost) before getUserMedia grants camera access. Serving the page over plain http:// will silently block the camera and launch() will throw. Always serve via HTTPS in production or use localhost for local development.
  • decode() returns no results on a valid image file: The Blob’s MIME type must match the actual file content — passing { type: 'image/png' } for a JPEG will cause the SDK to misparse the header. Use file.type directly from the File object rather than hardcoding the type string.
  • PDF pages after the first page are not scanned: The saveToJpeg(0, settings) call in the PDF flow only rasterizes page index 0. To scan a multi-page PDF, loop over currentDoc.getPageCount() and call saveToJpeg(i, settings) for each page index, then call decode() on each returned blob separately.

Conclusion

You can scan barcodes online by combining an HTML5 page, browser camera access, and the Dynamsoft Barcode Scanner JavaScript SDK. The same web app can scan live webcam frames, decode uploaded image files, rasterize PDF pages for barcode recognition, and draw barcode locations on a canvas without adding a frontend framework.

Source Code

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