Create-react-app: CRA WebServer isn't rendering getUserMedia API for iOS Safari properly.

Created on 24 Dec 2019 · 3Comments · Source: facebook/create-react-app

Describe the bug

I'm trying to access the camera on iOS through implementing the getUserMedia API in my React App. My code works fine when I navigate run it in StackBlitz on iOS Safari. However when I navigate to mylocalIP:3000 on iOS Safari, the component doesn't prompt for access to the webcam. See my component here or below:

const Video: React.FC = () => {
    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

Did you try recovering your dependencies?

Yes, followed all steps.

Which terms did you search for in User Guide?

Nothing relevant in the User Guide

Environment

Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Binaries:
Node: 10.14.1 - ~/.nvm/versions/node/v10.14.1/bin/node
Yarn: Not Found
npm: 6.10.3 - ~/.nvm/versions/node/v10.14.1/bin/npm
Browsers:
Chrome: 79.0.3945.88
Firefox: Not Found
Safari: 13.0.4
npmPackages:
react: ^16.10.2 => 16.10.2
react-dom: ^16.10.2 => 16.10.2
react-scripts: 3.2.0 => 3.2.0
npmGlobalPackages:
create-react-app: 3.3.0