Does not work on iOS without legacyMode about react-qr-reader HOT 42 CLOSED

The component uses the webRTC standard to get a stream of the webcam. This standard is not supported by Apple's version of webkit. This means that it won't work in Safari but also not on any other browser on IOS because they force browser makers on IOS to use their version of webkit.

from react-qr-reader.

@JodusNodus Thanks for taking the time to explain this.

Are you aware of any other way to achieve this without going native ?

from react-qr-reader.

You can use the following deprecated format to capture video in IOS: <input type="file" accept="video/*" capture="camcorder">. If i have some free time i will implement this as a backup for IOS.

from react-qr-reader.

@JodusNodus We've been using react-qr-reader for a client willing to scan tickets for an event happening in early September (a 3 days conversation between scientists, lots of amazing people and the Dalai Lama : http://www.powerandcare.org/).

We are totally happy with the current implementation of the feature and would like not to spend lots of time trying to re-implement it ourselves using the deprecated html5 input.

Well, you get the point. It would be invaluable to us if react-qr-reader could just work with iOS in less than 3 weeks, ideally 2 so we have more time to test things.

Do you think this would be achievable in such a short time span ?

We would be ready to sponsor your free time if that may help.
Actually I see you live in Belgium. I'll be in Brussels for the event I'm referring to so I could invite you somewhere for a few beers if you'd like 🍻
(On pourra même parler français :)

Also if you have a legal status allowing you to charge us for your time we could discuss that.

What do you think ?

If that's not possible that's also totally fine. I maybe could try to add the html5 fallback myself, although I'm sure you'd produce better code in less time.

from react-qr-reader.

I am happy to support such an event. I will try to implement the IOS support within a week if it is possible, which i am pretty certain it is. If you like my work and you want to support me you can always donate at this link or just my paypal email: [email protected] . I will have to disappoint you that my french is really bad. I am flemish and french has always been my achilles' heel. If i have the time i would be glad to come down to Brussels.

from react-qr-reader.

@JodusNodus That's very nice of you, thanks !

Sorry I forgot that not all of Belgium speaks French, my bad ...
Hopefully we have English, as my flamish is a little non-existent :)

Anyway, thanks again, I hope it will be as simple as you think it is !
If I can be of any help feel free to ask.

from react-qr-reader.

I have just tried out the html5 camera input functionality. And sadly this does no longer work in newer IOS versions. This means that there is no way to get video from the camera in realtime. So i decided that the next best thing is to implement a way to let users take a picture (which is possible) and use that to read the qr-code which will take more time to develop. But as promised i will work on this.

from react-qr-reader.

I may be wrong but I think the client tested https://webqr.com on their iPhone and it was working. I don't have an iPhone nor the client at hand right now, but maybe that's worth a look.

from react-qr-reader.

I have just tested it on an iphone 5s running ios 9. And that demo does not work unfortunately.

from react-qr-reader.

Damn ... 🍎 !

Ok so let's go for the picture solution. Thanks again for taking the time to dive into this 👍

from react-qr-reader.

As promised. I have added a prop to the component called legacyMode. If you enable that you get an input (ugly and you can't change it, but i have already a solution) and when you click that on a mobile device it will ask you to make a picture. That picture is then used to get the QR Code. Could you please test this out on an ios device. As i do not have access to one at the moment.

from react-qr-reader.

I will make an update that hides the ugly input button and just expose a method on the component that can be called with a ref and will trigger the picture dialog.

from react-qr-reader.

I've just updated (directly from github, the npm package hasn't been updated apparently).

I then tried in Chrome without legacyMode={true} and while it was working before it seems it's now broken. It looks like that the handleScan callback is instantaneously triggered with its data set to the string "height: 720, width: 1280". When I ask my component to scan again it just triggers handleScan instantaneously again, I don't even see the video playback displayed.

With legacyMode={true} it appears that the handleScan callback is triggered twice after selecting a picture through the file input:

• the first time with data set to "height: x, width: y", where x is the height of the selected picture and y its width.
• the second time with data set to the actual content of the qr code.

Also, if I switch legacyMode to true then Chrome on desktop and Android will only have the file input button displayed, does it mean that they are recognized as unsupported even though it was working before ?

Sorry for reporting the bad news, and sorry again for the delay !

from react-qr-reader.

I've also not been able to test on iPhone for now, but I will in a few hours.

from react-qr-reader.

I have not published the update as i wanted you to first test it out on ios. The instantaneous callback was caused by a trigger that i setup up for debugging. I forgot to remove it in the commit. I have just made a commit to fix that. If you enable legacyMode it will not use the webcam input anymore even if it is supported on that platform. You can use the handleError callback to enable the legacyMode if the platform does not support the webcam.

from react-qr-reader.

I have tested it a couple time on android, and there it works fine.

from react-qr-reader.

I've been able to test on iPhone and it worked ! 👍

I was confused at first when I first took a picture and nothing happened, and then I realized that maybe the picture was not good enough for the qr code to be recognized. So I took another one and it worked as expected.

In that regard, would it be possible to have an event like onPictureNotRecognized ? What do you think ?

Nevertheless the qr code I've been testing with is a very complicated one so I'll arrange on my side to make it simpler and thus reduce the probability of this event to be triggered.

from react-qr-reader.

Good to hear that. Yeah the problem is that many mobile phones are not so fast and the qr code recognising script is pretty heavy. So if you give it a picture of 8MP then it takes too long on a mobile phone to be a good user experience. So what I have done is shrink the picture. This makes is faster but ofc makes it less accurate. If you want I can add a prop to tell it how big the image can be. So that you can balance it yourself.

