🐛 Preview orientation is wrong on some tablets

[jaumereg]

What's happening?

On some tablets, specially the ones that have the selfie camera on the longer side (like phones), when you open the camera in landscape orientation, the preview is rotated 90 degrees, but if you rotate the tablet to portrait, and rotate it back to landscape, it gets fixed itself.

Here is a video of the issue:

tablet.bug.mp4

I've been doing deeper investigation and found out that in CameraSession.kt "preview rotation" output is wrong while "output rotation" output is correct, so as a quick fix I've assigned the "output rotation" value to the "preview rotation" variable and it seems to be working fine now. Here is the diff:

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 75e3f1d..6bf8d45 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
@@ -191,11 +191,12 @@ class CameraSession(internal val context: Context, internal val callback: Callba
 
   private fun configureOrientation() {
     // Preview Orientation
-    orientationManager.previewOrientation.toSurfaceRotation().let { previewRotation ->
-      previewOutput?.targetRotation = previewRotation
-    }
     // Outputs Orientation
     orientationManager.outputOrientation.toSurfaceRotation().let { outputRotation ->
+      previewOutput?.targetRotation = outputRotation
       photoOutput?.targetRotation = outputRotation
       videoOutput?.targetRotation = outputRotation
       frameProcessorOutput?.targetRotation = outputRotation

Reproduceable Code

const device = useCameraDevice('back');

// ...

return (
    <Camera
        style={{ flex: 1 }}
        device={device}
        isActive
        ref={cameraRef}
        photo
    />
)

Relevant log output

06-24 15:47:31.198  7170  7170 I CameraSession: Preview orientation changed! PORTRAIT
06-24 15:47:31.198   419  9682 V NuPlayer: extractMetadata Tracks : 1
06-24 15:47:31.200   419  9682 V NuPlayer: enableInbandTextFromExtr
06-24 15:47:31.200   419  9682 D NuPlayerDriver: notifyListener_l(0xa9f0d580), (1, 0, 0), loop setting(0, 0)
06-24 15:47:31.200   419  9682 V MediaPlayerService: [417] notify (1, 0, 0)
06-24 15:47:31.200  7170  7170 I CameraView: invokeOnPreviewOrientationChanged(PORTRAIT)
06-24 15:47:31.201   404  1574 V MediaPlayer: message received msg=1, ext1=0, ext2=0
06-24 15:47:31.201   404  1574 V MediaPlayer: prepared
06-24 15:47:31.201   404  1574 V MediaPlayer: signal application thread
06-24 15:47:31.201   404  9669 V MediaPlayer: prepare complete - status=0
06-24 15:47:31.201   404  9669 V MediaPlayer: constructor
06-24 15:47:31.201   419   419 V MediaPlayerService: Create new client(418) from pid 404, uid 1047,
06-24 15:47:31.202  7170  7170 I CameraSession: Output orientation changed! LANDSCAPE_RIGHT
06-24 15:47:31.202   419   951 V MediaPlayerService: player type = 4
06-24 15:47:31.202   419   951 V NuPlayerDriver: NuPlayerDriver(0xa9f0d600)
06-24 15:47:31.202  7170  7170 I CameraView: invokeOnOutputOrientationChanged(LANDSCAPE_RIGHT)

Camera Device

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

Device

Samsung Galaxy Tab A

VisionCamera Version

4.3.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
• 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.

[maintenance-hans]

Guten Tag, Hans here.

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.

[davidburson]

On my iPhone X iOS 16.7.8, the preview is correctly landscape when the Camera is started while the phone is sideways, but the picture it takes is rotated 90 degrees.

[mars-lan]

On my iPhone X iOS 16.7.8, the preview is correctly landscape when the Camera is started while the phone is sideways, but the picture it takes is rotated 90 degrees.

Couldn't get my hand on a device to verify yet, but several users of ours have reported the same issue on iOS 16 as well.