🐛 Camera stretched on Android #2142

NuraQ · 2023-11-08T12:07:00Z

What's happening?

Camera is stretched on Android, behavior is not consistent as sometimes when closing the navbar and reopening the stretch is gone.
.

issue reproduced on these two devices:

Samsung Galaxy S9 SM G960F, Android version 8
OnePlus 5T, Android version 10

Reproduceable Code

const device = useCameraDevice('back');    
const format =  getCameraFormat(device, [
        { resizeTo: { width: camContainerPosition?.width ?? '', height: 
        camContainerPosition?.height ?? '' } },
        { photoResolution: 'max' },
        { videoResolution: 'max' },
        { autoFocusSystem: 'contrast-detection' },
        { videoStabilizationModes: ['on', 'on', 'cinematic-extended'] } 
    ]);
    const fps = format.maxFps >= 240 ? 240 : format.maxFps;
    const touchToFocus = async (event) => {
        if (!device.supportsFocus || !isCameraFocusReady.current) return;
        let point = {
            x: Math.round(event.pageX - camLocation.x),
            y: Math.round(event.pageY - camLocation.y)
        };
        try {
            isCameraFocusReady.current = false;
            await cameraRef?.current?.focus(point);
            setTimeout(() => {
                isCameraFocusReady.current = true;
            }, 200);
        } catch (error) {

        }
    };
 <Camera
   format={format}
   isActive={isAndroid ? !paused : true}
   photo={true}
   orientation={'portrait'}
   ref={cameraRef}
   enableHighQualityPhotos={true}
   fps={fps}
   preset='photo'
   enableZoomGesture={true}
   onLayout={handleCameraLayout}
   device={device}
   zoom={device.neutralZoom}
   style={{ flex: 1 }}
   onTouchEnd={(x) => touchToFocus(x.nativeEvent)}
   />

Relevant log output

no logs

Camera Device

{"sensorOrientation":
"landscape-right",
"hardwareLevel": "full",
"maxZoom": 8,
"minZoom":1,
"supportsLowLightBoost":false,
"neutralZoom":1,
"physicalDevices":["wide-angle-camera"],
"supportsFocus":true,
"supportsRawCapture" true,
"isMultiCam":false,
"name":"BACK(0)",
"hasFlash" true,
"has Torch" true,
"position":"back",
"id":"0"}

Device

OnePlus 5T, Android version 10

VisionCamera Version

3.6.4

Can you reproduce this issue in the VisionCamera Example app?

I didn't try (⚠️ your issue might get ignored & closed if you don't try this)

Additional information

I am using Expo
I have enabled Frame Processors (react-native-worklets-core)
I have read the Troubleshooting Guide
I agree to follow this project's Code of Conduct
I searched for similar issues in this repository and found none.

rsnr · 2023-11-08T12:11:05Z

@mrousavy Sponsoring this one as well :)

bglgwyng · 2023-11-09T06:32:26Z

Could you check if format is undefined?

mrousavy · 2023-11-09T09:52:29Z

@rsnr thank you!! ❤️

behavior is not consistent as sometimes when closing the navbar and reopening the stretch is gone.

@NuraQ so if you minimize the app and open it again, it looks correct? Then it's definitely a race condition in PreviewView's set size funcs.

I'll investigate this soon!

NuraQ · 2023-11-09T13:04:16Z

@mrousavy After testing on two devices, this was the result:

on One Plus, it was consistent.
"Minimizing" by the right button, or sending to background by the middle button, did not have impact (still camera is stretched).
On Samsung, I think the back middle button doesn't always behave the same in terms of impact no stretching ( it some times fixes stretch issue and sometimes it doesn't).

mrousavy · 2023-11-10T11:56:05Z

okok lemme take a look over the weekend or next week, its a race condition

j-jonathan · 2023-11-23T20:04:49Z

Hey,

I've just started integrating react-native-vision-camera v3 into my project (i'm currently using react-native-camera) and encountered some issues related to aspect ratio on Android (similar to the problem described in this opened issue).

