This directory contains sample applications and demonstrations for the Dynamsoft Barcode Scanner JavaScript SDK.
View All Live Demos - Try samples online without downloading!
samples/
├── index.html # Main navigation page - start here!
├── hello-world/ # Quick-start examples
├── scenarios/ # Real-world use case demonstrations
└── frameworks/ # Framework integration examples (coming soon)
Online: Visit https://dynamsoft.github.io/barcode-scanner-javascript/ to try all samples instantly.
Local: Open index.html in your browser to explore all available samples.
Simple standalone examples to get started quickly:
- hello-world.html - Continuously scan multiple unique barcodes via camera
- scan-a-single-barcode.html - Scan one barcode and stop
- read-an-image.html - Read barcodes from uploaded images
Real-world use case demonstrations organized by category:
- batch-inventory - Batch scanning for inventory management
- cart-builder - Shopping cart with barcode scanning
- pick-one-to-fill - Pick correct items from multiple candidates
- scan-and-search - Barcode scanning with lookup functionality
- scan-qr-code - QR code optimized scanning
- scan-common-2D-codes - Common 2D formats (QR, DataMatrix, PDF417)
- scan-common-1D-and-2D - Wide range of 1D and 2D formats
- scan-datamatrix-code - DataMatrix optimized
- scan-dpm-codes - Direct Part Mark (DPM) codes on metal/plastic
- scan-1D-Retail - 1D retail barcodes (EAN, UPC)
- scan-1D-Industrial - 1D industrial barcodes (Code 39, Code 128)
- read-a-drivers-license - Driver's license PDF417 reading and parsing
- read-vin - Vehicle Identification Number (VIN) reading
- read-and-parse-GS1-AI - GS1 Application Identifier parsing
- show-result-texts-on-the-video - Overlay barcode text on live video
- scan-from-distance - Distance scanning with zoom/ROI tuning
- locate-an-item-with-barcode - Locate items in lists/layouts
Integration examples showing how to use BarcodeScanner in popular frameworks:
- angular - Angular integration with TypeScript
- react - React integration with Vite
- vue - Vue 3 integration with Vite
- next - Next.js integration
- nuxt - Nuxt integration
- svelte - Svelte integration with Vite
- es6 - ES6 modules (CDN-based, no build process)
- native-ts - Native TypeScript with Rollup
- requirejs - RequireJS AMD modules (CDN-based)
- electron - Electron desktop app integration
- capacitor - Capacitor mobile hybrid app
- webview - Native mobile WebView integration
- pwa - Progressive Web App example
- blazor - Blazor WebAssembly integration
Each framework sample includes a README with setup and run instructions.
For detailed API documentation and guides, visit:
- Open index.html in your browser
- Browse the available samples
- Click on any sample to see it in action
- View the source code to understand how it works
- Adapt the code for your own use case
Most samples can be run directly in the browser without any build process!