Video size not same as setting in mobile safari (portrait)

[jacob-duong]

The video size on Mobile Safari is not provided as expected: I define the size: 240x300 but safari provided: 240x195 (portrait)

https://codepen.io/tuduong/pen/xxqNwXa

<Webcam audio={true} width={240} height={300} forceScreenshotSourceSize={true} id="webcam" ref={webcamRef} onUserMedia={e => console.log(e)} screenshotFormat="image/jpeg" videoConstraints={{ width: 240, height: 300, facingMode: "user", }} />

[atav32]

Which iOS version is this on?

[JosepSalvat]

I've the same problem on Android and chrome. It doesn't maintain the aspect ratio: 9:16

[NahidAhmed07]

Android and chrome. It doesn't maintain the aspect ratio: 9:16

[sukh-noah]

This issue still exists. Haven't tried Android, but iOS flips the aspect ratio as if portrait = landscape and landscape = portrait. Anyone found a good solution for this?

[ianiscardona]

This issue still exists. Haven't tried Android, but iOS flips the aspect ratio as if portrait = landscape and landscape = portrait. Anyone found a good solution for this?

you found anything about this?

[sukhsinghcodes]

This issue still exists. Haven't tried Android, but iOS flips the aspect ratio as if portrait = landscape and landscape = portrait. Anyone found a good solution for this?

you found anything about this?

No. I'm just checking if the device is mobile and inverting the aspect ratio for it. I used react-device-detect to check if it's mobile only.

I also tried to use a different camera lib react-camera-pro, but this didn't work for me because of the dependancies it required me to install. Might be worth trying this one out for your case to see if it has the same problem as this lib.

[rizfarchanresthu]

This issue still exists. Haven't tried Android, but iOS flips the aspect ratio as if portrait = landscape and landscape = portrait. Anyone found a good solution for this?

you found anything about this?

No. I'm just checking if the device is mobile and inverting the aspect ratio for it. I used react-device-detect to check if it's mobile only.

I also tried to use a different camera lib react-camera-pro, but this didn't work for me because of the dependancies it required me to install. Might be worth trying this one out for your case to see if it has the same problem as this lib.

Hello. So I don't think this is a solution that encompass all, but in Google Chrome (desktop and android) I used react-detect-device isMobile props to detect whether I used mobile or not, and I found something interesting with the videoConstraints prop for this library.

What I want to do: make the camera portrait on mobile and desktop.

I wrote let videoConstraints = null; if(isMobile || isMobileSafari) { videoConstraints = { facingMode: 'user', height: { min: 480 }, width: { min: 720 }, aspectRatio: 1.5, } } else { videoConstraints = { facingMode: 'user', height: { min: 720 }, width: { min: 480 }, aspectRatio: 0.6666666667, } } and it's basically solved the problem of the aspect ratio/width height on Chrome Desktop and Chrome Android. What I find interesting is that in Google Chrome's desktop's mobile mode, it fails to become a portrait and instead a landscape.

My possible theories are:

1. In Chrome Desktop desktop mode, the videoConstraints read as correct.
2. In Chrome Android, the videoConstraints flipped the height and width.
3. But in Chrome Desktop mobile mode (where react-detect-device read isMobile as true) it doesn't flip the height and width like it was on android.
4. I missed something about the aspectRatio key when I set it as it is (I googled and it's width/height, correct me if I'm wrong). Weirdly, if the isMobile if block use 0.666667 aspect ratio, it will be a square (1:1) on Chrome Desktop mobile mode, but landscape on Chrome Android.

Do please tell me if I did something wrong. This is my first time posting in the issues section.