This repository contains multiple samples that demonstrate how to use the Dynamsoft Barcode Reader JavaScript Edition for creating web-based barcode scanning applications.

When deploying your application/website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons:

• Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
• Dynamsoft License requires a secure context to work.

Some browsers like Chrome may grant access for http://127.0.0.1 and http://localhost or even for pages opened directly from the local disk (file:///...). This can be helpful for temporary development and testing.

The following table is a list of supported browsers based on the above requirements:

¹ Devices running iOS need to be on iOS 14.5+ for camera video streaming to work in Chrome, Firefox or other apps using webviews.

Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK.

A default trial license is included which allows you to test the sample apps for up to 24 hours. You can request a 30-day trial license via the Dynamsoft website to evaluate further.

Cloning the full repository may be slow due to its extensive history. To get started quickly, you have a few options:

• Download as zip
• Download as tar.gz
• Shallow clone with Git:

git clone https://github.com/Dynamsoft/barcode-reader-javascript-samples.git --depth 1

The standalone samples (hello-world.html, read-an-image.html) and scenario samples load the SDK from a CDN, so you can open them directly by double-clicking — no web server required (an internet connection is needed).

To browse all available samples, open index.html in your browser — it links to every sample in the repository.

For framework samples, follow the instructions in each subfolder's README (typically npm install then npm run dev).

If you need a web server for standalone or scenario samples (for example, to serve SDK resources from a local dist/ folder), here's a quick method using Visual Studio Code:

1. Install the Five Server extension from the VS Code Marketplace.

2. Right-click on an HTML file and select "Open with Five Server". This will serve the application at http://127.0.0.1:5500/.

The repository includes two main sample directories:

• frameworks/ - Framework-specific examples demonstrating how to integrate Dynamsoft Barcode Reader into common web and hybrid frameworks. Each framework folder contains one or more runnable sub-examples (such as scan-using-foundational-api and/or scan-using-rtu-api) showing practical integration patterns.

• scenarios/ - Focused scenario samples that show common real-world uses of Dynamsoft Barcode Reader.

The SDK provides two approaches for integrating barcode scanning capabilities:

The RTU API offers the quickest path to a working barcode scanner (Recommended for most users):

• One-line integration – Launch a full scanner with a single API call
• Built-in UI – Pre-designed viewfinder and scan region highlighting
• Simple configuration – Customize behavior through intuitive config objects

If you are looking for a fully customizable barcode decoding library with complete control over the scanning process and UI, you are welcome to use the Foundational APIs.

For the developer guide and full API reference of Dynamsoft Barcode Reader JavaScript library, please check out the documentation.

• Barcode Scanner API Docs
• Foundational API Docs

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

• hello-world.html — The simplest example to get started with single barcode scanning.
• read-an-image.html — Demonstrates how to decode and read barcodes from uploaded image files.

• angular/ — Angular examples.
• blazor/ — Blazor (.NET) examples.
• capacitor/ — Capacitor mobile hybrid examples.
• electron/ — Electron desktop examples.
• es6/ — Plain ES6 module examples.
• native-ts/ — Native TypeScript examples.
• next/ — Next.js examples.
• nuxt/ — Nuxt examples.
• pwa/ — Progressive Web App examples.
• react/ — React examples.
• requirejs/ — RequireJS (AMD) examples.
• svelte/ — Svelte examples.
• vue/ — Vue examples.
• webview/ — Native WebView examples for Android/iOS.

• pick-one-to-fill/ — Picking the correct one from multiple candidates by scanning barcodes.
• cart-builder/ — Single-page demo illustrating adding scanned items into a shopping cart.
• scan-and-search/ — Example that scans a barcode and performs a lookup/search operation.
• show-result-texts-on-the-video/ — Overlay decoded text on live video while scanning.
• batch-inventory/ — Batch scanning workflow for inventory collection and export.
• read-a-drivers-license/ — Demo for reading and parsing a driver's license image/data.
• read-vin/ — Demo for reading and parsing a VIN (vehicle identification number) code.
• read-and-parse-GS1-AI/ — Example showing GS1 AI parsing and data extraction.
• scan-qr-code/ — QR code targeted demo and settings.
• scan-common-1D-and-2D/ — Demo configured to detect a wide range of barcode formats.
• scan-common-2D-codes/ — Focused on common 2D barcode formats decoding.
• scan-datamatrix-code/ — DataMatrix code targeted demo with optimized settings.
• scan-1D-Retail/ — 1D retail barcode tuning example.
• scan-1D-Industrial/ — 1D industrial barcode tuning example.
• scan-from-distance/ — Demo for scanning barcodes from a distance (zoom/ROI tuning).
• locate-an-item-with-barcode/ — UI to help locate items with barcodes in a list or layout.
• debug/ — Debug utilities and a small server (frame collector) used for testing and troubleshooting.

• Official Online Demo: Try the Dynamsoft Barcode Reader JavaScript Edition demo (written in Vue) and see how it works in different modes!