Camera does not capture QR on iOS

[mahtoid]

Hello,

I am running react-qr-reader on a web app. Users have been trying to scan QRs using iOS (w/ Safari and Chrome) and have been reporting that it isn't detecting the QR code to scan.

From the little I have been able to test, there doesn't seem to be any errors or feedback what so ever. I have taken a browse over existing issues regarding iOS, but the website is 'trusted' (active SSL Certification) and works perfectly fine on Windows, Linux and Android. It seems to have intermittent issues with Mac (unable to reproduce myself) but has never worked at all on iOS.

Is there an active solution for this issue?

[Tjerk-Haaye-Henricus]

Same here

[mosqueradvd]

Same here. Any updates?

[sebitas]

same

[di3upham]

same. any updates?

[Patrick-Sherlund]

@mahtoid What iOS version are you using? Do you have the version numbers of each browser, etc?

I'm currently using iOS 16.1.1 on the latest version of Chrome / Safari and have no issues. Here's my QrReader component:

const [scanResult, setScanResult] = useState(null);

<QrReader
          onResult={(result) => {
            setScanResult((oldState) => {
              if (oldState?.getText() !== result?.getText()) {
                return result;
              }
            });
          }}
          scanDelay={250}
          constraints={{
            facingMode: 'environment',
            width: { max: 2000, min: 480 },
          }}
        />

[gregg-cbs]

The docs are wrong with the result.text. I also have no idea why they default the camera to the selfie camera, that makes no sense, the below fixes that too.

You can copy and paste this for a good working start:

<QrReader
  constraints={{
    aspectRatio: "1",
    facingMode: "environment"
  }}
  scanDelay={250}
  onResult={(result, error) => {
    if (!!result) {
      console.log(result.getText())
    }
  }}
  ViewFinder={() => (
    <div
      style={{
        position: "absolute",
        top: "0",
        left: "0",
        right: "0",
        bottom: "0",
        zIndex: 10
      }}
    >overlay</div>
  )}
  videoContainerStyle={{}}
  videoStyle={{}}
/>

[miteshdevg]

https://www.npmjs.com/package/react-qrcode-scanner-mi

use above library