How To Put A Qr Code Scanner In Bubble App

QR & Bar Code Reader Plugin

Introduction

This plugin enables smooth and seamless QR and Bar code reading functionality in your Bubble app. For a better quality of scanning please make sure there is sufficient lighting in the room and QR/Barcodes are of good quality.

Please note that on iOS devices the plugin works only in Safari browser.

How to setup

Installation

Place any of the elements on page in order to access plugin's actions and states. Configure the element proprieties and actions in the application. Get result.

Visual Elements

The plugin has 3 visual elements (Barcode Reader, QR Code Reader and GenerateQR) which should be placed on page in order to use the actions/states etc :

1. Barcode Reader

This is element is used to scan Barcode formats. Place the element on page provide the proprieties and use the actions. Supports reading the following formats:

2. GenerateQR

This is element is used to generate a QR formatted image from inputted values. The width and height of the generated QR can be customized in action.

Installation

Place the elements on page in order to access plugin's actions and states. Configure the element proprieties and actions in the application. Get result.

3. QR code reader

This is element is used to scan QR format.

Place the element on page in order to access the plugin actions and proprieties.

Element 1. Barcode Reader

Proprieties

Show Location Showing a box around detected barcodes, if bar-code was read successfully, a line in the middle will appear. This may slowdown processing time.

Choose a type of reader type. Auto option - provides Auto detection.

If choosing auto there are possible clashes, or false-positives.

Frequency: Controls the scan-frequency of the video-stream. Defines the maximum number of scans per second. By default is 10.
Camera Mode: Camera to use, frontal('selfie') camera or back camera of the device.
Successful detection sound: Sound to play at successful detection.

For iOS you have to touch the page anywhere at least once to activate sound auto playing, otherwise the sound will be blocked.

Plugin States

Result Format Result Code Result Image

Events

Code detected - An event that fires when a code is found

Actions

Start live Decoder - Can be triggered anywhere, on button click or page load

Stop live Detector - Can be triggered anywhere, on button click or page load

Scan local image - For scan uploaded image Properties: Image - for uploading an image.

Element 2. GenerateQR

Actions

Generate QR code - Generates new QR code

Generated Image Size (Set the Width and Height of final generated image)
Text (Input data to encode QR code)

Plugin States

Generated Image: Generated QR code in base64 format. Can be downloaded or uploaded anywhere or shown as image on page.

Element 3. QR code Reader

Currently not supported for all devices with iOS 14 or higher.

Proprieties

Camera Mode: Camera to use, frontal('selfie') camera or back camera of the device.
Successful detection sound: Sound to play at successful detection.

Plugin States

Result Code - result of QR reader Result Content - Content of QR reader

Events

Code detected - An event that fires when a code is found.

Actions

1 .

Start live Decoder - Can be triggered anywhere, on button click or page load
2 .

Stop live Decoder - Can be triggered anywhere, on button click or page load

Changelogs

Divided one element into two new ones. QR and barcode readers now in separate elements. Fixed bug on iOS

Update: 21/06/2021 - Version 1.21.0

Fixed a problem with the QR scanner on Android OS

Update: 18/11/2021 - Version 1.23.0

Added a new action to turn on/off the flashlight on mobile devices, if any (not supported in iOS).

Demo to preview the settings