getUserMedia API在React中不适用于iOS Safari

Jamie 发表于 Dev

111

杰米

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

我已经成功地实现了一个可以在Chrome上呈现并正常工作的组件，但是当我mylocalIP:3000在iOS Safari上导航时，它似乎无法正常工作。我将非常感谢我的代码在与iOS不兼容的地方可能出错的任何指针。StackBlitz链接到代码

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

杰米

事实证明，getUserMedia需要在HTTPS环境中执行。

在Create React App你需要通过改变来创建此HTTPS环境start中的脚本package.json来"HTTPS=true react-scripts start"

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

更新：在我的所有CRA项目中，我都使用mkcert安装证书颁发机构，然后为webpack生成证书，以便在CRA中编译站点时使用。

在CRA项目根目录中：

mkcert -install

mkdir .cert && cd $_ && mkcert localhost

printf "\nSSL_CRT_FILE=./.cert/localhost-cert.pem\nSSL_KEY_FILE=./.cert/localhost-key.pem\nHTTPS=true" >> ../.env

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。