Camera won't launch on iOS PWA

[HugoRieth]

Describe the bug
Camera won't open on iOS in webApp.
When the scanner is launched, the camera won't open when the website is in 'PWA mode'.
This works fine when the scanner is launched on the actual page in Safari/other browsers, but breaks with a WebAppCapable-enabled site (Full-screen page accessible from home-screen).

To Reproduce
Steps to reproduce the behavior:

1. Have a page include the tag <meta name="apple-mobile-web-app-capable" content="yes">
2. Add the page to the home-screen (On safari: Share button > Add To Home Screen)
3. Tap 'Request camera', scanner launches but camera is not visible.

Expected behavior
When camera permissions are accepted, the camera should open without a problem, as it does on a regular safari website.

Additional context
• I have tried doing the same with www.scanapp.org (which supports the web-app-capable tag) – same problem occurs.
• On iOS, there's a camera indicator icon that pops up in the top left when the camera is in use. When the scanner is enabled, it briefly pops up, but then disappears in less than a second.

[danmaevsky]

I am facing the same issue right now. My team and I are developing a React app that uses the barcode scanner, and it works fine when visiting our site through Safari. However, when adding the website to the homepage via the process you described above, the same issue occurs. A flash of the camera icon, it disappears, and then a blank scanner element. When we tap "Stop Scanning", an error pops up saying "TypeError: Argument 1 ('child') to Node.removeChild must be an instance of Node", so I believe that the issue has to do with mounting/rendering the Scanner to the DOM when in PWA mode.

Edit:
I have an update. The scanner fails to work in PWA mode on iOS 16.0, but seems to work fine on iOS 16.3

[mahmudph]

hi. i also have same issue the camera scanner is not showing when i have added to the home screen on iOS 16.4.

[HugoRieth]

Edit: I have an update. The scanner fails to work in PWA mode on iOS 16.0, but seems to work fine on iOS 16.3

it seems the issue has been resolved for me too… I have no idea what I did to fix it, perhaps iOS updated in the background. I’m running iOS 16.3 right now, and it works fine… this is weird

[ROBERT-MCDOWELL]

nothing is weird, IOS constantly fixing their mistakes especially with their browser and javascript engine since years now.

[yolcho]

IOS 16.4.1 not working in PWA. May work for the first time after adding to home screen and then not work

[Givolp]

Has anyone managed to solve this problem yet?
Could you post the solution?

[danmaevsky]

Has anyone managed to solve this problem yet?
Could you post the solution?

I have not been able to solve it permanently, it just sort of stopped happening. It takes a restart of my iPhone to get it to reset and work again. PWA on iOS is just bugged. For example, my React application had issues with the keyboard no longer showing up when I tapped into an input. I would have only the frame of the keyboard but none of the letters appearing. Took a restart to get it work again, whereas the browser version worked flawlessly. I doubt this is an issue with HTML5 Qr Code honestly

[Givolp]

I need to resolve this somehow, users are already complaining!
I already reset the iphone but the problem persists. It works fine the first time it enters, but when I exit the application and return, the camera does not appear and when I click on Stop Scanning, the error appears as mentioned: "TypeError: Argument 1 ('child') to Node.removeChild must be an instance of Node"
And just as the problem disappeared in your case, it can reappear again, so it is important that we resolve it definitively. What do you think?

[nelisgz]

There is a Webkit bug report for this, with similar reproducible examples. Show your support here https://bugs.webkit.org/show_bug.cgi?id=252465

[BradleyDavel]

I need to resolve this somehow, users are already complaining! I already reset the iphone but the problem persists. It works fine the first time it enters, but when I exit the application and return, the camera does not appear and when I click on Stop Scanning, the error appears as mentioned: "TypeError: Argument 1 ('child') to Node.removeChild must be an instance of Node" And just as the problem disappeared in your case, it can reappear again, so it is important that we resolve it definitively. What do you think?

Have any of you found a solution to this error? I keep on getting the sam problem when running it inside an ios webkitview. It is haunting me at this point.

[Nervo24]

I need to resolve this somehow, users are already complaining! I already reset the iphone but the problem persists. It works fine the first time it enters, but when I exit the application and return, the camera does not appear and when I click on Stop Scanning, the error appears as mentioned: "TypeError: Argument 1 ('child') to Node.removeChild must be an instance of Node" And just as the problem disappeared in your case, it can reappear again, so it is important that we resolve it definitively. What do you think?

Same issue on iPhone 14 with Safari 😢

