search

mrousavy / react-native-vision-camera

📸 A powerful, high-performance React Native Camera library.
https://react-native-vision-camera.com
MIT License
7.46k stars 1.09k forks source link

🐛 Setting Camera format prop seems like disabling antialiasing on preview #3256

Open NFSMONSTR opened 1 day ago

NFSMONSTR commented 1 day ago

What's happening?

Thanks for this great library!

I tried to set different camera formats and noticed that setting any of them leads to poor preview quality(seems like some default antialiasing disabled). If remove this parameter, the preview looks great.

I was able to reproduce this in example app(At the moment I have only tested it on Android).

So if camera format is set preview look like this: Screenshot_2024_10_22_13_19_41_063_com_mrousavy_camera_example Screenshot_2024_10_22_13_19_41_063_com_mrousavy_camera_example

If remove camera format prop: Screenshot_2024_10_22_13_19_22_532_com_mrousavy_camera_example

Reproduceable Code

//From example

//Screenshots 1 and 2
//...
let device = useCameraDevice(cameraPosition)
//...
 const screenAspectRatio = SCREEN_HEIGHT / SCREEN_WIDTH
  const format = useCameraFormat(device, [
    { fps: targetFps },
    { videoAspectRatio: screenAspectRatio },
    { videoResolution: 'max' },
    { photoAspectRatio: screenAspectRatio },
    { photoResolution: 'max' },
  ])
//...
<ReanimatedCamera
                style={StyleSheet.absoluteFill}
                device={device}
                isActive={isActive}
                ref={camera}
                onInitialized={onInitialized}
                onError={onError}
                onStarted={() => console.log('Camera started!')}
                onStopped={() => console.log('Camera stopped!')}
                onPreviewStarted={() => console.log('Preview started!')}
                onPreviewStopped={() => console.log('Preview stopped!')}
                onOutputOrientationChanged={(o) => console.log(`Output orientation changed to ${o}!`)}
                onPreviewOrientationChanged={(o) => console.log(`Preview orientation changed to ${o}!`)}
                onUIRotationChanged={(degrees) => console.log(`UI Rotation changed: ${degrees}°`)}
                format={format}
                fps={fps}
                photoHdr={photoHdr}
                videoHdr={videoHdr}
                photoQualityBalance="quality"
                lowLightBoost={device.supportsLowLightBoost && enableNightMode}
                enableZoomGesture={false}
                animatedProps={cameraAnimatedProps}
                exposure={0}
                enableFpsGraph={true}
                outputOrientation="device"
                photo={true}
                video={true}
                audio={microphone.hasPermission}
                enableLocation={location.hasPermission}
                frameProcessor={frameProcessor}
              />
//...

// Screenshoot 3
<ReanimatedCamera
                style={StyleSheet.absoluteFill}
                device={device}
                isActive={isActive}
                ref={camera}
                onInitialized={onInitialized}
                onError={onError}
                onStarted={() => console.log('Camera started!')}
                onStopped={() => console.log('Camera stopped!')}
                onPreviewStarted={() => console.log('Preview started!')}
                onPreviewStopped={() => console.log('Preview stopped!')}
                onOutputOrientationChanged={(o) => console.log(`Output orientation changed to ${o}!`)}
                onPreviewOrientationChanged={(o) => console.log(`Preview orientation changed to ${o}!`)}
                onUIRotationChanged={(degrees) => console.log(`UI Rotation changed: ${degrees}°`)}
                //format={format}
                //fps={fps}
                photoHdr={photoHdr}
                videoHdr={videoHdr}
                photoQualityBalance="quality"
                lowLightBoost={device.supportsLowLightBoost && enableNightMode}
                enableZoomGesture={false}
                animatedProps={cameraAnimatedProps}
                exposure={0}
                enableFpsGraph={true}
                outputOrientation="device"
                photo={true}
                video={true}
                audio={microphone.hasPermission}
                enableLocation={location.hasPermission}
                frameProcessor={frameProcessor}
              />

Relevant log output

//greped by ReactNativeJS,CameraSession,VisionCamera
//logs from screenshoot 1 and 2

