This repository contains multiple samples that demonstrates how to use the Dynamsoft Barcode Reader JavaScript Edition for creating web-based barcode scanning applications.
Cloning the full repository may be slow due to its extensive history. To get started quickly, you have a few options:
git clone https://github.com/Dynamsoft/barcode-reader-javascript-samples.git --depth 1
Note
If you expect unstable network conditions or prefer to work entirely offline, you can download the offline package from Dynamsoft website. This includes the full repository and all required dependencies for offline use.
Running the Samples Locally
Opening HTML files directly may not work as expected. Instead, run a local development server. Here’s a quick method using Visual Studio Code:
-
Install the Five Server extension from the VS Code Marketplace.
-
Right-click on
hello-world.htmland select "Open with Five Server". This will serve the application athttp://127.0.0.1:5500/hello-world.html.
A default 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 Dynamsoft website to evaluate further.
For the developer guide and full API reference of Dynamsoft Barcode Reader JavaScript library, please check out the documentation.
If you have any questions, feel free to contact Dynamsoft support.
Scan single barcode
Get the basic features working with plain/native JavaScript or within a framework like Angular, React or Vue, with RTU-BarcodeScanner APIs.
- Scan Single Barcode - run↗: Scan single barcode from video stream with minimum code in JavaScript.
- Scan And Search - run↗: Scan a barcode to retrieve the relevant product information from the database in JavaScript.
- Hello World in Angular: Read single barcode from camera in an Angular application.
- Hello World in React: Read single barcode from camera in a React application.
- Hello World in Vue: Read single barcode from camera in a Vue application.
Scan multiple barcodes
- Scan Multiple Barcodes - run↗: Scan barcodes from video stream with minimum code in JavaScript.
- Cart Builder - run↗: Simulates a shopping experience where users scan barcodes to add items to a dynamic cart in JavaScript.
Hello World
Get the basic features of the library working with plain/native JavaScript or within a framework like Angular, React or Vue, etc.
- Hello World - run↗: Scan barcodes from video stream with minimum code in JavaScript.
- Read an Image - run↗: Decode barcodes from images in mobile album or desktop file system.
- Hello World in Angular: Read barcodes from camera and images in an Angular application.
- Hello World in Blazor: Read barcodes from camera and images in a Blazor application.
- Hello World in React: Read barcodes from camera and images in a React application.
- Hello World in React using Hooks: Read barcodes from camera and images in a React application and use the Hooks charactor of React.
- Hello World in Vue: Read barcodes from camera and images in a Vue 3 application.
- Hello World in Next.js: Read barcodes from camera and images in a Next.js application.
- Hello World in Nuxt: Read barcodes from camera and images in a Nuxt application.
- Hello World in Electron: Read barcodes from camera and images in a Electron application.
- Hello World in PWA: Decode video stream in a PWA application from a webcam or a built-in camera.
- Hello World with RequireJS - run↗: Decode video stream in an application using RequireJS from a webcam or a built-in camera.
- Hello World with ES6 - run↗: Decode video stream in an application using ES6 from a webcam or a built-in camera.
- Hello World in WebView: Decode video stream in an application in WebView from camera.
Use Cases
- Read Video and Fill a Form - run↗: Read barcodes to fill a form.
- Read a Driver's License - run↗: Read the PDF417 barcode on a driver's license (AAMVA compliant) and parse it.
- Show Result Texts on the Video - run↗: Read barcodes via camera and show result texts on the video.
- Locate an Item with Barcode - run↗: Find a specific item in a large collection by scanning its unique barcode
Others
- Debug: Collect the actual image frames for debugging purposes.
- Official Online Demo: Official demo for Dynamsoft Barcode Reader JavaScript Edition (written in Vue). Take our barcode scanner demo and see how it works in different modes!