❓ Trying to taking photos in landscape mode

[Enzo-Amorim]

Hello, i'm trying to take photos in landscape but always the photo is on portrait mode, have a way to change this?

[mrousavy]

Hi! Thanks for the report, I'll start working on landscape mode soon, but it doesn't have very high priority since our app only supports portrait orientation. Related to #210

[Enzo-Amorim]

oh, ok man, thanks, you know some kind of workaround that i can do to this?

[LupulescuAlexandru]

You'd need to bind an orientation listener when you setup the camera and update the camera rotation accordingly. It'd look something like this (snippet taken from react-native-camera-kit):

//Android
orientationListener = object : OrientationEventListener(context, SensorManager.SENSOR_DELAY_UI) {
                override fun onOrientationChanged(orientation: Int) {
                    val imageCapture = imageCapture ?: return
                    var newOrientation: Int = imageCapture.targetRotation
                    if (orientation >= 315 || orientation < 45) {
                        newOrientation = Surface.ROTATION_0
                    } else if (orientation in 225..314) {
                        newOrientation = Surface.ROTATION_90
                    } else if (orientation in 135..224) {
                        newOrientation = Surface.ROTATION_180
                    } else if (orientation in 45..134) {
                        newOrientation = Surface.ROTATION_270
                    }
                    if (newOrientation != imageCapture.targetRotation) {
                        imageCapture.targetRotation = newOrientation
                        onOrientationChange(newOrientation)
                    }
                }
            }

I had the same problem as you, I wanted to solve it, but unfortunately Vision Camera relies on coroutines and I'm not too familiar with them.
If it's urgent and you don't need the extra features Vision Camera gives you, you could use the react-native-camera-kit package instead of react-native-vision-camera, orientation changes are supported out of the box.

FYI: In case you need to fix orientations (e.g. set the camera only in landscape) as well, you could use my fork of react-native-camera-kit: https://github.com/LupulescuAlexandru/react-native-camera-kit.

[dmarkow]

This library is nearly perfect for us, especially considering none of the other popular libraries seem to support the iPhone triple camera setup. Orientation support has been the only sticking point for us so far, since 95% of our photos are taken in landscape.

To get this working, I was able to patch react-native-vision-camera@2.4.1 in our project, and it seems to be working out. This new code runs right before photoOutput.capturePhoto to set the video capture orientation. I haven't done anything for Android (we're not using it), and it would need an option like autoOrientation to decide when to use this or not. Note that the landscapeRight/Left opposites are not typos. Apparently device orientations and interface orientations have opposite meanings of landscapeRight and landscapeLeft. This Swift code might also be hot garbage since I have very limited experience with it...

diff --git a/node_modules/react-native-vision-camera/ios/CameraView+TakePhoto.swift b/node_modules/react-native-vision-camera/ios/CameraView+TakePhoto.swift
index be988bc..8c516ae 100644
--- a/node_modules/react-native-vision-camera/ios/CameraView+TakePhoto.swift
+++ b/node_modules/react-native-vision-camera/ios/CameraView+TakePhoto.swift
@@ -103,6 +103,20 @@ extension CameraView {
         photoSettings.isAutoContentAwareDistortionCorrectionEnabled = enableAutoDistortionCorrection
       }
 
+      // use actual device orientation
+      if let photoOutputConnection = photoOutput.connection(with: .video) {
+        switch UIDevice.current.orientation {
+        case .landscapeLeft:
+          photoOutputConnection.videoOrientation = .landscapeRight
+        case .landscapeRight:
+          photoOutputConnection.videoOrientation = .landscapeLeft
+        case .portraitUpsideDown:
+          photoOutputConnection.videoOrientation = .portraitUpsideDown
+        default:
+          photoOutputConnection.videoOrientation = .portrait
+        }
+      }
+      
       photoOutput.capturePhoto(with: photoSettings, delegate: PhotoCaptureDelegate(promise: promise))
 
       // Assume that `takePhoto` is always called with the same parameters, so prepare the next call too.

[mrousavy]

Implemented in #715! Hope this works for you :) If you appreciate the work I do in my free time, please consider sponsoring me on GitHub, it would mean a lot to me. 🖤

[dmarkow]

@mrousavy Thanks! As far as I can tell, this doesn't detect orientation though? In the native iOS camera app, the UI stays portrait, but the camera knows when you've rotated the device. Using this new prop, if we wanted to do the same, would we have to somehow track device orientation separately and pass that into the orientation prop? (whereas the patch I posted above detected orientation automatically and independently of the UI rotation restrictions).

[mrousavy]

Exactly, you can override orientation yourself depending on the device orientation, so it's fully up to you how to handle it. With your patch, it only overrides the orientation for takePhoto and only on iOS, and there's no way to prevent this behaviour (e.g. for apps like Snapchat or Instagram)

[mrousavy]

Hey - I'm tracking Orientation in this feature request/issue now: #1891 ✨

Make sure to upvote or sponsor to support this feature, and leave a comment if you have any additional thoughts/ideas.