Browser Hub Demo
Barcode Detection API
It enables lightweight scanner flows for logistics, ticketing, onboarding, payments, and physical-to-digital bridges without a native app.
Perception APIs
What this unlocks
Detect QR codes and barcodes directly in-browser from uploaded or camera-captured images. Mostly Chromium-based at the moment. Browsers without support should fall back to manual code entry or server-side scanning.
Barcode Detection API
Detect QR codes and barcodes directly in-browser from uploaded or camera-captured images.
This demo uses uploaded images so it works without camera permissions. In production the same detector can power live camera-based flows.
Detection result
Upload a QR code or barcode screenshot to test detection.
No decoded value yet.
Use cases
Real product scenarios
These are the kinds of workflows where the API earns its complexity.
QR onboarding and magic-link handoff.
Barcode Detection API helps when the browser needs to move beyond plain navigation and forms.
Warehouse and inventory scanning tools.
Barcode Detection API helps when the browser needs to move beyond plain navigation and forms.
Ticket validation and event check-in flows.
Barcode Detection API helps when the browser needs to move beyond plain navigation and forms.
Shipping notes
Progressive enhancement rules
Browser capability work is product design work. Support levels, permissions, secure context requirements, and fallback behavior matter as much as the demo itself.
Camera and image access still need good permission UX.
Mostly Chromium-based at the moment. Browsers without support should fall back to manual code entry or server-side scanning.
Plan a manual fallback for unsupported devices or unreadable images.
Mostly Chromium-based at the moment. Browsers without support should fall back to manual code entry or server-side scanning.
More demos
Related browser capabilities
Continue through the hub to see how other modern APIs can reshape UX, device integration, and workflow design.
Native utilities
EyeDropper API
Sample any on-screen color with the system picker and pipe it back into the web app.
Open EyeDropper APINative utilities
Web Share API
Hand off links, text, and sometimes files to the device’s native share sheet.
Open Web Share API