Usage

I am using the resizeMode='contain' mode to display the entire preview:

<Camera
    ref={this.cameraRef}
    style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
    device={device}
    format={format}
    isActive={true}
    photo={isPhoto}
    video={isVideo}
    audio={isVideo}
    resizeMode='contain'
/>

Tested on:

HUAWEI P30 (ELE-L29) with Android 10
react-native: 0.72.4
react-native-vision-camera: 3.6.10

Issues

Observed Issues when I switch from one format to another:

The view is never resized (the call to requestLayout() doesn't seem to work).
The aspect ratio is not always correct after a format change.

For the first issue, it appears to be a problem related to react-native.
I found a solution on this GitHub issue: facebook/react-native#17968

Here is the patch to fix the issue:

diff --git a/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/CameraView.kt b/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/CameraView.kt
index 0aa8932..7b1c91e 100644
--- a/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/CameraView.kt
+++ b/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/CameraView.kt
@@ -242,4 +242,17 @@ class CameraView(context: Context) :
   override fun onCodeScanned(codes: List<Barcode>, scannerFrame: CodeScannerFrame) {
     invokeOnCodeScanned(codes, scannerFrame)
   }
+
+  override fun requestLayout() {
+    super.requestLayout()
+    post(measureAndLayout)
+  }
+
+  private val measureAndLayout = Runnable {
+    measure(
+        MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+        MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
+    )
+    layout(left, top, right, bottom)
+  }
 }

For the second issue, it occurs when the surface is updated ("PreviewView Surface updated!").
The ratio is not necessarily updated, and I don't know why.

The only solution I found is to restart the entire device configuration.

Here is the patch to fix the issue:

diff --git a/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/core/CameraSession.kt b/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/core/CameraSession.kt
index 8ad60cc..15b85ff 100644
--- a/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/core/CameraSession.kt
+++ b/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/core/CameraSession.kt
@@ -187,6 +187,19 @@ class CameraSession(private val context: Context, private val cameraManager: Cam

         override fun surfaceChanged(holder: SurfaceHolder, format: Int, width: Int, height: Int) {
           Log.i(TAG, "PreviewView Surface updated! ${holder.surface} $width x $height")
+
+          launch {
+            mutex.withLock {
+              try {
+                configuration?.let { configuration ->
+                  configureOutputs(configuration)
+                  configureCaptureRequest(configuration)
+                }
+              } catch (error: Throwable) {
+                Log.e(TAG, "Failed to configure CameraSession! Error: ${error.message}", error)
+              }
+            }
+          }
         }

         override fun surfaceDestroyed(holder: SurfaceHolder) {

However, this is not perfect, and the camera does not load instantly (refer to the 3rd video where you can see the incorrect ratio, and then 1 or 2 seconds later, the correct ratio after reloading the camera configuration).

@mrousavy > Do you have any idea where this issue might be coming from? I've tried various approaches but haven't found an alternative fix. I'm available to experiment with other solutions if needed.

Videos

To illustrate, here are videos of my application at different stages of the fixes:

Without any fix:
https://github.com/mrousavy/react-native-vision-camera/assets/78229184/98129bb6-8a15-4ff4-a79a-e0d8b30ceb7d

With the first fix:
https://github.com/mrousavy/react-native-vision-camera/assets/78229184/0d2e47d8-04ed-4c4e-b1c8-31895babd88e

With the two fixes:
https://github.com/mrousavy/react-native-vision-camera/assets/78229184/6458f9e9-b6b6-4273-a4b5-58ea4ec72dc8

mrousavy · 2023-11-24T17:20:43Z

Hey - thanks for the insights man! I need to take a look at this, probably just a small fix to avoid any race conditions here. Will have some free time soon, maybe in 1-2 weeks

acesetmatch · 2023-12-14T16:51:48Z

Has there been any progress on this? Still experiencing the issue

bpeck81 · 2023-12-31T23:08:11Z

Not sure if this helps, but when displaying an image taken with the camera, I found that I had to swap the height and width properties returned from the photo object.

const photo = await cameraRef.current.takePhoto()

JuMaruhn · 2024-01-04T08:26:05Z

Here is a (dirty) quickfix that helps me:

Add the line:

private val aspectRatio: Float get() = size.width.toFloat() / size.height.toFloat()

to the class PreviewView in
react-native-vision-camera/android/src/main/java/com/mrousavy/camera/core/PreviewView.kt.

Then change the methode onMeasure in the same file to:

@SuppressLint("DrawAllocation")
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec)
  val viewWidth = MeasureSpec.getSize(widthMeasureSpec)
  val viewHeight = MeasureSpec.getSize(heightMeasureSpec)

  Log.i(TAG, "PreviewView onMeasure($viewWidth, $viewHeight)")

  val newWidth: Int
  val newHeight: Int

  val actualRatio = if (viewWidth > viewHeight) aspectRatio else 1f / aspectRatio
  if (viewWidth < viewHeight * actualRatio) {
    newHeight = viewHeight
    newWidth = (viewHeight * actualRatio).roundToInt()
  } else {
    newWidth = viewWidth
    newHeight = (viewWidth / actualRatio).roundToInt()
  }

  Log.d(TAG, "Measured dimensions set: $newWidth x $newHeight")
  setMeasuredDimension(newWidth, newHeight)
}