2024-10-22T10:44:08.779Z    15797   VisionCameraProxy   Initializing VisionCameraProxy...
2024-10-22T10:44:08.779Z    15797   VisionCameraProxy   Creating Worklet Context...
2024-10-22T10:44:08.784Z    15797   VisionCameraProxy   Worklet Context created!
2024-10-22T10:44:08.792Z    15797   ReactNativeJS   Re-rendering Navigator. Camera: granted | Microphone: granted
2024-10-22T10:44:09.804Z    15797   CameraSession   Camera Lifecycle changed to CREATED!
2024-10-22T10:44:09.818Z    15797   CameraSession   configure { ... }: Waiting for lock...
2024-10-22T10:44:09.823Z    15797   CameraSession   configure { ... }: Waiting for lock...
2024-10-22T10:44:09.824Z    15797   CameraSession   configure { ... }: Waiting for lock...
2024-10-22T10:44:09.825Z    15797   CameraSession   configure { ... }: Updating CameraSession Configuration... Difference(deviceChanged=true, outputsChanged=true, sidePropsChanged=true, isActiveChanged=true, orientationChanged=true, locationChanged=true)
2024-10-22T10:44:09.827Z    15797   CameraSession   Creating new Outputs for Camera #0...
2024-10-22T10:44:09.828Z    15797   CameraSession   Using FPS Range: [30, 30]
2024-10-22T10:44:09.828Z    15797   CameraSession   Creating Preview output...
2024-10-22T10:44:09.834Z    15797   CameraSession   Creating Photo output...
2024-10-22T10:44:09.836Z    15797   CameraSession   Photo size: 2400x1080
2024-10-22T10:44:09.840Z    15797   CameraSession   Creating Video output...
2024-10-22T10:44:09.841Z    15797   CameraSession   Creating new Recorder...
2024-10-22T10:44:09.844Z    15797   CameraSession   Video size: 3840x2160
2024-10-22T10:44:09.848Z    15797   CameraSession   Creating YUV Frame Processor output...
2024-10-22T10:44:09.850Z    15797   CameraSession   Frame Processor size: 3840x2160
2024-10-22T10:44:09.854Z    15797   CameraSession   Successfully created new Outputs for Camera #0!
2024-10-22T10:44:09.859Z    15797   CameraSession   Binding Camera #0...
2024-10-22T10:44:09.860Z    15797   CameraSession   Binding 4 use-cases...
2024-10-22T10:44:10.026Z    15797   ReactNativeJS   Camera: 0 (BACK) androidx.camera.camera2 | Format: (2400x1080 photo / 3840x2160@30 video @ 30fps)
2024-10-22T10:44:10.154Z    15797   CameraSession   Successfully bound Camera #0!
2024-10-22T10:44:10.155Z    15797   CameraSession   Camera Lifecycle changed to STARTED!
2024-10-22T10:44:10.205Z    15797   ReactNativeJS   Camera: 0 (BACK) androidx.camera.camera2 | Format: (2400x1080 photo / 3840x2160@30 video @ 30fps)
2024-10-22T10:44:10.252Z    15797   CameraSession   Camera State: CLOSED (has error: false)
2024-10-22T10:44:10.252Z    15797   CameraSession   Camera Lifecycle changed to RESUMED!
2024-10-22T10:44:10.270Z    15797   CameraSession   configure { ... }: Completed CameraSession Configuration! (State: RESUMED)
2024-10-22T10:44:10.475Z    15797   CameraSession   Preview orientation changed! PORTRAIT
2024-10-22T10:44:10.476Z    15797   CameraSession   Output orientation changed! PORTRAIT
2024-10-22T10:44:10.481Z    15797   ReactNativeJS   Camera initialized!
2024-10-22T10:44:10.657Z    15797   CameraSession   Camera State: OPEN (has error: false)
2024-10-22T10:44:10.670Z    15797   ReactNativeJS   Preview orientation changed to portrait!
2024-10-22T10:44:10.672Z    15797   ReactNativeJS   UI Rotation changed: 0°
2024-10-22T10:44:10.675Z    15797   ReactNativeJS   Output orientation changed to portrait!
2024-10-22T10:44:10.677Z    15797   ReactNativeJS   Camera started!
2024-10-22T10:44:10.748Z    15797   VisionCameraProxy   Finding view 5...
2024-10-22T10:44:10.748Z    15797   VisionCameraProxy   Found view 5!
2024-10-22T10:44:10.797Z    15797   CameraSession   configure { ... }: Waiting for lock...
2024-10-22T10:44:10.798Z    15797   CameraSession   configure { ... }: Updating CameraSession Configuration... Difference(deviceChanged=false, outputsChanged=false, sidePropsChanged=false, isActiveChanged=true, orientationChanged=false, locationChanged=true)
2024-10-22T10:44:10.798Z    15797   CameraSession   Camera Lifecycle changed to STARTED!
2024-10-22T10:44:10.802Z    15797   CameraSession   Camera Lifecycle changed to CREATED!
2024-10-22T10:44:10.805Z    15797   CameraSession   configure { ... }: Completed CameraSession Configuration! (State: CREATED)
2024-10-22T10:44:11.121Z    15797   CameraSession   configure { ... }: Waiting for lock...
2024-10-22T10:44:11.121Z    15797   CameraSession   configure { ... }: Updating CameraSession Configuration... Difference(deviceChanged=false, outputsChanged=false, sidePropsChanged=false, isActiveChanged=true, orientationChanged=false, locationChanged=true)
2024-10-22T10:44:11.121Z    15797   CameraSession   Camera Lifecycle changed to STARTED!
2024-10-22T10:44:11.142Z    15797   CameraSession   Camera State: CLOSING (has error: false)
2024-10-22T10:44:11.143Z    15797   CameraSession   Camera Lifecycle changed to RESUMED!
2024-10-22T10:44:11.149Z    15797   CameraSession   configure { ... }: Completed CameraSession Configuration! (State: RESUMED)
2024-10-22T10:44:11.155Z    15797   ReactNativeJS   Camera stopped!
2024-10-22T10:44:11.220Z    15797   CameraSession   Camera State: OPENING (has error: false)
2024-10-22T10:44:11.270Z    15797   CameraSession   Camera State: OPEN (has error: false)
2024-10-22T10:44:11.281Z    15797   ReactNativeJS   Camera started!
2024-10-22T10:44:11.713Z    15797   ReactNativeJS   2303175681620587: 3840x2160 yuv Frame (landscape-right)
2024-10-22T10:44:11.715Z    15797   ReactNativeJS   Preview started!

