Open Zoxive opened 1 month ago
Hey!
Preview is a video-stream, so it uses the aspect ratio from videoResolution
/videoAspectRatio
in the Format.
You could prioritize video aspect ratio by moving it up, but then the photo still looks different.
I guess some photos just have a different aspect ratio for the photos stream or the video stream.
Does it look proper when you set both photoAspectRatio
and videoAspectRatio
to 4 / 3
? Remove the fps
from the filter as well, that may exclude some filters as it is spot 1 (highest priority)
I removed all filters, only put in a videoAspectRatio
and nothing changes, also tried combinations of just photoAspectRatio
and flipping their order.
It just feels like resizeMode='contain'
is hard coded (somewhere) to 4/3 ish.
I think after all this testing, im just going to use resizeMode='cover'
(or really just remove the prop as its the default), as that seems like what all example apps use and its fairly close.
TL;DR
After lots of testing i think best practices with v4 is use no resizeMode
(aka 'cover'), and ensure that the Preview's <View>
's aspect ratio is the same as your photo format.
And maybe recommend to delete this prop since it doesn't seem to do much with v4 just causes confusion? Or I'm still doing something wrong.
And maybe recommend to delete this prop since it doesn't seem to do much with v4 just causes confusion?
Not true. On iOS it works fine. Also it does change behaviour on Android. Why would I delete that prop?
Seems related to this issue: https://github.com/mrousavy/react-native-vision-camera/issues/2845
I am also facing this issue with iPad Pro 10.5 inch(17.4.1) in front camera, for back camera it is working fine and i also tested with android 12 (vivo s1 pro) it is working good.
const device = useCameraDevice(state.position);
const format = useCameraFormat(device, [
{photoAspectRatio: 4 / 3},
{videoAspectRatio: 4 / 3},
{
photoResolution: {
height: 520,
width: 390,
},
},
{
videoResolution: {
height: 520,
width: 390,
},
},
]);
const CaptureImage = async () => {
const photo = await cameraRef.current?.takePhoto();
console.log(photo);
setState(prev => ({
...prev,
url: photo?.path,
}));
};
return (
<View style={{flex: 1, backgroundColor: '#fff'}}>
<View style={{flex: 1}}>
<Camera
ref={cameraRef}
photo
isActive
format={format}
device={device}
style={{
// height: 520,
// width: 390,
aspectRatio: 3 / 4,
}}
/>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-evenly',
}}>
<Button title="Capture" color={'green'} onPress={CaptureImage} />
<Button
title="Switch"
color={'red'}
onPress={() => {
setState(prev => ({
...prev,
position: prev.position == 'front' ? 'back' : 'front',
}));
}}
/>
</View>
</View>
);
}
same issue, in cover mode, the preview size is slightly larger than the actual photo size. How to solve this problem?
O(∩_∩)O~邮件已至,谢谢!
What's happening?
After upgrading to v4 (from v3) the preview with
resizeMode='contain'
is not respecting the cameraFormats aspect ratios.In my use-case for react-native-vision-camera, I need to allow my users to align fairly precisely with the Preview view so when they do take a picture its aligned. I am using ML models for object detection, but at the moment after the picture is taken. (I've already dabbled with frame processors to do the ML, but I have some improvements in my ML model to do first)
In the Example App, resizeMode is not used. Is the resizeMode prop mostly dead with v4?
Example Reproduction Code: https://github.com/Zoxive/ReactNativeVisionCamera_PreviewBug
Video Recordings Examples
using resizeMode = 'contain'
https://github.com/mrousavy/react-native-vision-camera/assets/124676/efcdc85c-de31-4afe-a988-09b56670b7c7
using resizeMode = 'cover'
https://github.com/mrousavy/react-native-vision-camera/assets/124676/b2f2ffb9-02ba-4059-a727-f8802fd08d90
Possibly Similar Issue: https://github.com/mrousavy/react-native-vision-camera/issues/2843
Reproduceable Code
Relevant log output
Camera Device
Device
Google Pixel 6 Pro
VisionCamera Version
4.0.3
Can you reproduce this issue in the VisionCamera Example app?
I reproduced with an empty Expo App.
Additional information