After upgrade to iOS 17.2.1, camera video preview shows only half width.

[chrisimmel]

After my iPhone 12 Pro auto-updated to iOS 17.2.1, I see a brand new problem with the react-camera-pro video element that previews the stream coming from the camera. I saw this first in my own application, but I notice it happens also in the demo. I see near-identical behavior in Chrome, Safari, and Firefox browsers.

The issue is that when the camera preview first appears, it fills only half of the video element width. Interestingly, if I switch facing mode, it fills the other half of the video element (see below).

Here it is in the demo app on Safari:

Initial portrait view	After switching the facing mode

The problem disappears in all browsers if I switch the orientation to landscape mode. If I then switch back to portrait mode, it's still fine, and stays fine thereafter until I destroy and recreate the component. By "fine", I mean that the preview fills the entire video element like normal.

Since the issue appeared with an iOS update, it's likely an iOS problem. We can cross our fingers it will be fixed with a subsequent iOS update, but in the meantime I'm wondering if there might be a workaround or a patch we can apply to the library. I've locally forked the repo and tried some naïve tricks in the video constraints with no luck yet.

[chrisimmel]

It does seem that the problem is linked to something unique about react-camera-pro. I don't see it on other apps (web or not) that use my phone camera. Here, for example, I see that the react-webcam component doesn't suffer the same problem in a demo setting:

[chrisimmel]

Update: a workaround in my case is to locally remove the width and height from the video constraints here.

If other folks see this problem and there isn't compelling reason to keep those constraints, I can open a PR. I'll await feedback from @xurban42.

[Sowed]

Update: a workaround in my case is to locally remove the width and height from the video constraints here.

If other folks see this problem and there isn't compelling reason to keep those constraints, I can open a PR. I'll await feedback from @xurban42.

Having the same issue. @chrisimmel have you managed to patch it successfully? Doing so in the dist files is not working for me.

[chrisimmel]

Hi @Sowed, I opened a PR with the fix that works for me: #51

@xurban42, any chance you could have a look? Thanks.

[fernandocalvoAG]

@chrisimmel I tried your approach, and while it did solve the half-back screen issue, the quality of the footage decreased considerably on some phone models.

I spent a couple of hours trying different settings, and I got the best results with these:

width: { min: 1920 },
height: { min: 1920 },

It solved the half-black screen issue on iOS ^17.2 while keeping a reasonable image quality.