🐛 Android video is dark & stretched on front camera

[MassimoDeLuca]

What's happening?

The camera is very dark when using react-native-vision-camera when compared to the Android Camera (Front camera only)

Front

Previous versions (Such as v2) do not have this dark of a front camera. I did notice when loading the app, the first frame is correctly bright, once it finishes loading it dims.

react-native-vision-camera

Android Camera

Back

Seems good enough (I assume some pre-processing is done with Android's camera making it slightly brighter

react-native-vision-camera

Android Camera

Camera is also vertically stretched when using the front camera within react-native-vision-camera. (In addition to the zoom thats been existing even in v2) (Challenging to get photos of this as the image is very dark, but let me know if you'd like some screenshots)

Reproduceable Code

Latest Example app from react-native-vision-camera https://github.com/mrousavy/react-native-vision-camera/tree/main/package/example

Relevant log output

No errors / warnings / logs were displayed. Let me know if there is debug logging I can enable.

Camera Device

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

Device

Samsung Galaxy A03s (Android 13)

VisionCamera Version

=3.3.0

Can you reproduce this issue in the VisionCamera Example app?

Yes, I can reproduce the same issue in the Example app here

Additional information

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

[mrousavy]

Interesting - try this:

1. Remove video and frameProcessor props to see if the VIDEO template makes it darker
2. Try to use a lower fps (e.g. fps={15}) to see if that makes it brighter

[mrousavy]

I believe the only thing that's a bug here is that the selfie camera is stretched. I don't know why that's happening tbh, @blancham do you have any ideas?

[blancham]

This is somehow related to https://github.com/mrousavy/react-native-vision-camera/pull/2018 and how we are computing the preview size's aspect ratio (sometimes width / height, others height / width)

One way you can go around it @MassimoDeLuca is to set an aspectRatio (same as the format you are using) on your View

[MassimoDeLuca]

Dark Front Camera:

@mrousavy

1. Removing video and frameProcessor props do brighten the capture (Both need to be removed)
2. Setting FPS to 15, 5, 1 do not reduce the preview FPS nor the output video FPS. The camera is also still dark (Attempted with frameProcessor removed from props).

Interestingly, v3.0.0 example has the opposite issue where the camera is darkened when video and frameProcessor are removed from props.

Stretched Front Camera:

v3.0.0 example does not have this issue, assuming its a regression or intended functionality changed since then (although seems odd) @blancham In the latest example, I did attempt aspectRatio={format.videoHeight/format.videoWidth} which did not work (It returns 0.45 for my device). I also tried hardcoding it to 0.3 which didn't make a visual difference. Sometimes when it hot reloads it will fix the aspect ratio itself (Even if the changes are unrelated).

Please let me know how I can provide additional logs / details. EDIT: logcat logs https://hastebin.com/share/junaweveno.yaml

[victorkvarghese]

I had same issue with 3.6.4. Downgrading to 3.4.1 fixed the issue.

Also useCamera device function without any filters.

[mrousavy]

@MassimoDeLuca I guess you tested on a Samsung device? Apparently setting FPS doesnt work on samsung at all; I fixed this here: https://github.com/mrousavy/react-native-vision-camera/pull/2138

[mrousavy]

So I think the issue is probably that the PreviewView's Surface size does not update when the device / format / video size changes, so it's stuck in a wrong format. How do we properly sync this @blancham ?

[NuraQ]

@mrousavy I have similar issue where camera is stretched on some android devices ( not all devices ) , I would like to get this fix for fps, is it going to be released soon?

Thanks

[mrousavy]

I would like to get this fix for fps

sure, how much are you currently sponsoring?

[MassimoDeLuca]

@MassimoDeLuca I guess you tested on a Samsung device? Apparently setting FPS doesnt work on samsung at all; I fixed this here: #2138

@mrousavy

Yes, Using Samsung Galaxy A03s (Android 13). Setting FPS now works, as you've mentioned. <20 FPS has correct lighting. Anything between 1-20 FPS visually appears to have the same lighting. Once FPS is set >20 FPS, it starts to darken.

Still experiencing stretched screen in the example with no changes (Although I don't believe any fix was made yet to address this)

[blancham]

Indeed, in my app I also found that you need to set at max 20 fps when using the front camera. I am testing on a Vivo phone

Also, when I switch from the back to the front camera, the view is stretched out vertically BUT, when I update the format 2 times (I can cycle through 4:3 and 16:9 on my app so I change to 16:9 then go back to 4:3), everything goes back to normal!

What I saw is that when changing the format the PreviewView's onMeasure is triggered but when changing the camera device, it's not. Maybe this is the root cause @mrousavy

EDIT: You seem to have the same guess in this issue https://github.com/mrousavy/react-native-vision-camera/issues/2142#issuecomment-1803503026

[mrousavy]

yea, maybe race condition. I think the format is the source of truth, then we just need to always apply that to the PreviewView and keep showing that. Not sure which View Lifecycle methods we need, onMeasure? onLayout? idk

[Ashutosh-Tiwari-Ukh]

@mrousavy This issue is now appearing in the latest release 3.7.0. It was working fine for me in previous version 3.6.16. Tested in Samsung Galaxy M32 5G device.

[mrousavy]

Hey! Does this fix your issue maybe? https://github.com/mrousavy/react-native-vision-camera/pull/2377 (still testing)

[mrousavy]

Hey!

After 8 hours of debugging, I finally found the culprit! I fixed the preview stretching issue in this PR: https://github.com/mrousavy/react-native-vision-camera/pull/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]

3.7.1 doesn't seem to fix the issue. Revert to 3.6.16 works for me as well

[slmtk]

On my end the stretching issue has been fixed in 3.7.1 but still experiencing dark video when the frame processor is enabled.

[mrousavy]

Dark Video is maybe just because of the Frame Rate. Or Video stream. Not a lot I can do, you can try setting fps to something like 10, and exposure to a really high value.

[slmtk]

Still not working 🤷‍♂️ Video remains dark even if not calling the frame processor plugin (just enabling the frame processor with empty logic)

[Ashutosh-Tiwari-Ukh]

@mrousavy Apologies for the delayed response. The stretching issue will be occur in all devices. In some devices it looks fine and in some devices it still looks stretched. The one I am testing it with is a Galaxy M33 5G. Also, this stretched preview only appears for the time when we open camera by user (example - tap on open camera button) action. Once the camera opens, the preview appears stretched.. BUT as soon as I lock the device on open camera and then unlock it again, the preview is NO MORE stretched. So, in short, the preview initially appears stretched but after a device lock and unlock the stretched preview gets fixed on its own. See if this helps you debug it further.

NOTE: The stretching that I am seeing has nothing to do with front or rear view. It can occur in both.

[mrousavy]

Created a PR to fix this issue once and for all: https://github.com/mrousavy/react-native-vision-camera/pull/2519 💪🚀 Thanks to everyone who sponsored me on GitHub to fix this bug!! 💖

Try the PR and see if it works (by checking out that branch and running the example app)