Alexis200007 · 2024-01-04T21:12:55Z

Here is a (dirty) quickfix that helps me:

Add the line:

private val aspectRatio: Float get() = size.width.toFloat() / size.height.toFloat()

to the class PreviewView in react-native-vision-camera/android/src/main/java/com/mrousavy/camera/core/PreviewView.kt.

Then change the methode onMeasure in the same file to:

@SuppressLint("DrawAllocation")
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec)
  val viewWidth = MeasureSpec.getSize(widthMeasureSpec)
  val viewHeight = MeasureSpec.getSize(heightMeasureSpec)

  Log.i(TAG, "PreviewView onMeasure($viewWidth, $viewHeight)")

  val newWidth: Int
  val newHeight: Int

  val actualRatio = if (viewWidth > viewHeight) aspectRatio else 1f / aspectRatio
  if (viewWidth < viewHeight * actualRatio) {
    newHeight = viewHeight
    newWidth = (viewHeight * actualRatio).roundToInt()
  } else {
    newWidth = viewWidth
    newHeight = (viewWidth / actualRatio).roundToInt()
  }

  Log.d(TAG, "Measured dimensions set: $newWidth x $newHeight")
  setMeasuredDimension(newWidth, newHeight)
}

Thanks, it works for me

canhtvee · 2024-01-07T08:56:52Z

It's a race condition, I fixed it on JS side by init the camera dimension at zero, settimeout waiting for the camera launch, and then resizing the camera view.

Jigar2311 · 2024-01-10T13:27:34Z

i am also have this issue but when i make orientation lock to landscape

Alexis200007 · 2024-01-10T13:56:36Z

@Jigar2311 I had the same problem in landscape mode and the fix of @JuMaruhn fixed my problem.

iamtommcc · 2024-01-11T00:40:45Z

@JuMaruhn's fix partially fixed my issue - it made the preview properly fill its container (I was getting blank bars on the sides), but for me the preview was still distorted. This was on a Samsung Galaxy S22.

I too experienced some inconsistency, sometimes it would fix itself by flipping between front/back, minimising app, etc.

I was able to workaround this issue by not feeding in format straight away, and instead doing this:

function CameraPreview() {
  const [isInitialised, setIsInitialised] = useState(false);

  return (
    <View onLayout={() => setIsInitialised(true)}>
      <CameraView
        format={
          !isInitialised && Platform.OS === "android" ? undefined : format
        }
        resizeMode={"contain"}
        style={{
          aspectRatio: 3 / 4,
        }}
        {...yourOtherProps}
      />
    </View>
  );
}

