getUserMedia API 不适用于 React 中的 iOS Safari [英] getUserMedia API not working for iOS Safari in React

问题描述

我正在尝试通过在我的 React 应用程序中实现 getUserMedia API 来访问 iOS 上的相机.

I'm trying to access the camera on iOS through implementing the getUserMedia API in my React App.

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

I've managed to successfully implement a component that renders and works fine on Chrome however it doesn't seem to work when I navigate to mylocalIP:3000 on iOS Safari. I would be very grateful for any pointers on where my code may be going wrong to not be compatible with 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

推荐答案

原来是 getUserMedia 需要在HTTPS环境下执行.

Turns out that getUserMedia needs to be executed in an HTTPS environment.

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

In Create React App you need to create this HTTPS environment by changing the start script in package.json to "HTTPS=true react-scripts start"

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

The iOS device will warn that the CRA has an invalid signature, however if you proceed to the site, it will then prompt you for access to the webcam.

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

UPDATE: In all my CRA projects I use mkcert to install a Certificate Authority, and then generate certificates for webpack to use when compiling the site in CRA.

在 CRA 项目根目录中:

In CRA project root:

mkcert -install

mkdir .cert &&cd $_ &&mkcert 本地主机

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

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

OR if you don't like executing random commands you don't understand:

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

1. Create a .cert/ folder in the project root
2. Change directory into the .cert/ folder in your terminal
3. Run mkcert localhost
4. Create a .env file in your project root
5. Inside this file add the following:

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

这篇关于getUserMedia API 不适用于 React 中的 iOS Safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！