logo

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.
☝
Note: Please note that on iOS devices the plugin works only in the Safari browser.

How to setup

Installation
Place any of the elements on the page in order to access the 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 a 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 a page provide the proprieties and use the actions.
Supports reading the following formats:
  • Code128,
  • Code 93,
  • Code39,
  • Code39 vin,
  • EAN,
  • EAN-8,
  • Codebar,
  • UPC,
  • UPC-E,
  • i2OF5,
  • 2OF5

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 a page in order to access the 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 a page in order to access the plugin actions and proprieties.

Element 1. Barcode Reader

Proprieties

  • Show Location Showing a box around detected barcodes, if the barcode was read successfully, a line in the middle will appear. This may slow down processing time.
Image without caption
  • Barcode Type
Choose a type of reader type. Auto option - provides Auto-detection.
Image without caption
❗
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 loadStop live Detector - Can be triggered anywhere, on button click or page loadScan local image - For scan uploaded image Properties: Image - for uploading an image.

Element 2. GenerateQR

Image without caption

Actions

Generate QR code - Generates new QR code
Settings:
  • Generated Image Size (Set the Width and Height of the 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 an image on a page.

Element 3. QR code Reader

Image without caption
❗
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 - a 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
  1. Stop live Decoder - Can be triggered anywhere, on button click or page load

Changelogs

Update: 22/12/2020 –
  • Divided one element into two new ones. QR and barcode readers are 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).
Update: 27/11/2021 - Version 1.25.0
  • Added new action "Scan local image".
Update: 26/04/22 - Version 1.27.0
  • Fixed issue on android for Generate QR

Demo to preview the settings