This is very similar to @j-jonathan's approach except I think it's a little lighter/quicker than reinitialising the entire camera config.

Jigar2311 · 2024-01-11T05:17:55Z

@Jigar2311 I had the same problem in landscape mode and the fix of @JuMaruhn fixed my problem.

Sure @Alexis200007, let me see if it works for me

Jigar2311 · 2024-01-11T08:13:00Z

@Alexis200007 the stretching problem is fixes but i am using custom hight and width of video recording so i am passing the height and width in the format but it's not working for landscape.

const getPictureSizeAndroid = () => {
    let vQuality = statusSlice.currentVideoQuality;
    console.log('vQuality', vQuality);
    if (pDetail) {
        vQuality = pDetail?.videoHeightWidth?.width;
    }
    let returnValue = {};
    if (vQuality == staticStrings.VIDEO_QUALITY_1080) returnValue = { width: 1080, height: 1920 };
    else if (vQuality == staticStrings.VIDEO_QUALITY_720) returnValue = { width: 720, height: 1280 };
    else returnValue = { width: 1080, height: 1920 };
    return returnValue;
};

const format = useCameraFormat(device, [
    { fps: targetFps },
    {
        videoResolution: {
            height: isLandscape ? getPictureSizeAndroid()?.width : getPictureSizeAndroid()?.height,
            width: isLandscape ? getPictureSizeAndroid()?.height : getPictureSizeAndroid()?.width,
        },
    },
    { photoAspectRatio: screenAspectRatio },
    { photoResolution: 'max' },
]);

mgvictor7 · 2024-01-11T11:01:37Z

I have the same problem in the version 3.7.0
In version 3.5.1 there was no this problem

I have tried to solve the problem by updating the size in the camera style 250 milliseconds after the component has been mounted
but I don't like this

...
const [adjustCameraSize, setAdjustCameraSize] = useState(false);

useEffect(() => {
    if (device && isFocussed && cameraPermission === Permissions.RESULTS.GRANTED) {
      setTimeout(() => {
        setAdjustCameraSize(true);
      }, 250);
    }
  }, [isFocussed, device, cameraPermission]);

...

<Camera
       style={[{ ...StyleSheet.absoluteFill }, { width: adjustCameraSize ? '100%' : '120%' }]}
       device={device}
        isActive
        codeScanner={codeScanner}
      />

mrousavy · 2024-01-11T11:59:09Z

Hey! Does this fix your issue maybe? #2377 (still testing)

mrousavy · 2024-01-11T15:45:11Z

Hey!

After 8 hours of debugging, I finally found the culprit! I fixed the preview stretching issue in this PR: #2377

If you appreciate my dedication and free support, please consider 💖 sponsoring me on GitHub 💖 so I can keep providing fixes and building out new features for my open-source libraries in my free time.

ben-qiu · 2024-01-14T23:48:03Z

I am still experiencing the same with 3.7.1, the preview is stretched.

Z-Hayk · 2024-01-19T18:17:53Z

The same with 3.8.2, the preview is stretched.

hieupvXmasEve · 2024-01-20T02:55:01Z

@JuMaruhn's fix partially fixed my issue - it made the preview properly fill its container (I was getting blank bars on the sides), but for me the preview was still distorted. This was on a Samsung Galaxy S22.

I too experienced some inconsistency, sometimes it would fix itself by flipping between front/back, minimising app, etc.

I was able to workaround this issue by not feeding in format straight away, and instead doing this:
function CameraPreview() {
  const [isInitialised, setIsInitialised] = useState(false);

  return (
    <View onLayout={() => setIsInitialised(true)}>
      <CameraView
        format={
          !isInitialised && Platform.OS === "android" ? undefined : format
        }
        resizeMode={"contain"}
        style={{
          aspectRatio: 3 / 4,
        }}
        {...yourOtherProps}
      />
    </View>
  );
}
This is very similar to @j-jonathan's approach except I think it's a little lighter/quicker than reinitialising the entire camera config.

