html - getUserMedia API 不适用于 React 中的 iOS Safari

Question

我正在尝试通过在我的 React 应用程序中实现 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 中，您需要通过将 package.json 中的 start 脚本更改为 “HTTPS”来创建此 HTTPS 环境=true react 脚本开始”

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

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

在 CRA 项目根目录中:

mkcert -install

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

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

或者如果您不喜欢执行您不理解的随机命令:

1. 在项目根目录下创建.cert/文件夹
2. 将目录更改为终端中的 .cert/ 文件夹
3. 运行mkcert localhost
4. 在您的项目根目录中创建一个 .env 文件
5. 在此文件中添加以下内容:

SSL_CRT_FILE=.cert/localhost.pem
SSL_KEY_FILE=.cert/localhost-key.pem
HTTPS=true