Skip to content

README.md

Latest commit

 

History

History
124 lines (86 loc) · 6.94 KB

README.md

File metadata and controls

124 lines (86 loc) · 6.94 KB

📦 Scan Multiple Barcodes Samples

🚀 1. Hello World

This sample demonstrates how to use the BarcodeScanner API from the Dynamsoft Barcode Reader JavaScript SDK to scan multiple barcodes continuously from a video stream in a web application.

✨ Features

  • Scan multiple 1D/2D barcodes
  • Live video decoding using BarcodeScanner component
  • Easy integration into your web application
  • UI rendered into a customizable container

🔧 How It Works

The sample uses the BarcodeScanner class to launch a scanner and decode barcodes from a camera stream. The key configuration includes:

  • License Key – Required to activate the SDK.
  • engineResourcePaths – Points to required resources hosted on a CDN or locally.
  • UI container – An HTML element where the scanner is rendered.
const config = {
  license: "YOUR-LICENSE-KEY",
  engineResourcePaths: {
    // feel free to change it to your own path
    rootDirectory: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/",
  },
  container: ".barcode-scanner-view",
  scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
  showResultView: true,
  showUploadImageButton: true,
  scannerViewConfig: {
    showCloseButton: true
  },
};

The BarcodeScanner instance is created and launched like this:

const barcodeScanner = new Dynamsoft.BarcodeScanner(config);
barcodeScanner.launch();

📌 Notes

  • This sample scans multiple unique barcodes, you can configure scanMode to change the behavior to scan one single barcode.
  • To avoid network-related loading issues, consider hosting all required resources locally.

🛒 2. Cart Builder

This sample simulates a shopping experience where users scan barcodes to add items to a dynamic cart.

✨ Features

  • Scan multiple 1D/2D barcodes
  • Live video decoding using BarcodeScanner component
  • Floating and draggable scanner window.
  • Dynamic cart updates on each scan.

🔧 How It Works

The scanning logic mirrors the Hello World sample, but scanned results populate the cart instead of just displaying in the result view.

The UI features a "Scan Barcode" button, a styled cart, and basic interactivity with vanilla JavaScript and CSS.

A list of 20 dummy products is used, with each scan randomly adding a product to the cart showing its name, shortened barcode, and price.

🛒 3. Batch inventory

This project is a simple web-based inventory management tool that uses BarcodeScanner to scan barcodes in batches and provide real-time analysis of the scanned data.

✨ Features

  • Automatically deduplicate barcodes in each session

  • Show session summary:

    • Total unique barcodes
    • Barcode type distribution
    • Session duration

  • Track duration of each scan session

🔧 How It Works

  • The scanner is embedded using BarcodeScanner with SM_MULTI_UNIQUE mode to capture unique barcodes.

  • Once the scan completes, the results are analyzed.

  • You can click the back arrow to restart scanning.

📌 Notes

  • The barcode value must be unique, otherwise it won’t be counted.

  • Applicable scenarios may include:

    • Warehouse inventory checks
    • Retail stock intake
    • Barcode-based asset tracking
    • Batch QR code scanning

📄 See other BarcodeScanner samples

Multiple samples are provided for single barcode scanning. These samples can be easily adapted to scan multiple unique barcodes by simply updating the config object.