I'm trying to capture the camera input and play it in a video element. This code always works on desktop Chrome and Safari. On iOS it always works while in browser mode using Safari.

The problem I'm facing is it will only sometimes not work in standalone PWA mode (saved to Home Screen) for iOS. I'm not getting any errors, and it will happen seemingly randomly. I'll think I fixed it only for it to happen again hours later. Sometimes closing the app and re-opening works, sometimes it takes 10+ tries. I've tried so many different versions of the code, async, promise based, waiting for onload, canplay, etc.

The stream loads and is active (when permissions are granted), the srcObject shows as properly set, but video.play() doesn't work. I tried waiting for the play promise but sometimes it would just never resolve. The video readyState stays at 0. Sometimes the code will work fine though and the video plays the camera stream like normal.

Any help would be greatly appreciated.

navigator.mediaDevices
    .getUserMedia({
        video: {
            width: { min: 640, ideal: 1280, max: 1920 },
            height: { min: 480, ideal: 720, max: 1080 },
            facingMode: 'environment'
        },
        audio: true
    })
    .then((stream) => {
        let video = document.createElement('video');
        video.controls = true;
        video.muted = true;
        video.playsInline = true;
        video.onerror = function (e) {
            console.log(e);
        };
        video.onabort = function (e) {
            console.log(e);
        };
        console.log(stream);
        try {
            video.srcObject = stream;
        } catch (e) {
            console.log(e);
            window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
            video.src = window.URL && window.URL.createObjectURL(stream);
        }
        console.log('source: ', video.src);
        console.log('sourceObj: ', video.srcObject);
        console.log(video);
        //Dirty hack to try and debug, same result, tried waiting for play promise, play() onloaded, play() oncanplay, all same result
        //video state sometimes gets to 4, sometimes stays at 0
        let interval = setInterval(() => {
            console.log(video.isConnected);
            console.log(video.readyState);
            console.log(video);
            console.log(stream);
            //will sometimes just stay at readyState 0
            if (video.readyState === 4) {
                video.play();
                window.clearInterval(interval);
            }
        }, 500);
    });