ericblade / quagga2

An advanced barcode-scanner written in Javascript and TypeScript - Continuation from https://github.com/serratus/quaggajs
MIT License
765 stars 85 forks source link

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

Closed cnapenas closed 9 months ago

cnapenas commented 9 months ago

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[bot] commented 9 months ago

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

ericblade commented 9 months ago

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