Estoy intentando ejecutar el siguiente código en Safari en iOS 11. Debería solicitar al usuario que otorgue acceso a la cámara de su dispositivo y luego lo muestre en mi elemento <video autoplay id="video"></video>. Sin embargo, cuando se ejecuta en iOS 11, se genera un OverconstrainedError:

{message: "Invalid constraint", constraint: ""}
  • El código funciona bien en Android y abre con éxito la cámara.
  • He intentado múltiples configuraciones válidas sin suerte.

Sé que iOS 11 acaba de salir, por lo que puede ser un error, pero ¿alguna idea? ¿Se ha encontrado alguien mas con esto?

Código:

var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
     navigator.mediaDevices.getUserMedia({video: true})
         .then(function(stream) {
             video.src = window.URL.createObjectURL(stream);
             video.play();
         })
         .catch(function(err) {
             console.log(err);
         });
}

Editar 1

Ejecuté navigator.mediaDevices.getSupportedConstraints() y me devuelve lo siguiente:

{
    aspectRatio: true,
    deviceid: true,
    echoCancellation: false,
    facingMode: true,
    frameRate: true,
    groupId: true,
    height: true,
    sampleRate: false,
    sampleSize: false,
    volume: true,
    width: true
}

He intentado configuraciones omitiendo la propiedad video, pero no tuve suerte.

14
mb-ca 27 oct. 2017 a las 22:08

3 respuestas

La mejor respuesta

Parece haber sido un error que se corrigió, porque lo intenté nuevamente y el mensaje de error ya no aparece.

Tenga en cuenta que si bien el mensaje de error desapareció, tuve que hacer un cambio más para que funcione, que fue agregar video.srcObject = stream; en la devolución de llamada then.

3
mb-ca 7 dic. 2017 a las 20:25

Recuerde que el simulador de iOS que viene con Xcode no es compatible con la cámara web o el micrófono, por lo que puede obtener el error OverconstrainedError (según https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia documentos, lo que significa que ningún dispositivo se ajusta a las opciones pasadas , incluso si no estás poniendo detalles)

3
Tom Roggero 19 feb. 2018 a las 21:18

El error de restricción no válido en safari se debe a que el navegador espera que pase un ancho correcto, uno de:

  • 320
  • 640
  • 1280

La altura se calcula automáticamente en una relación de aspecto de 4: 3 para 320 o 640 y 16: 9 para 1280, luego, si pasa un ancho de 320, la transmisión de video se establece en:

  • 320x240

Si establece un ancho de 640, su transmisión de video se configura en:

  • 640x480

Y si establece un ancho de 1280, su transmisión de video se configura en:

  • 1280x720

En cualquier otro caso, recibió un error "InvalidConstrain" para el valor de ancho.

También puede usar restricciones mínimas, máximas, exactas o ideales para el ancho, consulte documentación de MDN

Aquí un ejemplo en este codepen

var config = { video: { width: 320/*320-640-1280*/ } };
var start = () => navigator.mediaDevices.getUserMedia(config)
  .then(stream => v.srcObject = stream)
  .then(() => new Promise(resolve => v.onloadedmetadata = resolve))
  .then(() => log("Success: " + v.videoWidth + "x" + v.videoHeight))
  .catch(log);

var log = msg => div.innerHTML += "<p>" + msg + "</p>";

PD: en Chrome puede establecer un ancho de altura y la transmisión de video se establece en estos tamaños, Firefox hace un distancia física, y Safari espera una coincidencia exacta.

14
kintaro 13 jun. 2018 a las 16:21