IOS 11 Safari NoVideoInputDevicesError about react-qr-reader

[tegozen]

use https pls

[nikhilwadhawana]

hello @JodusNodus ,

i am creating PWA in React Js.

react-qr-reader package is working perfectly in my iPad (Safari Browser) & Android (Chrome Browser).

but, it's not working while i am running into custom Web view of IOS or Android Tabs or phone.

it's giving me same Error NoVideoInputDevicesError: No video input devices found.

[RusinovAnton]

Device: iPhone 7
OS: iOS 11.4.1
Browser: PWA opened with Safari from homescreen

Getting "NoVideoInputDevicesError" when trying to access the camera with react-qr-reader :(

[omidgfx]

Solution:

You have to use HTTPS 🥳

Read more about using https in development mode:
https://create-react-app.dev/docs/using-https-in-development/

[Fikoun]

You need to deploy with https or only test on localhost. Other options are disables due to security reasons.

[Razorholt]

Upgrade to iOS 11.2 it should fix that issue. I'm on iOS 11.3 (beta 3) and so far so good!

[dylangarcia]

@Razorholt I'll do that - thanks. I refreshed/reloaded my tab and it seemed to have fixed it which was incredibly strange.

[JodusNodus]

Yeah the differences in allowed constraints on IOS really grinds my gears. They seem to change the workings every release. Let me know if upgrading solves it.

[webjunkie01]

I also experience this issue because my iPhone was not up to date. But adding the openImageDialog method as a fallback is a good option.

[dylangarcia]

Is there any version is known to work with iOS 10? I want to see if I can provide options for the user.

[kythanh]

I am having issue when trying https://thomasbilliet.com/react-qr-reader on Safari on iPhone 6 with iOS 11.2.6.
@JodusNodus do you know if the scanner working on iOS 11.2.6?

[JodusNodus]

The major problem here is that i am a student and have no direct access to an iphone for testing. So saddly i can't debug these cases whenever i want.

[frinko]

If I remember correctly, iOS does not expose the ImageCapture API to their WebView components (e.g. Chrome for iOS, etc.)

[JodusNodus]

Yeah @frinko i have never tested that out. For everyone with a problem: Please use the master branch as the ios11-fix branch is outdated. Then you can post the error if you have one here. Maybe i'll be able to figure something out.

[frinko]

@kythanh, I know that your screenshot is opened up inside of Safari, but I also think that this is considered a custom view with Safari, since it was launched from Slack - but I could totally be wrong with that - and custom views are not supported with iOS's Safari - only native views. I just tried on my iPhone 6 (11.2.6) - same site - and it seems to work for me.

[JodusNodus]

https://forums.developer.apple.com/thread/88052

[rajtrivedi88]

@webjunkie01 You said "adding the openImageDialog method as a fallback is a good option" but how does capturing the image scan the qr code..can you please reply?
@JodusNodus Do you have any idea on this?

[massimopibiri]

Hi guys.My application works perfectly on web. But when I edit the app for the store with pwabuilder.com it throws NoVideoInputDevicesError and a white screen. It seems apple doesn't allow access to the web view from an application compiled with Cordova (used by pwabuilder). Am I right about it? Did somebody solved this problem? any suggestion?
thanks

[JSEvgeny]

I have the same issue as @massimopibiri. When I save web page to "home screen" as pwa web app on iOS (IPhone XS) QR reader stop working. Any ideas why it happens? PS. works fine with Safary on the same phone.

[massimopibiri]

I solved it. The problem didn't have anything to do with the package. It was a difference between browsers and their interaction with CSS. So just a misunderstanding.

[cnadolny2s]

Problem still exists. Did anyone figure it out?

[cnadolny2s]

I found out something regarding iOS 12.2 and PWA:

Same bugs and disabled features as in previous versions: no access to Camera within a standalone PWA, no full support of Web App Manifest, no installation API, ghost windows, and no default launch image.
https://medium.com/@firt/whats-new-on-ios-12-2-for-progressive-web-apps-75c348f8e945

-> "No access to Camera within a standalone PWA"

[Douglasacost]

I have the same issue, on my Cordova PWA is showing "broken play icon" but no camera recorder

[cakesoft-nikhita]

@tegozen where to use https? Could you please tell me in detail?