Why the result photo is zoom in than actual before take the picture❓

[mughniaziz004]

Question

Why the result after Camera.takePhoto() is zoom in before take the picture ?

thats my code useCameraDevice and useCameraFormat

this code for create CameraUI in my app

What I tried

I tried setting the aspect ratio of camera in component Camera

VisionCamera Version

3.4.1

Additional information

• [ ] I am using Expo
• [X] I have read the Troubleshooting Guide
• [X] I agree to follow this project's Code of Conduct
• [X] I searched for similar questions in the issues page as well as in the discussions page and found none.

[Kieraano]

Hi,

I'm also seeing this on Android. I'm getting the issue with both Samsung and Google Pixel (both front and back cameras).

The photo that is taken is either more zoomed or less zoomed than the camera preview was at the time the photo is taken.

This is true even if the Camera preview and Result photo preview are both set to "contain". Often the resulting photo will show details that were never in the preview.

Is it taking the photo using a different format than the preview is displayed with? Or is this a configuration issue on our end?

I have read the docs.

Thanks,

[Kieraano]

I'm still testing, but here's my current understanding of what happens:

• When you select the format using useCameraFormat, it selects a format for you based on those requirements you're passing in. That format will contain both a photo resolution and a video resolution. The key thing to understand is that depending on the phone, there will often be formats where the aspect ratio of the photo and the aspect ratio of the video are completely different (like 0.56 vs. 0.81 for the same format!).

• The camera preview always displays using the video aspect ratio rather than the photo aspect ratio.

• Because of this, it can cause a complete mismatch between what you see and what you get when you take a photo.

To mitigate this, you likely want to update your code to look more like this:

const format = useCameraDevice(device, [ {photoAspectRatio: aspectRatio}, {videoAspectRatio: aspectRatio}, {photoResolution: 'max'} ]

This should prioritise fetching a format where the photo and video aspect ratios are the same, and then the camera preview should match the output photo.

I'm still learning how all of this works, so somebody please correct me if I'm wrong.

Edit: Must be something more going on. On my Google Pixel phone the output photo is still sometimes zoomed out (contains content around the sides that wasn't in the preview), even with the aspect ratios matching and everything set to contain.

This behavior is flaky - sometimes it happens sometimes it doesn't.

["Format", {"autoFocusSystem": "contrast-detection", "fieldOfView": 80.85662574623183, "maxFps": 30, "maxISO": 8982, "maxZoom": 8, "minFps": 1, "minISO": 45, "photoHeight": 1440, "photoWidth": 1920, "pixelFormats": ["yuv", "native"], "supportsDepthCapture": false, "supportsPhotoHdr": false, "supportsVideoHdr": false, "videoHeight": 1080, "videoStabilizationModes": ["off", "standard", "cinematic", "off", "cinematic-extended"], "videoWidth": 1440}]

[carlos-yoinks]

• The camera preview always displays using the video aspect ratio rather than the photo aspect ratio.

@Kieraano You don't know how many hours I had spent trying to fix a problem with the aspect ratio and how it fit on the screen. And now, just reading The camera preview always displays using the video aspect ratio rather than the photo aspect ratio. fixed my problem on Android devices.

[Kieraano]

• The camera preview always displays using the video aspect ratio rather than the photo aspect ratio.

@Kieraano You don't know how many hours I had spent trying to fix a problem with the aspect ratio and how it fit on the screen. And now, just reading The camera preview always displays using the video aspect ratio rather than the photo aspect ratio. fixed my problem on Android devices.

Glad I could help. Here's the context I found for that behaviour: https://github.com/mrousavy/react-native-vision-camera/pull/1817#issuecomment-1727593746

Maybe worth adding to the Readme so that other people don't get caught up by it.

[mrousavy]

Preview is in video aspect, yes. There is one bug (https://github.com/mrousavy/react-native-vision-camera/issues/2142) which I'm fixing soon