🐛 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:

https://github.com/mrousavy/react-native-vision-camera/assets/27198255/8022ef80-c4b6-4e6b-9dde-0301b9094aa1

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)
• [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.

[!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.

[zzz08900]

Confirming the same issue with version 4.5.0 and Xiaomi Pad 6/Android 13.

If the app is launched while the tablet is in landscape position, the preview is rotated by 90 degrees and is stretched - it seems the width/height of the preview was swapped.

Will try the fix proposed by OP tomorrow.

I remember I saw this problem before with RNVC v2. We were stuck with v2.14 for a really long time because of this problem - well technically we are still stuck since the problem appeared again on v4.5.0.

Just on a side note, for v4 it is possible to build an ugly hack that rotates the preview by 270 degrees using styling + texture-view so everything appears to be working fine as long as the user does not rotate the tablet.

Disclaimer: I'm not responsible for any consequence of using the mentioned hack above.

[angelos3lex]

On my Samsung SM T590, Android 10 this is also happening, sometimes the preview is wrong or the output. Even if i have outputOrientation='preview' sometimes preview and recorded video have different orientation. (vision camera 4.5.1 version)

(above patch didnt work for my case)

[boiboif]

Confirming the same issue with version 4.5.0 and Xiaomi Pad 6/Android 13.确认4.5.0版本和小米Pad 6/Android 13存在同样的问题。

If the app is launched while the tablet is in landscape position, the preview is rotated by 90 degrees and is stretched - it seems the width/height of the preview was swapped.如果在平板电脑处于横向位置时启动应用程序，预览将旋转 90 度并拉伸 - 预览的宽度/高度似乎已交换。

Will try the fix proposed by OP tomorrow.明天将尝试 OP 提出的修复方案。

I remember I saw this problem before with RNVC v2. We were stuck with v2.14 for a really long time because of this problem - well technically we are still stuck since the problem appeared again on v4.5.0.我记得我之前在 RNVC v2 中看到过这个问题。由于这个问题，我们在 v2.14 上被困了很长一段时间——从技术上来说，我们仍然被困住，因为这个问题在 v4.5.0 上再次出现。

Just on a side note, for v4 it is possible to build an ugly hack that rotates the preview by 270 degrees using styling + texture-view so everything appears to be working fine as long as the user does not rotate the tablet.顺便说一句，对于 v4，可以构建一个丑陋的 hack，使用样式 + 纹理视图将预览旋转 270 度，因此只要用户不旋转平板电脑，一切似乎都工作正常。

Disclaimer: I'm not responsible for any consequence of using the mentioned hack above.免责声明：我对使用上述黑客行为造成的任何后果不承担任何责任。 @zzz08900 Any updates?

[meleffendi]

Can confirm the same issue on Android 14 tablet Lenovo P12 vision camera version 4.5.2. The patch above did not work for me.