QR Code scanner for Web App

Hello all,
I am building an app that uses a QR code/barcode scanner. I also recently bought a PRO membership so I can more easily distribute my app. I notice that the QR/Barcode scanner is not an available feature for web apps. Does anyone have any suggestions on how to incorporate a QR code/barcode reader? I am just using it to scan data into something like a text box in my app. Thanks!

If that doesn’t work, you should be able to take the photo, upload to cloudinary, then use an Api like to decode the image.

The biggest issue that you will experience using this process is that you cannot control the image size being sent to cloud Ineri. We have zero control over the file size of the images transmited. This means that the initial upload might take a few seconds, but after that completing The api call to decode the qr should be very quick.

I think I have everything in correctly, but it is not letting me take the physical picture. Any thoughts?

I’d start by testing a very simple call to the camera - does that work alone (in a separate project)? It’s possible that you’ve previously told your browser that it cannot have camera access (or that your default security settings do so), and so calling the camera is failing as a result.

I did that too, no luck. I found this Camera access on mobile web app, which sounds like is my problem.

Here’s a super simple project that works with my desktop web browser…

Thunkable ← copy link for testing yourself
https://thunkable.site/w/yDZjeT1fR ← published web app.

It works on my iphone in thunkable live but NOT when viewed as a web app with safari on the same phone (although I did get the web app permission to use the camera).

This works on my desktop, but not my phone. I care more about the phone. I can to the same conclusion.

Is installing an app a possibility?

Otherwise, the user could manually take a photo (using the phone’s native camera app) and then upload it into the web app – probably – but that sounds clunky.

For whatever reason, my app works on iOS but crashes on Android, and I have users for both. But the web app works for both, except for a few features like the camera.

The QR code is a shortcut, so by the time they do an upload, the other ways would get them there faster.

So it might be worth trying to solve that problem, if no one else has a good solution to the camera not working on phones with the web app.

This is strange. It asks for permissions to the camera using chrome on iPhone 11 but doesn’t go beyond.

Here’s a website with a javascript webcam photo implementation. It works in a browser on my iphone. I don’t know if it’ll work in a webviewer page in a thunkable web app in a phone browser, but it might be worth a try?

Nope, that doesn’t work. Next (goofy) idea: Publish the webapp. Put it in an iframe. Outside the iframe, put the javascript for taking pictures. Communicate between outer javascript and webapp in an iframe using the web viewer’s send/receive message functionality.

1 Like

This is my same issue.

This takes pictures on iPhone: webcam-js

But I don’t yet know how well it’ll play with thunkable in an iframe

I am not super familiar with how to set up iframes. (I am sure I did this wrong), but I tried sticking it in a web viewer and it didn’t work.

No, it won’t work in a web viewer. You’d have an html page (opened with your browser). On that page would be both an iframe containing the webapp and the JavaScript for taking a picture.