I am trying to use mediaDevices.getUserMedia to retrieve a portrait orientation media stream, specifically in 9x16 aspect ratio. I am able to do so on Android Chrome and Desktop, but iOS seems to be rotating the video when rendered in an HTML Video tag or recorded to MP4.

Here's specifically the constraints I am using:

navigator.mediaDevices.getUserMedia({
  video: { 
    aspectRatio: 9/16, 
    facingMode: 'user',
    width: { min: 360, ideal: 720, max: 1080 },
    height: { min: 640, ideal: 1280, max: 1920 },
    deviceId: undefined,
    resizeMode: 'none'
   }
  })

This will return me a Media Stream video track with the desired properties:

mediaStream.getVideoTracks()[0]

{
   deviceId: "..."
   facingMode: "user"
   frameRate: 30
   height: 1280
   width: 720
}

I then render that stream on an HTML Video tag. When I do so, the video is rendered rotated so that the video.videoWidth = 1280 and video.videoHeight = 720.

I understand from other posts that MP4 and WEBM videos can have rotation metadata embedded, and that's likely what is happening here.

I then use RecordRTC to record the video and the resulting video is indeed 720x1280, but rotated such that when rendering it displays as landscape format.

I am trying to prevent this rotation from happening, so that I can actually record a portrait video in 720x1280 with no rotation. Chrome (android + desktop) seems to be able to do this crop+scaling for me, but iOS does not. Is there a solution anyone has found to this?