getUserMedia API不适用于React中的iOS Safari

Question

我正在尝试通过在我的React App中实现getUserMedia API来访问iOS上的相机​​。

我已经成功地实现了一个可在Chrome上呈现并正常工作的组件，但是当我在iOS Safari上导航至mylocalIP:3000时，它似乎无法正常工作。对于我的代码可能会出错而不兼容iOS的任何指示，我将不胜感激。 StackBlitz link to the code

const Video: React.FC = (props) => {
    useEffect(() => {
        start()
    })

    const constraints = {
        audio: false,
        video: true
    };

    async function start() {
        const stream = await navigator.mediaDevices.getUserMedia(constraints)
        const video = document.getElementById('video') as HTMLVideoElement;
        video.setAttribute("playsinline", "true");
        video.setAttribute("controls", "true");
        video.srcObject = stream;
    }

    return (
        <video id='video' autoPlay playsInline></video>
    )
}

export default Video

Answer 1

证明该getUserMedia needs to be executed in an HTTPS environment。>>

在Create React App中，您需要通过将start中的package.json脚本更改为"HTTPS=true react-scripts start"来创建此HTTPS环境>

iOS设备将警告CRA签名无效，但是，如果您继续访问该网站，它将提示您访问网络摄像头。