QR Code reading capability within Bubble?

Hi there, fellow Bubblers!

I’ve been trying to research the possibility of incorporating a QR code reading capability within a Bubble app. I’ve looked into both the Bubble API Connector and Blockspring, and it seems like neither one of these are quite right (or even possible at all.) So far I’ve only found an API that detects/reads QR codes that are on the web (as opposed to via a mobile device out in the world).

Link: http://goqr.me/api/doc/read-qr-code/

There are several different SDK’s available for incorporating QR code reading capabilities into a mobile app build; however, it seems like it’s not possible with Bubble?

So far, in searching the forum/community, I have only found a couple posts regarding QR code generation (not readability).

My intent is to enable the app user to click on a button titled “scanner,” which then calls a QR code reading app that is on the user’s mobile device. After that QR code reading app completes reading the QR code on a product somewhere in a store, then the results would be returned back to the Bubble app and searched against the bubble database within the app.

If this doesn’t make sense, let me know!

So, my question is: Is it possible to enable my Bubble app to work with another app that is in the user’s mobile device? Or at least call the image processor (i.e. mobile phone’s camera) and read a QR code and return the results back to the Bubble app?

Thanks for any insight!

Jp

2 Likes

I´m looking for the same feature. Hope there is some solution. :grin:

Fairly simple if you are OK with uploading a photo of the QR code and then scanning.

https://buildingonbubble.com/block/qr-code-scanner-1469686113296x983831199370182700

I think having something embedded on a mobile web page … would be difficult.

Have you tried the API connector for this? With a file uploader you may be able to make it work. Worth trying.

“Reading QR codes using the mobile vision api.”

Very intrigued by this information; however, I am not a programmer or developer (oh woe to me!) I get the notion that Bubble is integrally web-based; therefore, everything happens through URL/HTTP requests (correct me if I’m wrong).

@emmanuel My idea is to enable or integrate QR Code reading capability with the Bubble platform. In order to try and save myself some research time, may I ask if this is feasible using the API connector?

In other words, could a QR code reader (assuming an api is available) be called from the Bubble app in order to scan a QR code AND save it as an image AND THEN send that captured image to the Bubble app to be processed? Or would the user be required to separately scan the qr code, save it as an image, then upload it to the bubble app to be processed?

Thanks for your insight, all!

Jp

@NigelG, thanks so much for that link! It just may have to do for a working conceptual prototype app…

The issue I think you have is the “scan the QR code” means … have access to your camera.

An external API can’t easily have access to a phone’s camera. If the QR reader app was installed on the phone, and you could use the API … that might work. But that is mobile phone dev stuff and totally beyond my understanding.

Okay, I’m now working on figuring out how to do QR reading capabilities via the API Connector. @NigelG, I checked that link you shared with me, and my issue is how do I make the “fileurl=” parameter be the url of the QR Code image that was just uploaded? I mean, assume that the user would upload different QR images after checking the data each time, that means the API Connector’s call would need a new “fileurl” parameter each time correct? or would the file uploader’s image be the same url every time, with each uploaded image replacing the previous image?

If you look at the plugin on the editor, you will see the URL is “Client Safe” …

… this means you can override it in your workflow. In this case the URL of the image you have just uploaded.

Thanks so much, @NigelG ! I appreciate your help. I was able to finally figure it out.

Hie jpatt. do u mind sharing how u got that done. i also need same functionality in my app. cheers

1 Like

Here are the steps I took to get it working.

  1. Install the Bubble API Connector
  2. Add a new API and name it anything you want. I used QR Reader
  3. Expand the API call and fill in the following
  1. Click initialize and configure the return datatype
  2. Save

The call is now ready to be used in a workflow. To use it, you will need a picture uploader object. Then

  1. Call the API action with the following parameter

  2. Then get the resulting data elements from the JSON object