How to choose which camera to activate with getUserMedia() for barcode scanning function?

547 views Asked by At

I am building a web app and trying to capture barcode with my camera. I am using QuaggaJS library.

I know that the functionality works, because when I used my app on the laptop webcam, it captured the barcode, but with about only 30% accuracy, but when I tried using this on my mobile it couldn't capture the barcode at all. I think the reason for that was that the app picked the ultrawide lens on my device which distorts the image too much.

From reading the docs I saw this:

To require the rear camera, use: { audio: true, video: { facingMode: { exact: "environment" } } }

Which picks the rear camera however, what happens when users have 5 rear cameras? how do I know the right one?

here is my code:

  useEffect(() => {
    Quagga.init(
      {
        inputStream: {
          name: "Live",
          type: "LiveStream",
          target: ".scannerArea", // Or '#yourElement' (optional),
          constraints: {
            facingMode: "environment",
          },
        },
        decoder: {
          readers: ["code_128_reader", "upc_reader", "ean_reader"],
        },
      },
      function (err) {
        if (err) {
          console.log(err);
          return;
        }
        console.log("Initialization finished. Ready to start");
        Quagga.start();
      }
    );
    Quagga.onDetected((result) => {
      let last_code = result.codeResult.code;
      alert(last_code);
      Quagga.stop();
    });
  }, []);
0

There are 0 answers