我正在创建一个Web应用程序，该应用程序能够扫描条形码以提取物品的库存。我使用QuaggaJS API来创建此功能。当浏览器呈现组件时（Microsoft Edge）要求摄像头权限，一旦允许，摄像头就会打开，并显示一个带有实时视频流的框。此功能需要在iPhone浏览器上工作。我的问题是当我在iPhone浏览器上打开这个页面时（我已经尝试过Safari、Edge和Chrome），它不要求相机权限，也没有渲染视频流。

• 编辑 * 我知道大多数移动的浏览器需要安全连接才能访问相机。目前这只在localhost：3000上运行。这可能是问题所在吗？

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;