it works for me. Thanks

piwko28 · 2024-01-23T14:17:38Z

it works for me. Thanks

huntfpoly12 Works for me as well as a temp. fix, but not always.

chramos · 2024-01-30T10:56:03Z

in my case I'm not specifying the format prop and I'm still getting the issue

"react-native-vision-camera": "^3.8.2"

Edit:
Downgrading to 3.6.4 the issue is gone

mrousavy · 2024-03-05T09:37:44Z

Yea the issue always existed, it is a race condition which apparently got worse after I made the codebase more predictable with the "persistent capture session" as this was the only part that was not predictable.

I spent quite a lot of hours trying to fix this, and thought I fixed it a couple of times since I couldn't reproduce it on my devices anymore, but then had to switch back to other stuff and my main job, as well as the crashing issues on Samsung were higher priority than that.

This will definitely be fixed in V4, maybe I can also find a quick solution to fix it in V3 now while V4 is still brewing

JshGrn · 2024-03-05T09:39:32Z

Its a hell of a lot more manageable now for those that do have the issue @mrousavy, so much appreciated. The camera is much quicker as well.

mrousavy · 2024-03-05T09:43:43Z

Thanks for your feedback @JshGrn, building in open-source I normally only hear negative feedback/bug reports - good to hear some positive feedback once in a while ❤️

But yea, overall there's A LOT of effort and thinking and careful design construction that goes into the codebase of VisionCamera, especially on Android, to make it predictable, thread-safe, fast and stable. This is something that's really hard to achieve with Camera2, so I'm really happy about how it works right now, even though the Preview stretching issue is still bugging me.

JshGrn · 2024-03-05T09:46:41Z

Its fixable by simply activating the camera with a 0 width and height and then setting it in a useEffect right away, then onwards its perfect.

I was getting crashes a lot when I kept the camera active whilst swapping between react-navigation stacks, but to fix the crash I simply deactivated the camera on blur and reactivated it on focus, that stopped all the crashing.

I definitely don't use it for the full features this package offers, but for the ones I do its fantastic, and now I can work around it then its fine for my use-case.

Much appreciated

inzqne · 2024-03-05T10:29:33Z

Its fixable by simply activating the camera with a 0 width and height and then setting it in a useEffect right away, then onwards its perfect.

I was getting crashes a lot when I kept the camera active whilst swapping between react-navigation stacks, but to fix the crash I simply deactivated the camera on blur and reactivated it on focus, that stopped all the crashing.

I definitely don't use it for the full features this package offers, but for the ones I do its fantastic, and now I can work around it then its fine for my use-case.

Much appreciated

This is very helpful as I'm experiencing the same issues. Just for reference, what version of vision camera are you using with this workaround @JshGrn ? As @mrousavy mentioned, some of the older versions are unpredictable. Although it seems like I'm getting crashes on any version with slow androids when navigating through the stack so this workaround might be a step in the right direction. Thank you guys for your work. 🚀

JshGrn · 2024-03-05T11:48:46Z

Its fixable by simply activating the camera with a 0 width and height and then setting it in a useEffect right away, then onwards its perfect.
I was getting crashes a lot when I kept the camera active whilst swapping between react-navigation stacks, but to fix the crash I simply deactivated the camera on blur and reactivated it on focus, that stopped all the crashing.
I definitely don't use it for the full features this package offers, but for the ones I do its fantastic, and now I can work around it then its fine for my use-case.
Much appreciated

This is very helpful as I'm experiencing the same issues. Just for reference, what version of vision camera are you using with this workaround @JshGrn ? As @mrousavy mentioned, some of the older versions are unpredictable. Although it seems like I'm getting crashes on any version with slow androids when navigating through the stack so this workaround might be a step in the right direction. Thank you guys for your work. 🚀

