[New Plugin] QR Code Scanner

talkingoldfish · 2021-10-12T12:31:50.561Z

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

anders.eidergard1 · 2021-10-12T13:22:18.896Z

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

Maciej · 2021-10-13T07:15:48.816Z

Thank you for adding AZTEC codes

talkingoldfish · 2021-10-13T13:09:44.841Z

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

anders.eidergard1 · 2021-10-14T05:41:20.004Z

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.

talkingoldfish · 2021-10-14T11:12:00.666Z

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.

anders.eidergard1 · 2021-10-14T18:05:50.393Z

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.

talkingoldfish · 2021-10-15T19:21:57.027Z

@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.

gnelson · 2021-10-15T20:04:47.564Z

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

George

anders.eidergard1 · 2021-10-19T09:04:46.711Z

For some odd reason I can’t get the new version of the component to appear in my app.
I upgraded the plugin to the new version but it’s still the old component no matter what I do.
Tried these things so far:

Upgraded, deleting all QR Scanner components and dragged a new one to my page
Uninstalled and re-installed the plugin
Copy the component from your demo-site (yes, I know, but it was worth a try)

No matter what I do it is still the old version (see screenshot below) of the component.
I can see the “Select QR Image” button in the middle when running in version-test so something is upgraded but it seems not completely so.
Is there anything else I need to do?

image290×630 56.4 KB

talkingoldfish · 2021-10-20T09:14:58.711Z

That is bizarre! I added this to a new app the other day too and I didn’t even have to delete the old instance, it just threw up a few errors about the Content state not being valid (because it’s been re-created).

Can you (as a test) create a brand new app and add the plugin to see if the new version is added?

It sounds to me like one for Bubble support as I can’t see how that should happen!

anders.eidergard1 · 2021-10-20T13:18:10.274Z

Waiting game apparently worked as the updated plugin is now all the way there.
No idea why it behaved in that strange way but when I tried it just now in a new app it was the new version of the plugin.
Went back to the app I’m implementing it in and it was also the new version.

Maybe some server sync thing on the bubble side of things.

Everything works now and the plugin looks and works great.
Thanks @talkingoldfish !

talkingoldfish · 2021-10-20T13:20:21.432Z

Great news, I am working on a small update to allow Auto-Aspect Ratio so you don’t have to work it out every time, although I’m having a few issues with that on iOS15

Sarah_Esteve · 2021-10-29T23:25:42.306Z

hello @talkingoldfish ! My side, the new version doesn’t work unfortunatly. QR Content is empty

I use an android phone. With old version it is ok. What is strange is it has worked just once ! I stored in the qr the unique id of a data entry.

talkingoldfish · 2021-10-30T08:09:39.552Z

That’s strange, does it register a code each time you scan with your phone on the test app at https://qr-code-scanner.bubbleapps.io ?

Are there any errors in your app relating to the QR Content state?

Thanks

Sarah_Esteve · 2021-10-31T09:28:09.614Z

I finally make it work! Maybe there were something with the old version, at one moment I had the newest version and the property editor was the old one. thank you @talkingoldfish !

jose.a.ribeiro.73 · 2021-11-01T01:05:53.845Z

Hi @talkingoldfish

The problem that some users referred of having updated the plugin and seeing elements of former version of the plugin is a cache problem. I also had that issue. Using Ctrl + F5 in Windows system solves that problem.

However, I have an issue that I would appreciate your help/comment.
I can read a QR code that is an email address. In QRCodeScanner A’s QR Content the email address is stored. I can see it, if I insert a text element with QRCodeScanner A’s QR Content as content in the web page.
If I try to select an user in User Data Type, using Do a search for User: first item with the constraint email = QRCodeScanner A’s QR Content the result is empty.
Can you explain why that happens and, if this is the expected behaviour, how can we select an user?

jose.a.ribeiro.73 · 2021-11-01T02:33:48.084Z

Well, I turn around this issue, saving QRCodeScanner A’s QR Content as text and not as an user email.

jose.a.ribeiro.73 · 2021-11-01T02:37:48.073Z

Hi @talkingoldfish ,

When trying to scan a QR code, the plugin gave the following error. It is strange, because it was working fine.

The plugin QR Code Scanner / action Start a QR Code Scanner threw the following error: ReferenceError: Html5Qrcode is not defined
at eval (PLUGIN_1593701658260x162495678044438530/QR-Code-Scanner-element_action–QR-Code-Scanner-Start-.js:19:25)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/af993028f0b9380c81c7e09a1ce86933e5dd5fcdb53f1aa46230f58c3b443167/xfalse/x15:6:2252922 (please report this to the plugin author)

talkingoldfish · 2021-11-01T12:04:19.614Z

Good afternoon,

I find this occurs when the element is hidden before you need to use it. If you show the element, add a pause, then start it it may work?

The Html5Qrcode variable isn’t defined until the element is shown in the page.

I had a similar issue with the old version using popup boxes.

Did you manage to sort the other issue with the email address? The QR Content state will only ever return text but you should be able to search for a user using the QR Content result.