Tengo literalmente este problema, pero la solución del OP no funciona para mí.
Sin embargo, para reiterar, estoy usando navigator.mediaDevices.getUserMedia() para capturar la entrada de video en el navegador y todo funciona muy bien en todas las encarnaciones de Chrome, pero la cámara simplemente no se inicia en IOS Safari. Sin error, sin transmisión de video, nada.
Terminé creando un proyecto html vacío que no hace más que mostrar una fuente de video para intentar ver si algún otro de mis códigos puede estar interfiriendo con el código getUserMedia , o si es un problema de safari y parece ser un problema de safari. Lo desplegué aquí si alguien quisiera echar un vistazo y dejarme saber si tiene algo que agregar.
Si alguien sabe de CUALQUIER tipo de solución para esto, por favor hágamelo saber.
Ah, y aquí está el código que está ejecutando esa demostración:
<!-- 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}`); } })();