A live camera that reads QR codes and barcodes, for both of Bubble’s worlds: a native element for mobile apps and a web element for browsers. The fields, states, events and actions have the same names on both sides, so a workflow written once runs on either.

Two elements, 17 fields, 10 states, 8 events and 10 actions.

• Live demo: https://plugins-demo-2.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=Home
• Editor: https://bubble.io/page?id=plugins-demo-2&test_plugin=1789243412579x878764742705676300_current&tab=Design&name=Home&type=page&elements=bTGNC

Quick start

1. Place the element. QR Scanner on a mobile page, QR Scanner (web) on a web page. Give it the size and corner radius you want — the scanner fills the element you drew.
2. Start it. Put a button on the page with the Start Scanner action, or tick auto_start.
3. See the result Enter a text string with the status to see the result, for example: QR Scanner's last code.

That is a working scanner. Everything below is optional.

On the web the page must be served over HTTPS for any browser to allow a camera. Bubble already does that. If your app is embedded in an iframe, that iframe has to allow the camera too.

What it reads

Every format the device can read, always. There is no list to configure.

The last_format state tells you which kind was just read (qr, ean13, code128…), so a workflow can treat a ticket and a product differently.

Fields

Every one has a default that works. A field you never touch does the right thing.

Scanning