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:

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 in the basics/ folder (hello-world.html, scan-a-single-barcode.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, 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/.

• basics/ - Three foundational samples: hello-world, scan-a-single-barcode, and read-an-image.

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

• frameworks/ - Framework-specific examples demonstrating how to integrate Dynamsoft Barcode Reader into common web and hybrid frameworks.

This repository ships an AI coding skill that gives GitHub Copilot, Claude, and Codex deep knowledge of the Dynamsoft Barcode Reader JavaScript SDK — so you can describe what you want and get working code instantly.

The skill lives in:

.github/skills/dbr-js-sample-creator/   ← GitHub Copilot (auto-discovered)
.claude/skills/dbr-js-sample-creator/   ← Claude Code (auto-discovered)
.codex/skills/dbr-js-sample-creator/    ← OpenAI Codex (auto-discovered)

No installation or configuration needed — just clone the repo and open it in your AI-enabled editor.

Open your AI agent (e.g. GitHub Copilot Chat in agent mode) and try:

• "Create a plain HTML barcode scanner that reads from camera and shows results"
• "Build a React component that scans barcodes with proper cleanup"
• "Make a Vue 3 page that decodes barcodes from an uploaded image"
• "Write an ES6 module barcode scanner using the CDN .mjs bundle"
• "Scan QR codes only using a custom JSON template"

The agent will automatically load the skill and generate correct, production-ready code using the right SDK version, license key, API patterns, and framework conventions — without you needing to read any documentation.

• frameworks/ - Framework-specific examples demonstrating how to integrate Dynamsoft Barcode Reader into common web and hybrid frameworks.

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

• API Docs

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

• hello-world.html — Demonstrates continuously scanning and collecting multiple unique barcodes via camera.
• scan-a-single-barcode.html — Demonstrates single-barcode scanning: stops and returns as soon as the first barcode is detected.
• 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.
• maui-blazor-hybrid/ — MAUI Blazor Hybrid (.NET) 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.
• tip-and-beep/ — Camera scanning with rotating tip messages and beep feedback on successful detection.
• 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-dpm-codes/ — Demo for reading Direct Part Mark (DPM) codes etched or marked on surfaces.
• 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.
• grid-barcode-reading/ — Scan a grid of DataMatrix / QR codes from an uploaded image with fast scan, layout analysis, and deep decode.
• use-typescript-in-ui-definition/ — Uses React as the framework for business logic, TypeScript for the UI definition script portion, and imports the UI definition JS in UMD format.
• 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!