react-qr-scanner: facingMode problem

Hello and thank you for giving this repo a new boost. It’s quite working good except the facingMode property isn’t working through various devices. It’s always the front camera which is active despite the prop is set to rear. Any suggestion?

<QrReader
     facingMode="rear"
     delay={500}
     onError={handleError}
     onScan={handleScan}
     style={{ width: '100%' }}
/>

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 3
Comments: 21 (1 by maintainers)

Most upvoted comments

@bansalshashank I was able to solve this with below code:

const [width, setWidth] = useState(window.innerWidth);

function handleWindowSizeChange() {
    setWidth(window.innerWidth);
}

useEffect(() => {
    window.addEventListener('resize', handleWindowSizeChange);
    return () => {
        window.removeEventListener('resize', handleWindowSizeChange);
    }
}, []);

let isDesktop = (width > 768);

<QrReader
  delay={500}
  style={styles.previewStyle}
  onError={handleError}
  onScan={handleScan}
  constraints={
      isDesktop
      ? undefined
      : {
          video: {
              facingMode: { exact: `environment` }
          }
        }
  }
/>

Hope this helps!

deepak3387 on Jun 2, 2021

@Mario8419 I have the same problem. Mine is throwing this error whenever i pass the facingMode prop

I tried to scan it with my generated QR codes and it works. The only problem i have is this camera facing mode.

RyanAliXII on Feb 21, 2021

For me, in that demo, the rear camera only works by selecting the device (the second device). If you take a look in the source of this repo, you can see that facingMode is set to rear (environment) as default. So for me, it’s not working. I can only see the front camera.

Then I saw some commentaries from the developer, and then I move to the JodusNodus repo, and it works fine on mobile.

senda-dev on Mar 10, 2021

@shendel the git version doesn’t seem to work, I mean you can change facingMode but the qr code reader doesn’t work

ernest-okot on Apr 2, 2021