I am using the latest at the time of writing (3.9.1). The app crashes if the camera stays active whilst navigating to another stack and then back to the camera, not the first time but if I was to scan -> go to stack -> scan -> go to stack, it will eventually crash. What I am now doing is:

On the camera component in the camera stack view:

isActive={isActive && scanEnabled}

and

useEffect(() => {
    return navigation.addListener('focus', () => setScanEnabled(true));
}, [navigation]);

useEffect(() => {
    return navigation.addListener('blur', () => setScanEnabled(false));
}, [navigation]);

isActive is defined on the View which wraps all of the components that is set to true with onLayout:

<View onLayout={() => processLayout()}>
stuff here
</View>

that function essentially does some logic to deal with the aspect ratio by waiting 250ms and then setting the width and height properly. The fix to stop the crashing is by listening to the listeners of blur and focus, without those I can crash the app every time by quick navigation back and forth from the camera stack.

lucksp · 2024-03-10T19:25:33Z

I am seeing this issue on 3.9.2 since updating from version 3.6.4

lucksp · 2024-03-10T23:25:16Z

Adding the suggestion

  useEffect(() => {
    if (Platform.OS === 'ios') return;

    const timeout = setTimeout(
      () => setStyle({ height: '100%', width: '100%' }),
      250
    );

    return () => clearTimeout(timeout);
  }, []);

does not resolve for Android

inzqne · 2024-03-11T01:44:36Z

Adding the suggestion

  useEffect(() => {
    if (Platform.OS === 'ios') return;

    const timeout = setTimeout(
      () => setStyle({ height: '100%', width: '100%' }),
      250
    );

    return () => clearTimeout(timeout);
  }, []);

does not resolve for Android

What I'm doing instead is the following and it works flawlessly on 3.9.2 by executing right when the camera is ready and won't rely on a fixed time to update the camera preview width:

<Camera
      device={device}
      style={{...StyleSheet.absoluteFill, width: Dimensions.get('screen').width - 1 + stretchFix}}
      onInitialized={() => setStretchFix(1)} />

EvgenyRub · 2024-03-11T14:11:53Z

The hack for android is not working for me, still stretched on first mount... downgraded to 3.6.4

lucksp · 2024-03-11T16:13:09Z

What I'm doing instead is the following and it works flawlessly on 3.9.2 by executing right when the camera is ready and won't rely on a fixed time to update the camera preview width:
<Camera
      device={device}
      style={{...StyleSheet.absoluteFill, width: Dimensions.get('screen').width - 1 + stretchFix}}
      onInitialized={() => setStretchFix(1)} />

what is stretchFix @inzqne ?

JshGrn · 2024-03-12T10:43:09Z

What I'm doing instead is the following and it works flawlessly on 3.9.2 by executing right when the camera is ready and won't rely on a fixed time to update the camera preview width:
<Camera
      device={device}
      style={{...StyleSheet.absoluteFill, width: Dimensions.get('screen').width - 1 + stretchFix}}
      onInitialized={() => setStretchFix(1)} />
what is stretchFix @inzqne ?

this will just be a useState(0) judging by the use.

abisalde · 2024-03-18T17:58:25Z

const [cameraActive, setCameraActive] = React.useState(false);

          <View style={styles.frame}>
              <Camera
                ref={cameraRef}
                style={cameraActive && styles.cameraPreview}
                device={device}
                isActive={isActive}
                photo={true}
                onInitialized={() => setCameraActive(true)}
              />

          </View>

My temporary solution on Android 12 and below

PetrVasilev · 2024-03-19T09:25:21Z

Still have this issue in 3.9.1, stretched on first camera open

CMonjo · 2024-03-19T09:34:58Z

Same problem here for 3.9.0

inzqne · 2024-03-19T10:00:47Z

Still have this issue in 3.9.1, stretched on first camera open

Same problem here for 3.9.0

