JodusNodus / react-qr-reader

React component for reading QR codes from webcam.
https://jodusnodus.github.io/react-qr-reader
MIT License
1.13k stars 407 forks source link

IOS 11 Safari NoVideoInputDevicesError #61

Open dylangarcia opened 6 years ago

dylangarcia commented 6 years ago

I was able to get the QR reader using the ios11-fix branch but for some reason it's no longer working. ios11-fix gives me "undefined is not an object (evaluating navigator.mediaDevices.getSupportedConstraints()). On the newest version, I get the following error:

NoVideoInputDevicesError: No video input devices found.

iPhone X iOS 11.1.2

Razorholt commented 6 years ago

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

dylangarcia commented 6 years ago

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

JodusNodus commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

kythanh commented 6 years ago

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?

test scanner

nikhilwadhawana commented 6 years ago

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.

JodusNodus commented 6 years ago

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 commented 6 years ago

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

JodusNodus commented 6 years ago

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 commented 6 years ago

@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. test

JodusNodus commented 6 years ago

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

rajtrivedi88 commented 6 years ago

@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?

RusinovAnton commented 6 years ago

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 :(

massimopibiri commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

Problem still exists. Did anyone figure it out?

cnadolny2s commented 5 years ago

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 commented 4 years ago

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

tegozen commented 3 years ago

use https pls

cakesoft-nikhita commented 3 years ago

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

Fikoun commented 3 years ago

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

omidgfx commented 2 years ago

Solution:

You have to use HTTPS 🥳

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