QR Code Detection PWA Demo

Demo

Install the app, open it from your homescreen, then tap the button below to open the device's camera. Place a QR code in front of the camera to detect it.

Fun fact: this entire demo contains less than 50 lines of codes.

How it works

The Barcode Detection API takes an image as input, analyzes it then returns an array of codes detected in the image (if any). In this demo, we've limited the detection to QR Codes only but the API can also detect a variety of other barcodes formats.

Here, instead of a static image, we're using your device's camera as input. You could just as well use the Barcode Detection API with a static image file, although this is a less common use case.

The video stream is rendered on a canvas element, then each frame is passed to the Barcode Detection API, which alerts you whenever a QR code has been found.
Of course, in a real-life scenario, you'll likely want to redirect users to that URL or display some kind of UI on top of the video stream to indicate that a QR code has been detected. Note that QR codes can contain any type of text content — not just URLs.

Use cases

Here are a few types of PWAs you can build with the Barcode Detection API:

• QR Code Reader: Simply read QR codes and redirect to the browser
• Inventory Management App: A quick way to track products and stock.
• Point of Sale PWA: Create a fast checkout experience with barcode scanning.
• Product Info Lookup PWA: Retrieve product information in your PWA
• Coupon & Loyalty Programs Apps: Redeem coupons with QR codes.
• Event Check-in PWA: Manage events by scanning tickets from your PWA.
• Library Catalog PWA: Borrow and return books efficiently. No native app needed.
• Asset Tracking PWA: Monitor shipments and assets inside your PWA.
• Healthcare Management Apps: Accurate patient IDs and medication.
• Mobile Coupons PWA: Access special offers using QR codes.
• Access Control PWA: Secure entry with QR code scans.
• Educational Apps: Enhance learning with interactive QR codes.
• Tourist Guides: Explore landmarks using QR codes.
• Warranty Registration PWA: Register warranties via QR codes.
• Food Delivery PWA: Order food quickly from menus.

Browser support

The Barcode Detection API works natively with Chrome on Desktop and Android. Safari does not support this API on either MacOS or iOS.

Code

Links & Documentation

• Barcode Detection API on MDN