🐛 Camera Preview does not align with taken picture about react-native-vision-camera HOT 6 OPEN

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)

from react-native-vision-camera.

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.

from react-native-vision-camera.

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?

from react-native-vision-camera.

Seems related to this issue: #2845

from react-native-vision-camera.

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>
  );
}

from react-native-vision-camera.

same issue, in cover mode, the preview size is slightly larger than the actual photo size. How to solve this problem?

from react-native-vision-camera.