QR Coder Scanner not showing anything on iOS app

Hi there, I’m including a QR code scanner in my mobile app and decided to go with @Mitch-Pragmaflow’s option that’s been installed onto my page. I understand the scanner won’t show on anything that isn’t Native, but even on my iOS app test (screenshotted), it shows the same blank result as if I was viewing it on Adalo’s preview.

My guess is I need to install Pragmaflow’s component to request permission to use the phone’s camera? If that is the case, I will be jumping on that solution as soon as their market is up again. But in the meantime, I was not sure if this was in fact the correct solution.

Many thanks

Hmmm… That is very odd. I looked at the code (link below) and the QR scanner is supposed to ask for camera permissions. We will investigate and resolve if something is wrong. I do not think the permission manager is needed, we can solve the issue with the QR scanner without the marketplace.

Thanks for making us aware.

2 Likes

Much appreciated! For context, my setup for the scanner is pretty simple. The scanned QR code will pull up a modal to set a name for the new item and take you back to the home page (or exit out with the ‘x’ before a QR code is scanned)

but for previewer and android is working? I had the same problem, but for all, not only for iOS.

The scanner will never work in previewer since it has to be tested on a Native application. I have only been testing it on an iPhone and right now it does show up anything else than what’s in the screenshots. I have not been able to try on Android

We just took the one from the marketplace, locked the version, then published. Now that you have raised issues we will resolve by tomorrow. Thanks for the report

3 Likes

Many thanks for looking into this!

@alexbarciog @Henrikcox I have modified and tested on web and Android, I don’t have an iOS. Please retest and let me know.

@alexbarciog this component seems to have never worked on web, it does now.

I added a new parameter called something like use in editor so you can enable the camera in editor mode.

So this should now work in most PWAs. iOS is a little tricky for PWA because the camera is disabled by default, same with Safari.

I just deleted & re-added the QR code scanner component to my app, deleted the bookmark from my iOS, and redownloaded it.

Unfortunately, it looks like it’s still not pulling up correctly (the attached image is a screenshot directly from my iPhone). It doesn’t automatically ask for permission to use my camera, and as you say I’m sure it’s because the camera is disabled by default.

Do I need to re-install the component from your marketplace?

Just to clarify, I am testing this as a progressive web app, not as an official iOS application. I’m trying to set up testflight right now and see if that works

I believe that was my mistake. Can you reload your app if you have it open, confirm that you see the Run QR scanner in editor mode (to ensure you are using the right component) then try again. You should see your camera on in preview mode, or blank. You should not see the QR icon

image

Yes! Can confirm I have the version that runs in editor

It looks like it is working. I see EOS Webcam Utility rather than the QR icon. Continue testing and let me know the results. If something still is not right let me know and we can fix it up.

Next test result from the PWA on my iPhone: the QR scanner asks permission automatically to use my camera (!!), but opens up my front camera to face me with no option to flip or use the back camera which would be easier for scanning the QR code. I also tried scanning the preview QR code to our application and it wasn’t being registered (screenshot attached). Not sure if that’s caused by the scanner or the QR code though

Did you wire up an action to it? See the video attached. I scanned an exp link so it didnt actually link anywhere but you see the url in the input field.

For the camera facing mode, I have added in a new option “Which camera would you like to use” which will let you choose. I am testing it now and there seems to be an issue with it not respecting my choice in PWA mode, but I am sure I will get that sorted.

Excuse my last point about it not picking up the QR code, I had just not added an action to the scanner for when a QR code is scanned. That part works great

Edit: Just saw you posted a reply with that suggestion, that was absolutely it. I also see the new option to choose which camera to use, and yes PWA is doing the same thing on my end right now

It’s taken a while to get the app up and running on testflight but I can finally test it as an iOS app. The screenshot of the QR code scanner page only shows a black screen where the camera should show what it sees. It did ask permission to use the camera when I first opened it, and on Adalo, the chosen camera is the rear one.

A small note to add, the front camera option in the PWA also seems like the camera image is flipped (ie. moving my phone right makes it look like the image is moving left)

After yesterday I opened up the testflight app to double-check my testing notes from yesterday. Right now pulling up the QR scanner does not ask for permission to use the camera, which is definitely why the screen is remaining black on the iOS app (as seen in the image above). Not sure why I said it was asking permission in yesterday’s last reply, I must have been mistaken.

Double checked the PWA, camera permission is asked for, both front and rear cams still the same (also image is still flipped as mentioned before) and have attached a couple screenshots on the PWA app from my iPhone below – I’ve added a small text at the top to tell when the front or rear cam was chosen.


we just tested and still only the front camera. We really need the Qrcode component.

Been offline for a day or two. Thanks for running some tests and reporting back. I will look into why this is happening today. I am sure we will get it sorted out and the community will be better for the efforts you are both putting in to resolving the issues.