Getting iOS Camera Access in React Web App

Question

I am creating a web app that is able to scan barcodes to pull up inventory of an item. I am using the QuaggaJS API to create this functionality. When the component is rendered the browser (Microsoft Edge) asks for camera permissions and once allowed the camera turns on and a box is shown with the live video stream. This functionality needs to work on iPhone browsers. My problem is when I open this page on my iPhone browser (I have tried Safari, Edge, and Chrome) it does not ask for camera permissions and no video stream is rendered.

Edit I know that most mobile browsers need a secure connection to have access to the camera. Right now this is only being run on localhost:3000. Could that be the issue?

import { useNavigate } from "react-router-dom";
// import Quagga from "quagga";
import Quagga from "@ericblade/quagga2";
import adapter from "webrtc-adapter";

const BarcodeScanner = () => {
  const navigate = useNavigate();

  const startScanner = async () => {
    if (
      navigator.mediaDevices &&
      typeof navigator.mediaDevices.getUserMedia === "function"
    ) {
      try {
        const mediaStream = await navigator.mediaDevices.getUserMedia({
          video: true,
        });
        Quagga.init(
          {
            inputStream: {
              name: "Live",
              type: "LiveStream",
              constraints: {
                facingMode: "environment",
              },
              target: document.querySelector("#interactive"),
              constraints: {
                video: {
                  width: { min: 640 },
                  height: { min: 480 },
                },
              },
              area: {
                // defines rectangle of the detection/localization area
                top: "0%", // top offset
                right: "0%", // right offset
                left: "0%", // left offset
                bottom: "0%", // bottom offset
              },
            },
            locate: true,
            decoder: {
              readers: ["upc_reader", "code_128_reader"],
            },
          },
          function (err) {
            if (err) {
              console.log(err);
              return;
            }
            console.log("Initialization finished. Ready to start");
            Quagga.start();
          }
        );
        Quagga.onDetected((data) => {
          let countDecodedCodes = 0;
          let err = 0;
          for (let id in data.codeResult.decodedCodes) {
            let error = data.codeResult.decodedCodes[id];
            if (error.error != undefined) {
              countDecodedCodes++;
              err += parseFloat(error.error);
            }
          }
          if (err / countDecodedCodes < 0.1) {
            console.log(data.codeResult.code);
            Quagga.stop();
            navigate("/home");
          } else {
            console.log("Error: probably wrong code");
          }
        });
      } catch (err) {
        console.log("Camera permissions error: " + err);
      }
    } else {
      console.log("getUserMedia function is not available in this browser.");
    }
  };

  const stopScanner = () => {
    Quagga.stop();
  };

  useEffect(() => {
    startScanner();
    return stopScanner;
  }, []);

  return <div id="interactive" className="viewport"></div>;
};

export default BarcodeScanner;

Answer 1

I had the same issue and yes, you are right. You need a secure connection to test it. You can try ngrok