I am writing a webpage that displays the camera image at full size. It is meant to be used on iPads only so I made a constraint to adapt the camera resolution to 768x1024 (Provisional, just for testing the size).

The image displays on a <video> tag

The problem is that when I setup the constraint my first camera gets disabled and the page displays OBS Camera output.

Constraint

const MEDIA_CONSTRAINTS = {
    video: { 
        width: { ideal: 768 }, 
        height: { ideal: 1024 } 
    }
};

GetUserMedia

    navigator.getUserMedia(MEDIA_CONSTRAINTS, 
        (stream) => {
            video.srcObject = stream;
            }, 
        (err) => console.error(err)
    )

I think this happens when I put a height higher than 720. I am testing this on PC right now, so it may still work on iPad but I want to make sure it works in any device.