Camera image stretched but fixed when height value updates.💭

[Sfeeen]

Question

I'm using version 3.9.0 of the vision camera. I made an app to take images with the camera and it works normal on a Redmi Xiaomi device. But when I use a samsung galaxy A12 for testing/developing the image I get from the camera is stretched. This is how my camera is defined. cameraheight = 16 / 9 * screen.width

        <Camera
          ref={myCamera}
          photo={true}
          device={device}
          focusable={false}
          isActive={cameraLoaded}
          format={format}
          style={{height: cameraheight + 1}}
          onError={handleCameraError}
          onInitialized={() => {
            console.log("camera ready!")
            setIsCameraReady(true)
          } }
        />

What I tried

When I make any change to the style property of the camera, e.g. add 1 to the cameraheight. The images refreshes and is suddenly not stretched anymore. When the camera gets unloaded and loaded again the image is stretched again

VisionCamera Version

3.9.0

Additional information

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

[Dingenis]

I think this might be a duplicate of #2583

[lucksp]

I too am seeing this same issue since updating from version "3.6.4". #2583 is closed, we should reopen or keep this now.

I get an error message, which I do not understand since I am using the useCameraDevice hook:

Camera.onError(device/no-device): [device/no-device] No device was set! Use useCameraDevice(..) or Camera.getAvailableCameraDevices() to select a suitable Camera device.

  const cameraRef = useRef<Component<AnimatedProps<CameraProps>>>(null);
  const device = useCameraDevice('back', {
    physicalDevices: ['ultra-wide-angle-camera', 'wide-angle-camera'],
  });
  const isFocused = useIsFocused();
  const isForeground = useIsForeground();
  const isActive = isFocused && isForeground;

  useEffect(
    function checkPermissions() {
      const status = Camera.getCameraPermissionStatus();
      setCameraPermission(status);
      if (cameraPermission === 'granted') return;
      Camera.requestCameraPermission();
    },
    [cameraPermission]
  );

{!!device && (
            <Reanimated.View>
              <Camera
                animatedProps={animatedProps}
                device={device}
                isActive={isActive}
                photo
                ref={cameraRef}
                style={styles.cameraContainer}
              />
            </Reanimated.View>
      )}

All I did was upgrade my RNVC package to ^3.9.1 since I also updated react native to 0.73.4 as part of the Expo SDK50 update.

[lucksp]

I think this might be a duplicate of #2583

Also a dupe of #2142

[mrousavy]

Hey! I just released a new V4 beta (v4.0.0-beta.7) where I fixed a bunch of issues! 💪🚀 Can you test that and see if that fixes the issue for you? 😅

yarn add react-native-vision-camera@beta

You might need to increase the compileSdk to the newest Android SDK (34) if you are behind.

[j3kin000]

Hey! I just released a new V4 beta (v4.0.0-beta.7) where I fixed a bunch of issues! 💪🚀 Can you test that and see if that fixes the issue for you? 😅

yarn add react-native-vision-camera@beta

You might need to increase the compileSdk to the newest Android SDK (34) if you are behind.

The stretched issue is fixed but then the onCodeScanned wont be trigger when scanning qr/barcodes

[lucksp]

Anyone here using Expo with Android SDK (34)?

[mrousavy]

The stretched issue is fixed but then the onCodeScanned wont be trigger when scanning qr/barcodes

I just fixed the Code Scanner issue in the latest V4 beta.

[Sfeeen]

Tested with the V4 beta and works normally!

[meleffendi]

Hey! I just released a new V4 beta (v4.0.0-beta.7) where I fixed a bunch of issues! 💪🚀 Can you test that and see if that fixes the issue for you? 😅

yarn add react-native-vision-camera@beta

You might need to increase the compileSdk to the newest Android SDK (34) if you are behind.

I was having a similar issue. The frame width and height were coming out equal when they are not. The update fixed it! I I was also getting 10 FPS on a OnePlus5 device and now I'm getting 17. (I'm using a native Frame Processor). Great job man!! I love this library

[mrousavy]

Thanks guys, great to hear that V4 now works perfectly! If you appreciate my work, please consider 💖 sponsoring me on GitHub 💖 so I can keep maintaining this library, fixing bugs and building new features! :)

[pranavb2402]

Can someone provide the patch for the issue so that I don't need to upgrade the SDK version.