I'm having literally this issue but the OP's solution isn't working for me.
To reiterate though, I'm using navigator.mediaDevices.getUserMedia() to capture video input in the browser and everything's working great on all incarnations of chrome, but the camera just doesn't start up on IOS safari. No error, no video feed, nothing.
I ended up creating an empty html project that does nothing other than show a video feed to try and see if it's some of my other code maybe interfering with the getUserMedia code, or if it's a safari issue and it seems to be a safari issue. I deployed it here if anyone would pls take a look and lemme know if you have anything to add.
If anyone knows of ANY sort of work-around for this, please let me know.
Oh and here's the code that that demo's running:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
<title>getUserMedia to canvas</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<video playsinline autoplay></video>
<script src="./index.js" ></script>
</body>
</html>
// index.js
const video = document.querySelector('video');
(async () => {
try {
const devices = (await navigator.mediaDevices.enumerateDevices()).filter(v => v.kind === 'videoinput');
const deviceId = devices.findIndex(v => v.label.includes("Back"))?.deviceId || devices[0].deviceId;
const stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { width: 720, deviceId } });
console.log(`stream: ${stream.id.substring(0, 4)}\nactive: ${stream.active}`);
alert(`stream: ${stream.id.substring(0, 4)}\nactive: ${stream.active}`);
video.srcObject = stream;
} catch (err) {
console.log(`err: ${err.name}: ${err.message}`);
alert(`err: ${err.name}: ${err.message}`);
}
})();
