# QR Code scanner for Web App

**URL:** <https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997>\
**Category:** Questions about Thunkable X\
**Created:** [July 9, 2021, 7:33pm UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997 "2021-07-09T19:33:56Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![bnice](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bnice/32/110648_2.png) [@bnice](https://community.thunkable.com/u/bnice)\
**Post date:** [July 9, 2021, 7:33pm UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997/1 "2021-07-09T19:33:56Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [July 9, 2021, 9:23pm UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997/2 "2021-07-09T21:23:29Z")

</div>

If that doesn’t work, you should be able to take the photo, upload to cloudinary, then use an Api [like](https://goqr.me/api/doc/read-qr-code/) 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.

---

<div class="post-metadata">

**Author:** ![bnice](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bnice/32/110648_2.png) [@bnice](https://community.thunkable.com/u/bnice)\
**Post date:** [July 9, 2021, 10:43pm UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997/3 "2021-07-09T22:43:18Z")

</div>

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

 ![CodeSnip](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/2/529ceb288f35c2458ab5f7064af213e6ed6cb1b8.png)

---

<div class="post-metadata">

**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\
**Post date:** [July 9, 2021, 10:47pm UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997/4 "2021-07-09T22:47:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bnice](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bnice/32/110648_2.png) [@bnice](https://community.thunkable.com/u/bnice)\
**Post date:** [July 9, 2021, 10:48pm UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997/5 "2021-07-09T22:48:52Z")

</div>

I did that too, no luck. I found this [Camera access on mobile web app](https://community.thunkable.com/t/camera-access-on-mobile-web-app/1012921), which sounds like is my problem.

---

<div class="post-metadata">

**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\
**Post date:** [July 9, 2021, 10:50pm UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997/6 "2021-07-09T22:50:14Z")

</div>

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

[Thunkable](https://x.thunkable.com/copy/078cbe0835d40520030c6477e2773bee) ← copy link for testing yourself  
[https://thunkable.site/w/yDZjeT1fR](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).

---

<div class="post-metadata">

**Author:** ![bnice](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bnice/32/110648_2.png) [@bnice](https://community.thunkable.com/u/bnice)\
**Post date:** [July 9, 2021, 10:52pm UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997/7 "2021-07-09T22:52:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\
**Post date:** [July 9, 2021, 10:53pm UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997/8 "2021-07-09T22:53:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bnice](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bnice/32/110648_2.png) [@bnice](https://community.thunkable.com/u/bnice)\
**Post date:** [July 9, 2021, 10:55pm UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997/9 "2021-07-09T22:55:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bnice](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bnice/32/110648_2.png) [@bnice](https://community.thunkable.com/u/bnice)\
**Post date:** [July 9, 2021, 11:00pm UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997/10 "2021-07-09T23:00:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\
**Post date:** [July 9, 2021, 11:10pm UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997/11 "2021-07-09T23:10:39Z")

</div>

> [@bnice](#):
>
> my app works on iOS but crashes on Android, and I have users for both.

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.

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [July 9, 2021, 11:31pm UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997/12 "2021-07-09T23:31:43Z")

</div>

> [@catsarisky](#):
>
> 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 per

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

[![](https://i.vimeocdn.com/video/1185385292-6387cec27ae015b067fe86feea9897cf576fa28a55faff5038e7e22be34ef63c-d?f=webp "Untitled") ](https://vimeo.com/573229680)

---

<div class="post-metadata">

**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\
**Post date:** [July 9, 2021, 11:34pm UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997/13 "2021-07-09T23:34:10Z")

</div>

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?

> **[How to access webcam and take photo with JavaScript](https://bensonruan.com/how-to-access-webcam-and-take-photo-with-javascript/#webcam-easyjs_demo)**
>
> I had built a npm module webcam-easy.js, which provides an easy to use JavaScript module that can access webcam and take snapshot photo.

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.

---

<div class="post-metadata">

**Author:** ![bnice](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bnice/32/110648_2.png) [@bnice](https://community.thunkable.com/u/bnice)\
**Post date:** [July 9, 2021, 11:36pm UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997/14 "2021-07-09T23:36:48Z")

</div>

This is my same issue.

---

<div class="post-metadata">

**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\
**Post date:** [July 10, 2021, 12:04am UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997/15 "2021-07-10T00:04:39Z")

</div>

> [@catsarisky](#):
>
> 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.

This takes pictures on iPhone: [webcam-js](https://cathysarisky.github.io/web/camtest.html#)

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

---

<div class="post-metadata">

**Author:** ![bnice](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bnice/32/110648_2.png) [@bnice](https://community.thunkable.com/u/bnice)\
**Post date:** [July 10, 2021, 1:35am UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997/16 "2021-07-10T01:35:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\
**Post date:** [July 10, 2021, 1:38am UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997/17 "2021-07-10T01:38:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 1:19pm UTC](https://community.thunkable.com/t/qr-code-scanner-for-web-app/1387997/18 "2024-11-08T13:19:50Z")

</div>


