I’ve just released another new plugin because, ya know, why not? This is my QR Code Scanner plugin (to complement my Colour QR Generator plugin), because I was using Javascript to perform this but it’s so much easier with a plugin!
This plugin enables you to scan QR codes using any camera on your device.
To use the plugin you need to add the QR Code Scanner element to the page wherever you want your video preview window for the QR scanner. In the editor of this plugin you can change the following options:
Camera Type (Manual / Back / Front)
Manual Camera ID
Background Scan (whether to continue scanning when the tab is no longer active)
Mirror Image (whether to flip the image horizontally - useful for front selfie cameras)
Detection Beep
Stop on Detection
Rescan Period (amount of seconds between rescans of same QR code)
Scan Period (period in frames between scans)
Save Image to DB (whether to save the image frame used to decode the QR to the db)
Filename
Once the QR Scanner becomes active on the page it will enumerate a list of cameras on your device and this can be accessed via the Cameras state. You can used the cameras index (starting at 0) in this list to set it as a Manual Camera ID. Eg. Your cameras have been enumerated to the Cameras state as:
Front
Back
External
To start the Front camera you would set the Manual Camera ID to 0; the Back camera would be 1; and the External camera would be 2 (etc.). I have included an example of a way to select this within the app on the demo app
You can start / stop the scan easily in the workflow via an Element Action.
Hi @talkingoldfish,
is it possible to spread functionality of your great app? I need to scan AZTEC code. It is placed on car registration document like below:
I have a question. I’m using an iphone and when the page loads it asks for permission to access the camera, yet I have no workflow on page load. Is it possible to prevent that message? The user already gets the message when he clicks a button to scan, so that makes two times the user has to accept that request.
I have the same problem.
My current workaround is to enable manual camera change and just list the available cameras in a repeating group so the user can select the right camera themselves.
Not ideal ofc but the only way I’ve found so far that actually works on iOS.
Having the same problem as @quantumind with error messages, but only on iPhone.
Android works like a charm every time all the time.
Ok, apologies for not replying to these messages, however I am now close to a fix for most (if not all) of the issues you are having on iOS.
I say fix, I have actually re-written all of the code for this plugin to port it across from Instascan to the excellent html5-qrcode library, which is an actively maintained Javascript library with updates up to last month! It is currently supported on all versions of Android and all versions of iOS up to and including iOS15!
To go through your issues in turn:
BUG FIX - Issue with scanning in iOS 14.2 (@melon)
I have tested the new version of the plugin in iOS 14.7.1 (and iOS15) and it is working as expected.
ENHANCEMENT - Adding AZTEC code scanning to plugin (@Maciej)
I have added this functionality and tested with a few AZTEC codes online to confirm it is working correctly.
ENHANCEMENT - Remove camera permissions request on load (@gnelson)
I have moved the Get Cameras function into a new Action that can be added to your workflow if required. This is useful if you want to list out the cameras to allow the end user to choose which one is required.
BUG FIX - Scanning ~20 QR codes in a row causes a crash (@quantumind / @anders.eidergard1)
Tested with new plugin scanning ~50 QR Codes in a row on an iOS 15 device and this works as expected.
Back Camera not opening correctly on iPhone (@Sarah_Esteve / @anders.eidergard1)
Tested with new plugin setting Front / Back / Manual and all cameras work as expected across all platforms.
It isn’t all sunshine and rainbows though, unfortunately, this will be a BREAKING CHANGE so care will need to be taken before incorporating it into any Bubble apps that already use this plugin (eg. camera permissions now need to be sought via a new action and will not be requested on page load by default). Also, I am no longer able to save the QR image at all, so if you still need that functionality you may not be able to upgrade to this change.
I am hoping this will be live by this weekend as I still need to do a little more refining and testing.
Just tried the new version and it works fine on Android.
Don’t have direct access to an iphone myself atm but I will have someone in my team try it out later today.
That’s great news, please let me know how it goes. If you could also test the QR File upload option (via file system and camera upload) I would really appreciate it. The file upload option is configurable and can be removed altogether from the plugin options if required.
This new version is now LIVE, this is a BREAKING CHANGE and you will need to fix most of the defined states in your apps once you have upgraded, so please don’t @ me when that happens!
However, if you do have any other issues or find any pesky bugs please do let me know.
