在React Web App中获取iOS摄像头访问权限

Question

我正在创建一个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;

Answer 1

我也有同样的问题，是的，你是对的。你需要一个安全的连接来测试它。你可以试试ngrok