I'm creating a web application for an iPhone. Basically I want to take a picture with my phone and have my logo overlay the image but I'm struggling getting the maximum resolution, the correct zoom or getting my chosen aspect ratio.

I want to end up with a saved image that is 1200px high x 630px wide however, if the camera allows a higher resolution I want the image 2x or 3x that size to get the maximum resolution possible while keeping the aspect ratio which I believe is 1.91:1 and I will down size it manually.

I've attached the code and here's the fiddle: 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>

I only need it to work with IOS but I can't add anymore to what I've done, I'm going around in circles.