Setting facing mode constraint to "environment" only flips/mirrors image

[gabrielbrrll]

Hi, can anyone help? I can't seem to toggle the rear camera in mobile browsers. It only flips the display.

<QrReader
        constraints={{ facingMode }}
        videoId="QrCodeScannerPage__video"
        videoContainerStyle={videoContainerStyle}
        videoStyle={cameraViewStyle}
        onResult={(result) => handleQrScan(result)}
    />

[brettandrew]

Yes, I have the same problem, tested on multiple devices and browsers, same result.

<QrReader constraints={{ facingMode: this.state.facingMode }}

Changing this.state.facingMode to 'face' or 'environmment' just flips mirror image not camera.

I see there is deviceID as a seperate constraint, should that be used instead? How do you get a list of camera devices that is safe for multiple OS/Devices?

This is important as different camera's have very different quality and some front camera's do not scan codes well or at all.

[jeandenis-k]

Hi! What worked for us is setting the facingMode value as the key prop of the QrReader component (which forces the React component to reload). No idea why the lib fails, but at least this quick fix solves it for now 🙂

[brettandrew]

@jeandenis-k This was the key, I created two QR readers and only show each when it is is either user or environment.

{this.state.facingMode === 'environment' && <QrReader key='environmentQR'...

{this.state.facingMode === 'user' && <QrReader key='userQR'...

[abettermap]

@brettandrew your solution worked for me, although maybe you are using class components? FYI to anyone getting errors about this , here is the functional component version I used:

<QrReader
  key="environment"
  constraints={{ facingMode: 'environment' }}
  onResult={(result, error) => {
    // stuff...
  }}
/>

Obviously if you want user, you'll need useState or something, but the project I'm working on only needs environment.

[ZenDev123]

Thank you abettermap. Thanks for making brettandrew's explanation easier

[ccarapezza]

Hey! thanks @brettandrew , your solution is worked for me too. I couldn't find the problem... thank you

[ChenChingYen]

thank you so much @brettandrew i have been struggling so much on this rear front camera problem and eventually i found out this discussion here. The solution worked perfectly for my problem. Thank you

[ZenDev123]

Your Welcome

On Thu, Feb 23, 2023 at 1:17 AM Chen Ching Yen @.***> wrote:

thank you so much @brettandrew https://github.com/brettandrew i have been struggling so much on this rear front camera problem and eventually i found out this discussion here. The solution worked perfectly for my problem. Thank you

— Reply to this email directly, view it on GitHub https://github.com/react-qr-reader/react-qr-reader/issues/230#issuecomment-1440702655, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXFVZEANTAKLLBNQS2ORTCDWYZUMBANCNFSM5O5VZVAQ . You are receiving this because you commented.Message ID: @.***>