Estoy creando una aplicación web para un iPhone. Básicamente, quiero tomar una foto con mi teléfono y que mi logotipo se superponga a la imagen, pero tengo problemas para obtener la resolución máxima, el zoom correcto o la relación de aspecto elegida.

Quiero terminar con una imagen guardada de 1200 px de alto x 630 px de ancho; sin embargo, si la cámara permite una resolución más alta, quiero que la imagen tenga 2x o 3x de ese tamaño para obtener la máxima resolución posible manteniendo la relación de aspecto, que creo que es 1.91 :1 y lo reduciré manualmente.

Adjunté el código y aquí está el violín: https://jsfiddle.net/fn9tv6zb/10/

 // Prefer camera resolution nearest to 1280x720. var constraints = { audio: false, video: { facingMode: { exact: "environment" // exact: "user" } } }; navigator.mediaDevices.getUserMedia(constraints) .then(function(mediaStream) { var video = document.querySelector('video'); video.srcObject = mediaStream; video.onloadedmetadata = function(e) { video.play(); }; }) .catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.

 * { margin: 0; padding: 0; }

 <video playsinline autoplay style="object-fit:cover; width:630px; height:1200px"></video>

Solo necesito que funcione con IOS pero no puedo agregar más a lo que he hecho, estoy dando vueltas.