facingMode problem

[Mario8419]

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%' }}
/>

[RyanAliXII]

@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.

[alatnet]

Tacking on this issue with that deviceId has the same thing.

[senda-dev]

This repo is for desktop, if you want mobile support, look for: https://github.com/JodusNodus/react-qr-reader

[alatnet]

Doesnt work on desktop. I've tried it with desktop.

[Mario8419]

demo here: https://kybarg.github.io/react-qr-scanner/ is working, also mobile

[senda-dev]

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.

[shendel]

npm repo contains the wrong version, different from the code here

[shendel]

npm i https://github.com/kybarg/react-qr-scanner fix problem templonary, but this is not good solution, need update package in npm

[ernest-okot]

after painfully reading through the compiled code, I found that you can pass media constraints to the component

<QrReader
  delay={1000}
  style={{
    width: "100%",
    height: "100%"
  }}
  constraints={
    isDesktop
      ? undefined
      : {
          video: {
            facingMode: { exact: facingMode }
          }
        }
  }
  facingMode={facingMode}
  onError={handleError}
  onScan={handleScan}
/>

[ernest-okot]

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

[shendel]

@ernest-okot really? )
see for yourself and make sure
npm i [email protected]
https://www.npmjs.com/package/react-qr-scanner

Really?
Face, Rare?
Front, Back?

May be you see getDeviceId function there????

For me full-link repo from this git-hub repo work fine, with front-back camera, with select between front-back

main problem - npm version is not up to date

[shendel]

@ernest-okot https://github.com/kybarg/react-qr-scanner/blob/master/lib/index.js#L394
Any questions?
Where facingMode, legacyMode??? Where chooseDeviceId func????

[shendel]

@ernest-okot , yes - github build dont scan ((( ... may be we need wait owner of repo for answers....

[shendel]

@kybarg , @fjogeleit , can you are help us and fix this?

[shendel]

@ernest-okot i make fix #41
you can check on my fork https://github.com/shendel/react-qr-scanner

[kybarg]

@shendel

1. this projecxt is mainly focused for desktp browsers, for mobile devices I'd sugest https://github.com/JodusNodus/react-qr-reader
2. [email protected] doesn't have legacy support yet
3. Facing mode and device id schould be passed through cosntraints

[shendel]

@kybarg , ничего что я по русски, у вас в профиле указан Киев. На английском сложно высказываться. Да я понимаю, но в мобильном браузере тоже работает, плюс этот репо хоть как-то обновляется в отличии от того, что вы указали, что, по крайней мере для меня является приоритетом. И да - были опечатки. Не распознавало код (я поправил и сделал пул)

[deepak3387]

facingMode property is not working for me as well.
npm repo is also confusing and how to use property is not clear.
I would suggest to kindly add some example with all the available properties so that its easy to use.
Also I would love to see an example containing option for selecting available camera(s).

[bansalshashank]

hello its not working for me as well is there anyone for whom its working if not then does anybody found out any solution for the same

[deepak3387]

@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!

[HeinCorbet]

I found the problem with facingMode not wiorking for me is because the camera label is language specific. In Dutch the camera says 'voorzijde' (=front) and 'achterzijde (=back). Adding a new property to supply additional filter values could be a solution. Providing a select camera option to the end user seems to be the way to go, that is what I did. I found however that the qr-scanner does not switch camera when changing a state value. It only seems to rerender when changing the prop 'delay', 'facingMode' and 'legacymode' How about adding a property to set the camera deviceId when known. I now solved this by putting the deviceId in the facingMode property to trigger the rerendering (switching) to the other camera. This triggers the 'chooseDeviceId' function where I can return the selected deviceId.