I posted a work-around earlier in the thread that works flawlessly on 3.9.1, might be worth trying it out. Note that I am using it on 3.9.1 specifically.

CMonjo · 2024-03-19T10:06:28Z

Still have this issue in 3.9.1, stretched on first camera open

Same problem here for 3.9.0

I posted a work-around earlier in the thread that works flawlessly on 3.9.2, might be worth trying it out. Note that I am using it on 3.9.2 specifically.

Hey @inzqne, thanks for your reply! The package does not have version 3.9.2 on npm. How do I install it?

mrousavy · 2024-03-19T10:10:15Z

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.

inzqne · 2024-03-19T10:13:25Z

Still have this issue in 3.9.1, stretched on first camera open

Same problem here for 3.9.0

I posted a work-around earlier in the thread that works flawlessly on 3.9.2, might be worth trying it out. Note that I am using it on 3.9.2 specifically.

Hey @inzqne, thanks for your reply! The package does not have version 3.9.2 on npm. How do I install it?

My mistake, I meant 3.9.1

CMonjo · 2024-03-19T10:28:18Z

Thank you both! @inzqne @mrousavy

Audrey-Ann · 2024-03-20T18:59:33Z

Hey @mrousavy ! I just tested the beta version

"react-native-vision-camera": "^4.0.0-beta.8",

And it fixed the stretched issue 🎉 I had on my Android when I was testing on 3.9.1 !!

For anyone wondering, my Android specs are:

Brand: UMIDIGI
Device Name: G3 Plus
Version Information: Baseband, kernel version
Android Version: 13
CPU: ums9230
Running memory: 4 GB
Model: MP25
Configuration Information: MP25HA
(Here is the official phone's spec details)

Thanks!! Hopefully the beta can be released sometime soon?

orenagiv · 2024-03-24T20:05:20Z

Hey @mrousavy
Any estimation as to when the latest Beta enhancements will be promoted to the stable release version?

mrousavy · 2024-03-25T09:26:22Z

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! :)

when stable

@orenagiv not sure yet. I got a few other things to do, especially some things for RN MMKV as well to migrate to new arch and other things.

orenagiv · 2024-03-25T14:47:54Z

Thanks @mrousavy 🙏

I can confirm v4.0.0-beta.10 resolved the stretch issue.

So we will use this version.

NicolasPontua · 2024-03-29T15:31:44Z

In this new version beta, i'm facing the problem with two blackBars, I know that is the purpose to avoid the stretch, but any tips to adapt in my code?

mrousavy · 2024-03-30T11:32:32Z

What does two blackBars mean?

NicolasHubner · 2024-03-31T13:25:54Z

What does two blackBars mean?

I was having the same issue when I put the camera component inside another component, was showing two black bars, one in the top and another in a bottom. And I switch to version 3.6.4 that was stable and works fine.

Now, I tryied to reproduce the same problem, installing the version beta and isn't appering more. But when put the props "photo={true}" on Camera component, the fps drops.

CyxouD · 2024-04-25T09:09:28Z

This bug still appears in the ShadowLens app which should use v4 react-native-vision-csmera. Device: Huawei P10 Lite

NuraQ added the 🐛 bug Something isn't working label Nov 8, 2023

blancham mentioned this issue Nov 13, 2023

🐛 Android video is dark & stretched on front camera #2107

Closed

5 tasks

bglgwyng mentioned this issue Dec 21, 2023

❓ Preview stretched in my app but not in the example on same device #2311

Closed

4 tasks

mrousavy mentioned this issue Jan 15, 2024

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

Closed

4 tasks

mrousavy mentioned this issue Jan 29, 2024

🐛 The camera's displayed image is flattened #2380

Closed

5 tasks

lucksp mentioned this issue Mar 12, 2024

Camera image stretched but fixed when height value updates.💭 #2638

Closed

4 tasks

CyxouD mentioned this issue Apr 25, 2024

Does ShadowLens app already uses v4?💭 #2800

Closed

4 tasks