//logs from screenshoot 3

2024-10-22T10:51:11.474Z    19664   VisionCameraProxy   Initializing VisionCameraProxy...
2024-10-22T10:51:11.474Z    19664   VisionCameraProxy   Creating Worklet Context...
2024-10-22T10:51:11.476Z    19664   VisionCameraProxy   Worklet Context created!
2024-10-22T10:51:11.480Z    19664   ReactNativeJS   Re-rendering Navigator. Camera: granted | Microphone: granted
2024-10-22T10:51:12.235Z    19664   CameraSession   Camera Lifecycle changed to CREATED!
2024-10-22T10:51:12.247Z    19664   CameraSession   configure { ... }: Waiting for lock...
2024-10-22T10:51:12.252Z    19664   CameraSession   configure { ... }: Waiting for lock...
2024-10-22T10:51:12.252Z    19664   CameraSession   configure { ... }: Waiting for lock...
2024-10-22T10:51:12.253Z    19664   CameraSession   configure { ... }: Updating CameraSession Configuration... Difference(deviceChanged=true, outputsChanged=true, sidePropsChanged=true, isActiveChanged=true, orientationChanged=true, locationChanged=true)
2024-10-22T10:51:12.255Z    19664   CameraSession   Creating new Outputs for Camera #0...
2024-10-22T10:51:12.255Z    19664   CameraSession   Using FPS Range: null
2024-10-22T10:51:12.255Z    19664   CameraSession   Creating Preview output...
2024-10-22T10:51:12.261Z    19664   CameraSession   Creating Photo output...
2024-10-22T10:51:12.266Z    19664   CameraSession   Creating Video output...
2024-10-22T10:51:12.266Z    19664   CameraSession   Creating new Recorder...
2024-10-22T10:51:12.272Z    19664   CameraSession   Creating YUV Frame Processor output...
2024-10-22T10:51:12.276Z    19664   CameraSession   Successfully created new Outputs for Camera #0!
2024-10-22T10:51:12.279Z    19664   CameraSession   Binding Camera #0...
2024-10-22T10:51:12.280Z    19664   CameraSession   Binding 4 use-cases...
2024-10-22T10:51:12.443Z    19664   ReactNativeJS   Camera: 0 (BACK) androidx.camera.camera2 | Format: (2400x1080 photo / 3840x2160@30 video @ 30fps)
2024-10-22T10:51:12.514Z    19664   CameraSession   Successfully bound Camera #0!
2024-10-22T10:51:12.515Z    19664   CameraSession   Camera Lifecycle changed to STARTED!
2024-10-22T10:51:12.569Z    19664   ReactNativeJS   Camera: 0 (BACK) androidx.camera.camera2 | Format: (2400x1080 photo / 3840x2160@30 video @ 30fps)
2024-10-22T10:51:12.573Z    19664   CameraSession   Camera State: CLOSED (has error: false)
2024-10-22T10:51:12.573Z    19664   CameraSession   Camera Lifecycle changed to RESUMED!
2024-10-22T10:51:12.590Z    19664   CameraSession   configure { ... }: Completed CameraSession Configuration! (State: RESUMED)
2024-10-22T10:51:12.783Z    19664   CameraSession   Preview orientation changed! PORTRAIT
2024-10-22T10:51:12.785Z    19664   CameraSession   Output orientation changed! PORTRAIT
2024-10-22T10:51:12.790Z    19664   ReactNativeJS   Camera initialized!
2024-10-22T10:51:12.881Z    19664   CameraSession   Camera State: OPEN (has error: false)
2024-10-22T10:51:12.891Z    19664   ReactNativeJS   Preview orientation changed to portrait!
2024-10-22T10:51:12.892Z    19664   ReactNativeJS   UI Rotation changed: 0°
2024-10-22T10:51:12.893Z    19664   ReactNativeJS   Output orientation changed to portrait!
2024-10-22T10:51:12.894Z    19664   ReactNativeJS   Camera started!
2024-10-22T10:51:12.921Z    19664   VisionCameraProxy   Finding view 5...
2024-10-22T10:51:12.921Z    19664   VisionCameraProxy   Found view 5!
2024-10-22T10:51:12.947Z    19664   CameraSession   configure { ... }: Waiting for lock...
2024-10-22T10:51:12.947Z    19664   CameraSession   configure { ... }: Updating CameraSession Configuration... Difference(deviceChanged=false, outputsChanged=false, sidePropsChanged=false, isActiveChanged=true, orientationChanged=false, locationChanged=true)
2024-10-22T10:51:12.947Z    19664   CameraSession   Camera Lifecycle changed to STARTED!
2024-10-22T10:51:12.952Z    19664   CameraSession   Camera Lifecycle changed to CREATED!
2024-10-22T10:51:12.955Z    19664   CameraSession   configure { ... }: Completed CameraSession Configuration! (State: CREATED)
2024-10-22T10:51:13.113Z    19664   CameraSession   configure { ... }: Waiting for lock...
2024-10-22T10:51:13.114Z    19664   CameraSession   configure { ... }: Updating CameraSession Configuration... Difference(deviceChanged=false, outputsChanged=false, sidePropsChanged=false, isActiveChanged=true, orientationChanged=false, locationChanged=true)
2024-10-22T10:51:13.114Z    19664   CameraSession   Camera Lifecycle changed to STARTED!
2024-10-22T10:51:13.131Z    19664   CameraSession   Camera State: CLOSING (has error: false)
2024-10-22T10:51:13.132Z    19664   CameraSession   Camera Lifecycle changed to RESUMED!
2024-10-22T10:51:13.138Z    19664   CameraSession   configure { ... }: Completed CameraSession Configuration! (State: RESUMED)
2024-10-22T10:51:13.145Z    19664   ReactNativeJS   Camera stopped!
2024-10-22T10:51:13.209Z    19664   ReactNativeJS   2303597154580485: 640x480 yuv Frame (landscape-right)
2024-10-22T10:51:13.378Z    19664   CameraSession   Camera State: OPENING (has error: false)
2024-10-22T10:51:13.421Z    19664   CameraSession   Camera State: OPEN (has error: false)
2024-10-22T10:51:13.436Z    19664   ReactNativeJS   Camera started!
2024-10-22T10:51:13.820Z    19664   ReactNativeJS   2303597825537099: 640x480 yuv Frame (landscape-right)
2024-10-22T10:51:13.822Z    19664   ReactNativeJS   Preview started!

Camera Device

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

Device

POCO X5 Pro 5G (Android 14)

VisionCamera Version

4.5.3

Can you reproduce this issue in the VisionCamera Example app?

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

Additional information

maintenance-hans[bot] commented 1 day ago

Guten Tag, Hans here! 🍻 Thank you for reporting this issue with setting the camera format prop. It looks like you have provided a lot of useful information, including screenshots and logs.

To further assist, could you please try a few things? First, make sure that your device's camera settings are all optimized, such as checking if there are any available firmware updates. Also, kindly help us by providing logs from adb logcat while reproducing the issue, as those logs can help mrousavy identify the problem more clearly.

Thanks for your contribution, and for supporting the project! If you find this library useful, consider becoming a sponsor to receive priority assistance.

Note: If you think I made a mistake, please ping @mrousavy to take a look.

NFSMONSTR commented 1 day ago

Also here is full logs: issue_logs.txt