🐛 Camera Blur on Android Devices after CameraX Update

[kpallen92]

What's happening?

I recently updated from VisionCamera version 4.0.4 to 4.7.2, and started to see reduced image quality from the Camera on certain Android devices, such as the Google Pixel 7 and Samsung S24 Ultra. The discrepancy in quality is more visible when zoomed in. The issue happens when I'm passing something to the Camera component's frameProcessor prop and goes away when I'm not.

There are a couple ways that I have been able to fix the image quality issue while still using a frame processor:

1. Patching VisionCamera's android build gradle to use CameraX version 1.4.0-alpha04 instead of version 1.5.0-alpha03.
2. Patching CameraView.kt to remove || enableFrameProcessor at line 184, which removes video capture as a use-case when enableFrameProcessor is true.

Option 2 seems like the best option so far because I don't need video capture or recording, but I'd like to better understand the root cause of the lower image quality. Seems like there is some nuance in resolutions used when passing multiple useCases to CameraX's bindToLifecycle method in version 1.5.0-alpha03 that didn't exist in version 1.4.0-alpha04.

Here is an example image with either one of the above fixes:

Here is an example image without a fix:

Reproduceable Code

import {
  Camera,
  CameraDevice,
  useCameraDevice,
  useCameraFormat,
  useFrameProcessor,
} from 'react-native-vision-camera';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Linking, Platform, StyleSheet } from 'react-native';

export const Wrapper = () => {
  const camera = useRef<Camera>(null);
  const [device, setDevice] = useState<CameraDevice>();

  const cameraDevice = useCameraDevice('back', {
    physicalDevices: ['telephoto-camera', 'wide-angle-camera'],
  });

  const cameraFormat = useCameraFormat(device, [
    { videoResolution: { width: 1280, height: 720 } },
    { fps: 30 },
    { videoStabilizationMode: 'standard' },
  ]);

  const openCamera = useCallback(async () => {
    let permission = Camera.getCameraPermissionStatus();

    if (
      (Platform.OS === 'android' && permission === 'denied') ||
      (Platform.OS === 'ios' && permission === 'not-determined')
    ) {
      permission = await Camera.requestCameraPermission();
    } else if (permission !== 'granted') {
      await Linking.openSettings();
    }

    const cameraId = cameraDevice?.id;
    if (permission !== 'granted' || !cameraId) {
      console.log('No camera found...');
      return;
    }

    setDevice(cameraDevice);
  }, [cameraDevice]);

  const frameProcessor = useFrameProcessor(() => {
    'worklet';
  }, []);

  useEffect(() => {
    openCamera().catch(console.error);
  }, [openCamera]);

  if (!device) {
    return null;
  }

  return (
    <Camera
      ref={camera}
      style={styles.camera}
      device={device}
      format={cameraFormat}
      pixelFormat="yuv"
      videoStabilizationMode={'standard'}
      videoHdr={false}
      enableZoomGesture={true}
      photo={false}
      video={false}
      frameProcessor={frameProcessor}
      isActive={true}
    />
  );
};

const styles = StyleSheet.create({
  camera: {
    flex: 1,
  },
});

Relevant log output

N/A for this issue.

Camera Device

{
  "formats": [],
  "sensorOrientation": "landscape-left",
  "hardwareLevel": "full",
  "maxZoom": 8,
  "minZoom": 0.6704425811767578,
  "maxExposure": 24,
  "supportsLowLightBoost": true,
  "neutralZoom": 1,
  "physicalDevices": [
    "wide-angle-camera",
    "wide-angle-camera",
    "ultra-wide-angle-camera",
    "telephoto-camera"
  ],
  "supportsFocus": true,
  "supportsRawCapture": false,
  "isMultiCam": true,
  "minFocusDistance": 10.500000100135805,
  "minExposure": -24,
  "name": "0 (BACK) androidx.camera.camera2",
  "hasFlash": true,
  "hasTorch": true,
  "position": "back",
  "id": "0"
}

Device

Google Pixel 7 Android 16

VisionCamera Version

4.7.2

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
• [x] 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.

[maintenance-hans[bot]]

Guten Tag, Hans here.

Looks like 'ya left out some information! Make sure to add enough details to the following section:

• Relevant log output

[!NOTE] New features, bugfixes, updates and other improvements are all handled mostly by @mrousavy in his free time. To support @mrousavy, please consider 💖 sponsoring him on GitHub 💖. Sponsored issues will be prioritized.