qr-code-styling icon indicating copy to clipboard operation
qr-code-styling copied to clipboard

QR code is not valid by some scanners

Open BenBeri opened this issue 3 years ago • 16 comments

I have used the example code of facebook looking QR code from the README, I scanned it with my iphone and it worked, however with all andorid phones I've used it could not get the data, I used this online scanner https://pageloot.com/qr-code-scanner and it could not detect it aswell. I used some online QR code generator, scanned it with all phones and it worked everywhere.

I used the Angular example.

Is there an known issue about this?

BenBeri avatar Jan 05 '22 14:01 BenBeri

I confirm, android scanners do not recognize the generated qr code.

Stedioz avatar Jan 28 '22 10:01 Stedioz

@Stedioz @BenBeri 👋 Hi there! Wondering if you are still experiencing issues scanning with Android devices. I tested with an Android device and it seemed to work fine. This was using the React example with the built in scanner on my device. Thanks in advance!

jaqarrick avatar May 09 '22 23:05 jaqarrick

Any suggestion on qr scanner packages that do work well with these?

brianpmaher avatar Jul 20 '22 19:07 brianpmaher

Still no issues with this library and android (and other devices).. I'm wondering how much these inconsistencies have to do with QR functionality itself, meaning that QR codes become less usable / reliable the more styles and adjustments are added. Here are some other reasons a QR code might not work.

jaqarrick avatar Jul 21 '22 16:07 jaqarrick

Seems to be an issue with images from my side, and non-square dots. Any idea how we can use images and still get it working?

victorbianconi avatar Jul 29 '22 21:07 victorbianconi

Probably duplicate of #49

KilianB avatar Aug 26 '22 13:08 KilianB

@victorbianconi and @Stedioz can you please check if the below codes are working on your android devices?

The top row are fixed codes and the bottom row are codes generated with this library. I got an npm package release almost ready, just need to write the changelogs and publish it tomorrow.

image

The package can now be installed via npm i styled-qr-code or yarn add styled-qr-code

https://github.com/KilianB/styled-qr-code

KilianB avatar Aug 27 '22 12:08 KilianB

@victorbianconi and @Stedioz can you please check if the below codes are working on your android devices?

The top row are fixed codes and the bottom row are codes generated with this library. I got an npm package release almost ready, just need to write the changelogs and publish it tomorrow.

image

The package can now be installed via npm i styled-qr-code or yarn add styled-qr-code

https://github.com/KilianB/styled-qr-code

The purple one works for me. I'm using the android's scanner app. But the other ones don't work. I figured out it likely has to do with low contrast colors/background color.

victorbianconi avatar Aug 28 '22 21:08 victorbianconi

I just discovered the same issue and I have this in a production app. Works fine for ios but the Android native camera for all the devices we tested does not work. Google Lens works but that is not available by default for older devices.

Note: Url points to https://cat-bounce.com/

Created with qr-code-styling (does not work) qr-code-styling-margin-30

Created with qr-code-generator (works fine) qr-code-generator

I will test the QR codes above and check out the new package.

madmacc avatar Sep 19 '22 22:09 madmacc

@victorbianconi and @Stedioz can you please check if the below codes are working on your android devices?

The top row are fixed codes and the bottom row are codes generated with this library. I got an npm package release almost ready, just need to write the changelogs and publish it tomorrow.

image

The package can now be installed via npm i styled-qr-code or yarn add styled-qr-code

https://github.com/KilianB/styled-qr-code

The bottom row seems to work but inconsistently, may be the contrast. I will try your fork with a plain square black QR code and see how it goes.

madmacc avatar Sep 19 '22 23:09 madmacc

I just discovered the same issue and I have this in a production app. Works fine for ios but the Android native camera for all the devices we tested does not work. Google Lens works but that is not available by default for older devices.

Note: Url points to https://cat-bounce.com/

Created with qr-code-styling (does not work) qr-code-styling-margin-30

Created with qr-code-generator (works fine) qr-code-generator

I will test the QR codes above and check out the new package.

Both QRcodes work for me and my Android Oppo.

smappio avatar Oct 04 '22 09:10 smappio

@smappio It appears to only be an issue for Android 8 and possibly earlier. See https://github.com/kozakdenys/qr-code-styling/pull/110 and https://github.com/kozakdenys/qr-code-styling/issues/49

madmacc avatar Oct 06 '22 20:10 madmacc

Yeah, I understand. I've restricted the colors on my side, so that I prevent any lack of contrast and at the moment, no more issue with guys scanning my users ' qrcode. Fyi I restrict colors to the 700/800/900 variants of tailwindcss colors.

smappio avatar Oct 06 '22 20:10 smappio

You can try if you want, connect lechapeau.io, create your account (you can delete it after), go to the qrcode tab of your user profile (your "Chapeau" created at sign up). I'd be interested to know if some colors settings are not working with the color restriction and for some devices.

smappio avatar Oct 06 '22 20:10 smappio

At the moment I am using @HenkVanMaanen's fork https://github.com/sallandpioneers/qr-code-styling and it works well as long as you don't use the rounded dots. The issues I am concerned about are not related to colours but with a bug in the code generating the QR code.

madmacc avatar Oct 06 '22 20:10 madmacc

Oh ok, sorry. I use the original version on my ends.

smappio avatar Oct 06 '22 20:10 smappio