A demo that overlays decoded barcode text directly onto the live camera video. Useful for UX patterns that require visual confirmation of decoded results in context.
index.html— demo page that overlays decoded text on video.
- Live camera decoding with on‑video text overlays
- Map decoded bounding boxes to overlay positions
- Visual feedback for multiple simultaneous detections
- The scanner decodes frames and returns results with coordinates.
- The demo maps result coordinates to the video element and renders text labels/boxes at the corresponding positions.
- Labels update in real time as the scanner finds or loses targets.
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".
- Use steady lighting and keep barcodes within the camera view for stable overlays.
- Run on localhost/HTTPS to allow camera access.