ES6 modules allow you to use modern JavaScript features with native import/export syntax. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into an ES6 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.6.3200.

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.

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

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

This sample demonstrates:

• Using ES6 module imports 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

import {
  CoreModule,
  LicenseManager,
  CaptureVisionRouter,
  CameraView,
  CameraEnhancer,
  MultiFrameResultCrossFilter,
} from "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.6.3200/dist/dbr.bundle.mjs";

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

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

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

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