A compact demo that helps pick the correct item from several candidates by scanning barcodes. The sample uses the Dynamsoft Barcode Reader bundle to decode barcodes from camera or image input and demonstrates a simple match-and-highlight UX.
index.html— main demo page.index.css— styles for the demo.package-label.png— sample product label used by the demo.
- Field-specific Camera Activation Open the camera individually for different fields.
- Manual control when to start decoding Start decoding manually after aiming at the target to reduce the risk of misreads and missed barcodes.
- Auto-Fill with Scan Result Automatically populates input fields with scanned barcode values.
- Click the "Open Camera" button to activate the camera.
- Aim at the sample image shown below.
- Click the "Decode" button to start barcode recognition.
- If only one barcode is detected, its value will be automatically filled into the corresponding field. If multiple barcodes are detected, the video stream will freeze, and you'll need to manually select one from the decoded results to fill in.
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
index.htmland select "Open with Five Server".
- This usage is especially suitable for scenarios with densely packed barcodes, where secondary confirmation or manual selection is highly needed.
- You can find a sample reference image in ·./pick-one-to-fill/·