Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
4 of 5 tasks
NFSMONSTR opened this issue Oct 22, 2024 · 5 comments
Open
4 of 5 tasks

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

NFSMONSTR opened this issue Oct 22, 2024 · 5 comments
Labels
🐛 bug Something isn't working

Comments

@NFSMONSTR
Copy link

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
@NFSMONSTR NFSMONSTR added the 🐛 bug Something isn't working label Oct 22, 2024
@maintenance-hans maintenance-hans
Copy link

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
Copy link
Author

Also here is full logs:
issue_logs.txt

@ugar0ff
Copy link

ugar0ff commented Nov 15, 2024 •
edited
Loading

I have exactly the same problem on iPhone 8 and iPhone 14 Pro

"react-native-vision-camera": "4.6.1",

const format = useCameraFormat({
  camera,
  Templates.PhotoPortrait,
})

<Camera
  ref={cameraRef}
  photo
  resizeMode="contain"
  device={camera}
  isActive={isActive}
  outputOrientation="preview"
  // format={format}
  photoQualityBalance="quality"
  style={style}
/>

with format={format} very bad preview format (only on the back camera), without format={format} - perfect

@NFSMONSTR
Copy link
Author

@ugar0ff Hello, try to use camera format like this

const format = useCameraFormat(camera, [
    {videoResolution: 'max'},
  ]);

is seems like on ios preview quality depends on videoResolution of format

It if helps and you want to use PhotoPortrait template you could try something like this:

const format = useCameraFormat({
  camera,
  [...Templates.PhotoPortrait, {videoResolution: 'max'}],
})

@ugar0ff
Copy link

ugar0ff commented Nov 15, 2024

this helped, thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ugar0ff @NFSMONSTR