Estoy usando getUserMedia() para tomar imágenes en una aplicación web vue. Trabajando en todas partes excepto en iOS safari. Se le pide permiso al usuario para acceder a la cámara, después de que el usuario acepta, la cámara se inicia en una pantalla completa en lugar de en el navegador. Tengo que cerrarlo manualmente y luego puedo ver la transmisión de la cámara en mi aplicación web.
¿Se puede evitar esto? Quiero mostrar la transmisión de la cámara en el navegador donde tengo alguna funcionalidad en lugar de iniciar la cámara en pantalla completa después de que el usuario confirme el permiso. Supongo que se trata de un problema de iOS-safari y no de js o Chrome.
Sintaxis básica:
navigator.mediaDevices.getUserMedia(constraints) .then(function(stream) { /* use the stream */ }) .catch(function(err) { /* handle the error */ });En mi caso, agregar el atributo playsinline al elemento resolvió el problema.
Código de trabajo:
<video ref="video" autoplay playsinline /> <script> const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false, }) this.$refs.video.srcObject = stream </script>