Table of contents
Swift
Objective-C

Dynamsoft Barcode Reader JavaScript Edition

Dynamsoft Barcode Reader JavaScript Edition (DBR-JS) enables high-performance barcode scanning directly in web browsers—no native app required. Users simply visit your website and start scanning.

Why choose the JavaScript Edition?

  • Zero installation – Works instantly in any modern browser on desktop or mobile
  • Cross-platform – One codebase runs on Windows, macOS, iOS, Android, and more
  • Production-ready – Battle-tested in enterprise applications worldwide

Supported barcode formats: QR Code, Data Matrix, PDF417, Aztec, MaxiCode, Code 128, Code 39, EAN-13, UPC-A, GS1 DataBar, and 50+ more.

Installation:

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.4.2000/dist/dbr.bundle.js"></script>
# Or via npm
npm install dynamsoft-barcode-reader-bundle@11.4.2000

Browser support: Chrome 78+, Firefox 68+, Safari 14+, Edge 79+ (desktop and mobile). See full system requirements.

License: A built-in 24-hour trial license is used if no license is configured. For extended evaluation, request a 30-day trial license. For production use, contact sales.

How to Integrate

The Foundational API — centered on CaptureVisionRouter — is the primary and recommended way to use DBR-JS.

// A built-in 24-hour trial license is used if no license is configured
// Create a camera view and connect it to the page
let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
document.querySelector("#camera-view-container").append(cameraView.getUIElement());
let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);

// Set up the barcode reading pipeline
const router = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
router.setInput(cameraEnhancer);
router.addResultReceiver({
    onDecodedBarcodesReceived: (result) => {
        for (const item of result.barcodeResultItems) {
            console.log(item.text);
        }
    }
});

// Start scanning
await cameraEnhancer.open();
await router.startCapturing("ReadSingleBarcode");

Try it live on JSFiddle →

Why the Foundational API? It gives you full control over the entire capture pipeline: decoding, camera management, result filtering, UI, and seamless integration with other Dynamsoft products.

  • Modular and extensible – Start with barcode reading, then plug in document detection, label recognition, or ID parsing without re-architecting
  • Full customization – Control camera input, processing logic, scan region, UI, and output handling to match your exact use case
  • High performance – Shared computation across components enables real-time processing even in multi-step workflows
  • Intermediate result access – Inspect and react to in-progress data for validation, feedback, or adaptive processing

The Foundational API also supports decoding from static images — no camera required:

const router = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
const result = await router.capture("PATH-TO-YOUR-IMAGE", "ReadBarcodes_Default");
for (const item of result.items) {
    console.log(item.text);
}

BarcodeScanner (Official Simplified Wrapper)

BarcodeScanner is an official simplified wrapper built on top of the Foundational API. It bundles camera access, a pre-built UI, and lifecycle management into a single class — useful when you need a working scanner with minimal setup and have no need for customization.

new Dynamsoft.BarcodeScanner().launch().then(result => alert(result.barcodeResults[0].text));

Try it live on JSFiddle →

Roadmap notice: BarcodeScanner is officially maintained and fully supported throughout v11 with no planned breaking changes. Starting from v12, it will no longer be bundled as part of the DBR-JS product but will continue to be maintained as an official wrapper, which is distributed as a separate package. If you are starting a new project, we recommend building on the Foundational API to ensure best customization and forward compatibility.

Next Steps

Reference:

This page is compatible for: