Forum Academy Marketplace Showcase Pricing Features

[New Plugin] QR Code Scanner

Showcase
#1

Aft’noon / mornin / evenin,

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.

You can view a demo of this plugin in action @ https://qr-code-scanner.bubbleapps.io/

The plugin page can be viewed @ https://bubble.io/plugin/qr-code-scanner-1593701658260x162495678044438530

It’s FREE so give it a whirl and let me know how you get on!

Stuart B

7 Likes
#2

Good plugin - Demo can be changed with bubble store plugin, Currently it uses a private test plugin

#3

The plugin QR Code Scanner / action Start a QR Code Scanner threw the following error: anonymous
https://dhtiece9044ep.cloudfront.net/package/run_js/214f09fbcb2e2812807f7e44c6363e2f662b8db9bffe91c4f5adf0c351baae93/xfalse/x9:14:518991
[email protected]https://dhtiece9044ep.cloudfront.net/package/run_js/214f09fbcb2e2812807f7e44c6363e2f662b8db9bffe91c4f5adf0c351baae93/xfalse/x9:14:507801 (please report this to the plugin author)

Error on scan (IOS Device, Safari Agent)

#4

Hi, thanks for your message.

Which version of iOS are you running? Is this error received on the first scan or after doing a few successful ones?

Thanks,

Stuart B

#5

IOS 14.2, Error appears on First Scan itself

#6

Thanks for letting me know. I will try and get a hold of an Apple device running iOS 14.2 to see if I get the same behaviour.

#7

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:

image
image700×339 118 KB

#8

Hi @talkingoldfish Great plugin.

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.

Thanks,
George

#9

I have a problem with this plugin. It works great until I have scanned 20 codes in a row. After that it generates an error:

Screenshot 2021-05-04 at 13.13.18
Screenshot 2021-05-04 at 13.13.18936×404 59.8 KB

Screenshot 2021-05-04 at 13.13.50
Screenshot 2021-05-04 at 13.13.501818×1360 763 KB

#10

hello @talkingoldfish aka Stuart

I set up back camera, it is ok on my Android with Chrome, but on Iphone SE or Iphone 6 with Safari, it is the front camera that is open.

An idea to fix this ? Detect browser maybe ?

Thank you

1 Like
#11

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.

#12

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.

Stuart B

3 Likes
#13

Thanks so much!
Really looking forward to using the new version of the plugin.

#14

Thank you for adding AZTEC codes :slight_smile:

#15

If anyone has chance to test this before I put the update live I would really appreciate it.

The new version can be tested @ https://qr-code-scanner.bubbleapps.io/version-test

I would really value any feedback you may have.

Thanks,

Stuart B

#16

Just tried the new version and it works fine on Android. :+1:
Don’t have direct access to an iphone myself atm but I will have someone in my team try it out later today.

#17

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.

#18

Tried the upload option and it worked fine.
I don’t have a use case for it but I’m sure it can come in handy for someone.

1 Like
#19

@melon @Maciej @gnelson @quantumind @anders.eidergard1 @Sarah_Esteve

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.

2 Likes
#20

Thank you for all these improvements. I can’t wait to make the updates.

George

1 Like