camera is always showing front view and not back view even though i set facing mode to environment

[cnapenas]

Hi, I have the code below where if I open the camera, it always shows the front view and not the back view

// Scanner.js
import React, { useEffect, useRef } from 'react';
import Quagga from 'quagga'; // Assuming you're using Quagga for barcode scanning

export default function Scanner({ onDetected }) {
const videoRef = useRef(null);

useEffect(() => {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true })
.then((stream) => {
if (videoRef.current) {
videoRef.current.srcObject = stream;
Quagga.init({
inputStream: {
type: 'VideoStream',
constraints: {
width: 640,
height: 480,
facingMode: 'environment'
}
},
locator: {
patchSize: 'medium',
halfSample: true
},
numOfWorkers: 4,
decoder: {
readers: ['code_128_reader', 'ean_reader', 'upc_reader', 'ean_8_reader','code_39_reader','code_39_vin_reader','codabar_reader',
'upc_e_reader', 'i2of5_reader','2of5_reader','code_93_reader'] // or any other barcode type
},
locate: true
}, function(err) {
if (err) {
return console.log(err);
}
Quagga.start();
});

        Quagga.onDetected((data) => {
          onDetected(data.codeResult.code);
        });
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

}, []);

return

[github-actions]

Thank you for filing an issue! Please be patient. :-)

[ericblade]

facingMode is not known to be especially reliable, but you also want to use either ideal or exact, to tell it that that's explicitly what you want.

facingMode: { exact: 'environment' }

If that all fails, then you should pass the deviceId of the camera device that you want to use as a constraint.

https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Constraints