On the extra event. Yes I could add such an event for the legacyMode. Doing this for the normal mode would result in a call of the event every iteration/frame.

from react-qr-reader.

If it's not too much trouble it could be interesting to have access to that prop.

Thanks again for you time ❤️

from react-qr-reader.

No problem. I'll add that and a method so you can have it triggered by something else and then I can hide the ugly input button. I might be able to do it tomorrow evening and else it will be the day after that.

from react-qr-reader.

I have added the features. Check out the README for more information.

from react-qr-reader.

@JodusNodus Okay I have updated and tested on iOS.

It's working well and now I can display a useful message if the picture was not recognizable. Thank you for this !

I've been testing on an iPhone 4 from 2010 and the performance is not so great, but I guess with a newer iPhone it will work much better. With this old one and with maxImageSize=1500 it's taking about 10-12 seconds to analyze the image, and one time it even crashed Safari.
It seems that lowering it has tremendous effect on the processing time but not so much on the actual ability to analyze the image. Even with maxImageSize=1500 it seems that I need to take a very close picture of the qr code otherwise it's not recognized. When I lowered it to 750 it processed in about 3 seconds.
I had to give back the iPhone to my friend for now but I'll keep playing with the maxImageSize later today or tomorrow.

Another point preventing a truly good user experience is that after the picture has been taken there is no feedback until either handleScan or handleImageNotRecognized are triggered.
Could it be possible to have another event like handlePictureTaken that I could use to display a spinner and a message ?

Good day to you :)

from react-qr-reader.

Glad to hear that it works. The script that i use is pretty heavy for a browser side script. On laptop or desktop hardware it seems to work fine. But on lower end devices or phones. It is definitely not as fast as i would like it to be. My recommendation would be to not support older or lower end devices if that is possible. They are just too slow to handle such a workload. This evening i will be able to test an iPhone 5s. I will test that out and report how fast it runs.

The maintainer of the script that i use is not keeping it up to date. And it seems that performance optimisations could be made. I might look into that in the future. But for now this will have to do.

I'll add the extra event.

This has taken more time than i hoped it would take. But i am happy that we are slowly working towards a solution.

from react-qr-reader.

I am experimenting with web workers to run the heavy script on a separate thread. So that it doesn't block the DOM. And in theory should be faster. I'll let you know if i get it to work.

from react-qr-reader.

Hi

I tried enabling legacy mode = true on IOS Chrome browser and the camera looks different but still does not appear. Is there anything else I need to set?

Many thanks

from react-qr-reader.

@twiz911 Setting legacyMode={true} should do the trick. Try out the demo on IOS it enables legacyMode when normal mode is not supported.

from react-qr-reader.

The demo does not seem to work on Safari 11 on iOS 11 either, which supports WebRTC.

from react-qr-reader.

I haven't tested it on IOS 11, or Safari 11 because those aren't out yet. I'll use the safari preview to test that. I don't have access to an iPhone that i'm willing to upgrade & there is no simulator IOS 11 yet. If you want, you can help to debug this.

from react-qr-reader.

Solved for Safari 11. @evjand could you checkout the demo again in IOS 11 (clear caches to be sure) ?

from react-qr-reader.

Confirmed that it works in Safari Tech Preview - great work! In Safari iOS 11, however, it returns the following error: "Unhandled Promise Rejection: NotAllowedError (DOM Exception 35): The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission." in handleLoadStart. I'm not completely sure, but I think it might be that iOS requires the play function to be triggered by a user action.

from react-qr-reader.

@evjand 👍 yes that seems to be the problem indeed. What could be an elegant way to handle this though? I don't like to make an other exception for IOS alone as this behaviour could very well become standard across mobile browsers (normal autoplay attribute in the video & audio elements are already prevented in most mobile browsers). Maybe the user can just trigger the video to play by the native play button or other user events. Then i can just listen for the start event to start scanning.

from react-qr-reader.

Hi

I had tried legacyMode={true} in my previous comment 15 days ago and it didn't seem to work. Has something changed so it should now work?

Thanks in advance

from react-qr-reader.

@twiz911 nothing has changed to the legacyMode code. LegacyMode should already worked 15 days ago.

from react-qr-reader.

@twiz911, its probaly better if you open an new issue yourself. Just describe what your problem is, if you get any errors, maybe a code snippet.

from react-qr-reader.

@JodusNodus I've hacked around a little. It seems like you don't need to trigger it if you have set playsInline = true on the video-element. I think that would be the best solution, since we don't really want it to open fullscreen anyways. What do you think?

from react-qr-reader.

@evjand Adding playsinline attribute allows the play to be triggered outside of user event context?

from react-qr-reader.

@JodusNodus Yes. I've tested with and without playsInline. True works and false throws the error. I guess the reason it throws an error with playsInline = false is the default behavior of a video element in iOS is to play in fullscreen, which further explains why it needs an action to trigger it.
This is the code I used for testing: https://codepen.io/anon/pen/KqajGw

from react-qr-reader.

@evjand 👍 Great !

from react-qr-reader.

I have updated the demo. Let me know if it works now

from react-qr-reader.

Demo works on my iPhone 6 with iOS 11 now! 🥇

from react-qr-reader.

Hi guys. It's work fine on iOS 11, but not good on iOS 10. Can you take a look for this?

from react-qr-reader.

Same result on iOS 12 (like the previous picture, not working)

from react-qr-reader.