Description

This issue seems to only affect iOS devices when recording in Safari. The issue is that when the orientation is 0 (portrait mode), the recorded video frames are rotated 90 degrees and stretched to fit the 9:16 orientation. If you rotate the device 90 degrees to the left and record in landscape mode, the video frames are recorded upside down but maintain the correct aspect ratio. If you rotate 90 degrees to the right and record in landscape, the video frames are recorded right side up with the correct aspect ratio. Given that Media Recorder and RTC are experimental features in iOS Safari, I'm not sure if these issues are an artifact of the data coming from the browser, or if there's an underlying issue with videojs-record in handling these orientations.

Steps to reproduce

In iOS Safari, record a video in portrait mode and download the resultant webm. Play back the video and notice the rotation of the frame and distortion of the aspect ratio. Rotate 90 degrees left (and right) and record landscape orientation. Download the resultant webms and play back. Only the one rotated 90 degrees to the right plays back correctly.

Expected

Portrait mode should produce a video in portrait orientation with the indicated aspect ratio (in my case, 9:16).
Landscape mode, regardless of specific orientation, should produce a video in the indicated aspect ratio (16:9), right side up.

Actual

Portrait mode recorded frames are rotated 90 degrees and stretched to the portrait mode aspect ratio.
Landscape mode, when rotated to the left, plays back upside down.

Error output

No errors.

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

VIDEOJS: Using video.js 7.5.4 with videojs-record 3.6.0 and recordrtc 5.5.4

browsers

Safari
Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.16 (KHTML, like Gecko) Version/12.1 Mobile/15E148 Safari/604.1

OSes

iOS 12.2