Back camera is not opening in mobile device

[AsadNom]

Hello Sir , I have implemented this NPM package in my React js project , I want to open back camera in mobile devices instead of front camera , although I set facing Mode as environment , its working fine on browser on PC but its not working in mobile device. here is my code sample,

import QrScanner from 'react-qr-scanner'; const qrRef = useRef(null);

const handleErrorWebCam = (error) => { console.log(error); }

const handleScanWebCam = (result) => { if (result) { setScanResultWebCam(result); } }

<QrScanner ref={qrRef} delay={300} facingMode="environment" style={{ width: '100%' }} onError={handleErrorWebCam} onScan={handleScanWebCam} />

[martincerveny]

Hi, you should use the facingMode under constraints property like this

<QrScanner
ref={qrRef}
delay={300}
constraints={{
    facingMode: 'environment'
}}
style={{ width: '100%' }}
onError={handleErrorWebCam}
onScan={handleScanWebCam}
/>

[rayduui]

onError and onScan are deprecated , use OnResult instead

[abadrangui]

use https !!!

[adrianowy]

Hi @abadrangui you're a genius!! I've been trying for a week to get this to work when I saw your comment. In my case, I was using docker, then I had to create a container with nginx for reverse proxy and using https protocol. It's working normally.

[iusmansultan]

@abadrangui I used firebase hosting and its already on https when i comment out constraints={{ facingMode: 'environment' }} this line its working with front camera but when i used this no camera shows

[RahmanC]

@abadrangui I used firebase hosting and its already on https when i comment out constraints={{ facingMode: 'environment' }} this line its working with front camera but when i used this no camera shows

perhaps you need this line;

key="environment"

[DevAbdoTolba]

Still require help on this problem the same is here!!

 <QrReader
        constraints={{
          audio: false,
          video: { facingMode: "environment" },
        }}
        key="environment"
        onResult={(result, error) => {
          if (!!result) {
            setData(result?.text);
          }

          if (!!error) {
            console.info(error);
          }
        }}
        style={{ width: "100%" }}
      />

didn't work or even

 <QrReader
        constraints={{
          audio: false,
          video: { facingMode: { exact: "environment" } },
        }}
        onResult={(result, error) => {
          if (!!result) {
            setData(result?.text);
          }

          if (!!error) {
            console.info(error);
          }
        }}
        style={{ width: "100%" }}
      />

[DevAbdoTolba]

I found a solution for that, it worked for me if I needed it locally. simply using the --host switch. so first the code will be :

  <QrReader
        constraints={{
          facingMode: "environment",
        }}
        key="environment"
        onResult={(result, error) => {
          if (!!result) {
            setData(result?.text);
          }
        }}
        style={{
           width: "100%"}}
      />

      <Info
        response={response}
        open={open}
        setOpen={setOpen}
        severity={severity}
      />

run locally using npm run dev --host

it will show you something like this because I am using yarn so yarn dev --host :

➜ Local: http://localhost:5173/ ➜ Network: http://25.17.172.207:5173/ ➜ Network: http://192.168.1.4:5173/ ➜ press h to show help

The Network that starts with the router I am using is the one we need :

Network: http://25.17.172.207:5173/ good until now for the PC, to the phone!

phone

open this link : chrome://flags/#unsafely-treat-insecure-origin-as-secure you find a field and a multiselection tubule that has disabled in it, make it enabled, and add the link in the text area http://25.17.172.207:5173/

Now relaunch Chrome on the phone, and open that link on the phone. everything now is good to go and you are running it locally with a camera, I think the same thing might work for the hosting. I will keep searching for that to check if there is anything better

[NadirBakhsh]

it work for me

<QrScanner
    delay={ 300 }
    style={ {width: '100%'} }
    constraints={{aspectRatio: 1,  facingMode: { ideal: "environment" } }}
    onDecode={(result) => setQrByScan(result)}
    onError={(error) => console.log(error?.message)}
/>