Forum Academy Marketplace Showcase Pricing Features

[New Plugin] QR Code Scanner

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

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

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)

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

IOS 14.2, Error appears on First Scan itself

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.

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:

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

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:


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