QR CODE SCANNER

QR Code Scanner

Published July 2020

    •    Updated today

Plugin details

A QR / AZTEC code scanner that will allow you to scan from any camera on your device! You can choose the camera from a list enumerated from your device and use that to scan QR codes, or alternatively choose 'Front' or 'Back' and allow the plugin to find the correct camera. Alternatively you can pick the QR file from your device using the file picker.

The decoded text will be saved, and if the standard camera scanner is used the code format (ie. QR Code or AZTEC) will be stored also.

Please note, on iOS devices the scanning function will only work in Safari (because Apple!) However, you can still use the file picker (even with the 'Take Photo' option on a mobile device) in all browsers on any platform.

***IMPORTANT INFO FOR LATEST UPDATE***
This is a BREAKING CHANGE that certainly WILL break things in your application!!

The plugin has been completely rewritten from the ground up and I have had to recreate the plugin states so these will need to be redefined in your apps. They have the same names but your app will not be able to find them so you will just need to go through and fix all the issues to get it back working again. 

It is worth it because this version is much more stable and now SUPPORTS iOS15!

Free

For everyone

3.3 stars   •   43 ratings

15.4K installs

This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

Stuart B

Joined 2019   •   8 Plugins

View contributor profile

Instructions

Add the QRCodeScanner element to the page and this will also act as the video preview for the QR Code Scanner. The options can then be set on this element.

You start / stop the QR scanning via workflow element actions.

An action is also included to retrieve the current cameras on the device and store them in the 'Cameras' list state. These can be used to select the required camera. This has been added as an example in the demo page @ https://qr-code-scanner.bubbleapps.io

Once the QR Scanner has scanned a QR Code it will save the text to the 'QR Content' state.

Types

This plugin can be found under the following types:

Element   •   Event   •   Action

Resources

Support contact

Tutorial

Rating and reviews

Average rating (3.3)

Works the first time, second time error

November 20th, 2025

I have the same issue as the the other guy, the first time it works, when I try the second time it throws an error. After the pageload, it works again for one scan.

Awesome plugin!

April 1st, 2025

Clear, concise, and a pleasure to implement. You can't say that about all plugins!

Works sometimes!

May 22nd, 2024

Works fine on the first scan, when trying to do a second scan throws an error but no error code or error message.

Works almost perfectly!

May 14th, 2024

This plugin was very easy to implement in my bubble app. It works with all iPhone devices, but DOESN'T WORK with some older Android smartphones. On iPhone the user is asked for access the camera, but this doesn't happen with some older Android smartphone so the user just see a white spot instead of the QR code scanner. If the author of this plug in could fix that or give me some advice on how to fix that issue I will be happy to edit my review and give this plugin a full 5 Stars.

Broken

May 12th, 2024

When I try to start the plugin I get the following issue every time: The plugin QR Code Scanner / action Start a QR Code Scanner threw the following error: TypeError: instance.data.generatePreview is not a function at eval (PLUGIN_<UNIQUE_ID>/QR-Code-Scanner-element_action--QR-Code-Scanner-Start-js:4:19)