🐛 Camera stretched on Android #2142

🐛 Camera stretched on Android #2142

Comments

NuraQ commented Nov 8, 2023 • edited Loading

What's happening?

Reproduceable Code

Relevant log output

Camera Device

Device

VisionCamera Version

Can you reproduce this issue in the VisionCamera Example app?

Additional information

rsnr commented Nov 8, 2023

bglgwyng commented Nov 9, 2023

mrousavy commented Nov 9, 2023

NuraQ commented Nov 9, 2023

mrousavy commented Nov 10, 2023

j-jonathan commented Nov 23, 2023 • edited Loading

Usage

Issues

Videos

mrousavy commented Nov 24, 2023 • edited Loading

acesetmatch commented Dec 14, 2023

bpeck81 commented Dec 31, 2023

JuMaruhn commented Jan 4, 2024

Alexis200007 commented Jan 4, 2024

canhtvee commented Jan 7, 2024

Jigar2311 commented Jan 10, 2024

Alexis200007 commented Jan 10, 2024

iamtommcc commented Jan 11, 2024 • edited Loading

Jigar2311 commented Jan 11, 2024

Jigar2311 commented Jan 11, 2024

mgvictor7 commented Jan 11, 2024

mrousavy commented Jan 11, 2024

mrousavy commented Jan 11, 2024

ben-qiu commented Jan 14, 2024

Z-Hayk commented Jan 19, 2024

hieupvXmasEve commented Jan 20, 2024 • edited Loading

piwko28 commented Jan 23, 2024 • edited Loading

chramos commented Jan 30, 2024 • edited Loading

mrousavy commented Mar 5, 2024

JshGrn commented Mar 5, 2024

mrousavy commented Mar 5, 2024

JshGrn commented Mar 5, 2024

inzqne commented Mar 5, 2024 • edited Loading

JshGrn commented Mar 5, 2024

lucksp commented Mar 10, 2024 • edited Loading

lucksp commented Mar 10, 2024

inzqne commented Mar 11, 2024 • edited Loading

EvgenyRub commented Mar 11, 2024 • edited Loading

lucksp commented Mar 11, 2024

JshGrn commented Mar 12, 2024 • edited Loading

abisalde commented Mar 18, 2024 • edited Loading

PetrVasilev commented Mar 19, 2024

CMonjo commented Mar 19, 2024

inzqne commented Mar 19, 2024 • edited Loading

CMonjo commented Mar 19, 2024

mrousavy commented Mar 19, 2024

inzqne commented Mar 19, 2024

CMonjo commented Mar 19, 2024

Audrey-Ann commented Mar 20, 2024

orenagiv commented Mar 24, 2024

mrousavy commented Mar 25, 2024

orenagiv commented Mar 25, 2024

NicolasPontua commented Mar 29, 2024

mrousavy commented Mar 30, 2024

NicolasHubner commented Mar 31, 2024 • edited Loading

CyxouD commented Apr 25, 2024

NuraQ commented Nov 8, 2023 •

edited

Loading

j-jonathan commented Nov 23, 2023 •

edited

Loading

mrousavy commented Nov 24, 2023 •

edited

Loading

iamtommcc commented Jan 11, 2024 •

edited

Loading

hieupvXmasEve commented Jan 20, 2024 •

edited

Loading

piwko28 commented Jan 23, 2024 •

edited

Loading

chramos commented Jan 30, 2024 •

edited

Loading

inzqne commented Mar 5, 2024 •

edited

Loading

lucksp commented Mar 10, 2024 •

edited

Loading

inzqne commented Mar 11, 2024 •

edited

Loading

EvgenyRub commented Mar 11, 2024 •

edited

Loading

JshGrn commented Mar 12, 2024 •

edited

Loading

abisalde commented Mar 18, 2024 •

edited

Loading

inzqne commented Mar 19, 2024 •

edited

Loading

NicolasHubner commented Mar 31, 2024 •

edited

Loading