[Tjerk-Haaye-Henricus]

Same here

[ssjblue197]

if your app doesn't need to use service worker then remove it, and it will work perfectly. I checked and found that even if you register a service worker that does nothing, the same problem will occur. This error is caused by ios operating system.

[swiftpodteam]

if your app doesn't need to use service worker then remove it, and it will work perfectly. I checked and found that even if you register a service worker that does nothing, the same problem will occur. This error is caused by ios operating system.

if you don't use service worker, it's a perfect choice

[rajp-bacancy]

Has anyone got any solution?
I'm using PWA in safari. When i install it first it works fine then after some time it doesn't work at all . After restarting my device it started working again.

[srosato]

There is a Webkit bug report for this, with similar reproducible examples. Show your support here https://bugs.webkit.org/show_bug.cgi?id=252465

@rajp-bacancy I had the exact same issue on my own PWA. I went on the aforementioned webkit forums to see that this exact issue has been reported as fixed on iOS 17+, which was released at the end of September.

I went ahead and upgraded my own devices to 17.1.1 and I was no longer able to reproduce the camera bug when using my app as a PWA, which was very critical to my app. What a relief.

[OwenMelbz]

We're getting similar issues on ios 17.4 now, The camera launches then the page completely freezes and cannot do anything until i quit the app/webpage and try again (which it then freezes on) I can replicate on scanapp.org too

[qcasey]

Been searching for days now, my NextJS PWA freezes when loading the camera since ~04/17. Only on a specific model of iphone and only when installed to home.

I can replicate on scanapp.org too

Same, scanapp.org freezes when installed to home screen but not in the browser.

This makes me think it's another webkit/ios issue

[ROBERT-MCDOWELL]

you really should report all IOS possible issues to apple developers as html5-qrcode depends 100% of the JS engine sandbox and cannot be in any case responsible of a hardware bug on specific model and OS, unless if the javascript code fails at 100% so we can say it's certainly an html5-qrcode bug.

[OwenMelbz]

you really should report all IOS possible issues to apple developers as html5-qrcode depends 100% of the JS engine sandbox and cannot be in any case responsible of a hardware bug on specific model and OS, unless if the javascript code fails at 100% so we can say it's certainly an html5-qrcode bug.

Not that what your saying is wrong, BUT...

1. Let's face it, Apple won't do anything for people who have current projects, this isn't a solution.
2. People who maintain these libraries "tend" to be more experienced/knowledgable in the area of their packages, so are more likely to know workarounds or ways they can solve it.

So yeah it's probably an Apple issue, but that doesn't help anybody, which is why they're looking for solutions here.

[ROBERT-MCDOWELL]

"Let's face it, Apple won't do anything for people who have current projects, this isn't a solution."
this is not how you must see the things, IOS/webkit developers without any user issue reported won't fix any problem. also keep in mind that Webkit is open source so it offers no guarantee of any kind if bugs.
"So yeah it's probably an Apple issue" -> it is!
"People who maintain these libraries "tend" to be more experienced/knowledgable in the area of their packages"
How did you conclude that? it does not make sense at all.
Search on IOS/Webkit community and you will certainly find how to report your issue.
Many people here using html5-qrcode don't have a clue (because they are not developers or they lack in knowledge) that html5-qrcode has no way to solve an hardware problem since javascript engine depends itself of OS drivers and cannot in any way do anything to solve it. For example, many people in this repo complained about the zoom which does not appear on their device and report an issue here... They don't have at least the reflex to say that maybe the zoom is not accessible from the JS engine because of the camera drivers.... this is an example among many others of this type and this is recurrent since years now.

[qcasey]

I don't think this is something html5-qrcode can fix, or even workaround. I've tried other react libraries like https://github.com/adamalfredsson/react-zxing and https://www.npmjs.com/package/@yudiel/react-qr-scanner and they exhibit the exact same issue.

I only posted here because it seems to be the same bug from the same change Apple made last week.

[ROBERT-MCDOWELL]

Guys I don't really like to repeat myself, but again this is a golden rule in web development:

• There is no way to solve any hardware problem or behavior in Javascript engine into a browser or applications, unless if it includes native access to the hardware drivers like javascript in nodejs or indeed react native etc...

[qcasey]

Guys I don't really like to repeat myself, but again this is a golden rule in web development:

I'm agreeing with you pal, no need to patronize.

Webkit bug (for now): https://bugs.webkit.org/show_bug.cgi?id=273046