facingMode not working (iPhone X, XR, XS)

[ymfHU]

I set the facingMode to rear but sill using the front camera. (Tested on iPhone X, XR, XS)

[kybarg]

@ymfHU This project is targeting desktops in the first place. You can have a look at JodusNodus/react-qr-reader. I'll try to add wider support some time soon

[ankurbabu]

@ymfHU Did you able to solve the issue? I am also facing the same issue, it works in android but not in iphone :(

[zzynx]

Experiencing the same problem with an iPhone 8.

This project is targeting desktops in the first place.

That's a pitty.

You can have a look at JodusNodus/react-qr-reader.

I'm coming from that lib.
I have to read QR-codes from the screen of measuring devices (so not from paper).
And react-qr-reader doesn't seem to be able to read them.
I hoped react-qr-scanner would.

[lucasapereira]

I am having the same problem here with iPhone

[kybarg]

this project is aimed toward desktop browsers usage,
for mobile devices please use https://github.com/JodusNodus/react-qr-reader

[devcshort]

this project is aimed toward desktop browsers usage,
for mobile devices please use https://github.com/JodusNodus/react-qr-reader

Most of us were coming from that lib already in hopes that this one would fix the underlying issues with that library (like not being able to scan codes from a screen).

[amaan-ahmad]

facingMode doesn't work as set at first load, but when we reload the page then it loads the facingMode set by the programmer.
.Talking about any mobile device over chrome browser for mobile.

[kybarg]

Closing this issue as for #8 component will accept constraints directly

[misaizdaleka]

I was also getting this error (on iPhone), but I found a solution.

The main thing here is to call two mediaDevices functions for querying available cameras and only then show/render the component.

Here's a code snippet doing exactly that:

const detectCamera = async () => {
    await navigator.mediaDevices.getUserMedia({ audio: false, video: true });
    await navigator.mediaDevices.enumerateDevices();

    setPermissionGranted(true);
  };

  useEffect(() => {
    (async function effectDetectCamera() {
      await detectCamera();
    })();
  }, []);

  return permissionGranted  ? 
    <Reader onError={handleError} onScan={handleScan} facingMode="rear" />
   : 
    <div>permission denied</div>
  ;

Here's a full working example