requirejs

Hello World Sample for RequireJS (Decode via Camera)

RequireJS is a JavaScript file and module loader that implements the AMD (Asynchronous Module Definition) API. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a RequireJS application using the foundational API to decode barcodes from a live camera stream.

In this guide, we will be using dynamsoft-barcode-reader-bundle 11.4.2000.

Note:

If you're looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a comprehensive guide that provides detailed instruction and best practices for a seamless integration into any frameworks!

Additionally, we're here to help! Please don't hesitate to contact us for any support or questions you might have.

Official Sample

• Hello World in RequireJS (Decode via Camera) - Source Code

Usage

Open requirejs.html in a web browser (via http:// or https:// protocol, not file://).

Features

This sample demonstrates:

• Using RequireJS to load the Dynamsoft Barcode Reader bundle
• Creating a CameraEnhancer instance for camera control
• Creating a CaptureVisionRouter instance for barcode scanning
• Implementing result filtering to remove duplicates and unchecked results
• Displaying decoded barcode results in real-time

Implementation Highlights

RequireJS Module Loading

requirejs(
  ["https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.4.2000/dist/dbr.bundle.js"],
  ({
    Core: { CoreModule },
    License: { LicenseManager },
    Utility: { MultiFrameResultCrossFilter },
    CVR: { CaptureVisionRouter },
    DCE: { CameraView, CameraEnhancer },
  }) => {
    // Your code here
  }
);

Camera Setup

const cameraView = await CameraView.createInstance();
const cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
document.querySelector("#camera-view-container").append(cameraView.getUIElement());

Barcode Scanning

const cvRouter = await CaptureVisionRouter.createInstance();
cvRouter.setInput(cameraEnhancer);
await cvRouter.startCapturing("ReadSingleBarcode");

📌 Customization

For more advanced customization options, please check the official documentation.

📄 Support

If you have any questions, feel free to contact Dynamsoft Support.