react-qr-reader icon indicating copy to clipboard operation
react-qr-reader copied to clipboard

Recognition of QR code performs poorly in dark mode

Open polymorpher opened this issue 3 years ago • 1 comments

This happens when we use the computer's camera (and this library, in browser) to scan the QR code displayed on a mobile phone's screen, when the phone is set to dark mode, such that even though the code itself is black and white as usual (with a short white border), the rest of the screen is black / dark grey.

An example use case scenario of this is to scan the QR code exported by Google Authenticator on iOS. The more accounts selected, the more complex the QR code and the harder it is for the library to recognize anything. In my experiment using various parameters (varying number of accounts, light conditions, background environment, glare and reflections, different camera resolutions, ability to auto-focus, etc.), I found the library is generally unable to recognize anything even with only 1 account exported (i.e. a rather simple QR code). The library only successfully recognized a QR code displayed in dark mode using a camera with auto-focus ability (Logitech C920, even though it is only 480p-720p). The library fails completely on standard cameras such as Mac's default camera, FaceTime 720p/1080p.

In contrast, https://github.com/JodusNodus/react-qr-reader can generally recognize the QR codes displayed in dark mode, until the code gets fairly complex (>=3 accounts) and the image received is quite blurred / disturbed (by reflections, etc.)

polymorpher avatar Sep 02 '21 22:09 polymorpher

@polymorpher This component ist just a React wrapper for @zxing/browser, so probably you want to raise an upstream issue unless it is really a problem with the wrapper.

Maybe you can cross-check your scenario with their online demo: https://zxing-js.github.io/library/

buffcode avatar Sep 03 '21 09:09 buffcode