Dynamsoft Barcode Reader samples for the web

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

Request a trial license

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

Documentation

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

Support

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

Sample list

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: Scan barcodes from video stream with minimum code in JavaScript.
• Read an Image: Decode barcodes from images in mobile album or desktop file system.
• Hello World in Angular: Decode video stream in an Angular application from a webcam or a built-in camera.
• Hello World in React: Decode video stream in a React application from a webcam or a built-in camera.
• Hello World in React using Hooks: Decode video stream in a React application from a webcam or a built-in camera and use the Hooks charactor of React.
• Hello World in Vue: Decode video stream in a Vue 2 application from a webcam or a built-in camera.
• Hello World in Vue 3: Decode video stream in a Vue 3 application from a webcam or a built-in camera.
• Hello World in Next.js: Decode video stream in a Next.js application from a webcam or a built-in camera.
• Hello World in Nuxt: Decode video stream in a Nuxt application from a webcam or a built-in camera.
• Hello World in Electron: Decode video stream in a Electron application from a webcam or a built-in camera.
• Hello World in PWA: Decode video stream in a PWA application from a webcam or a built-in camera.
• Hello World with RequireJS: Decode video stream in an application using RequireJS from a webcam or a built-in camera.
• Hello World with ES6: 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.

Customize Camera UI

• Use the Default Camera UI: Show the default camera UI to decode video stream from a webcam or a built-in camera.
• Hide Display Controls: Hide built-in UI elements (camera selection, resolution selection, etc.) and show only the video stream.
• Set up External Controls: Use custom controllers to manipulate the Camera UI.
• Changing Size of Video Viewer: Enlarge the video stream temporarily to read a barcode.
• Customize the Camera UI: Show the custom camera UI to decode video stream from a webcam or a built-in camera.

Parameter Settings

How to configure different settings of the barcode scanning library.

• Formats and Count: Set the barcode formats and the number of barcodes to read per image/frame.
• Localization and Binarization: Set how localization and binarization are done during barcode decoding.
• Blurry or Small codes: Set DeblurModes and ScaleUpModes for decoding blurry or small barcodes.
• Deformed or Incomplete codes: Set DeformationResistingModes or BarcodeComplementModes for decoding deformed or incomplete barcodes.
• Define or Detect the Region: Set the region of interest manually or regionPredetectionModes to speed up the barcode reading process.
• Dense codes: Set dense template and high resolution for decoding dense barcodes.

Use Cases

• Read Video and Fill a Form: Read barcodes to fill a form.
• Read a Driver's License: Read the PDF417 barcode on a driver's license (AAMVA compliant) and parse it.
• Show Result Texts on the Video: Read barcodes via camera and show result texts on the video.

Others

• Debug: Collect the actual image frames for debugging purposes.