🐛 Potrait mode video is flipped to wrong direction

[sw-tt-hitendrachavda]

What's happening?

I am capturing the video in front camera with portrait and landscape mode. In Landscape mode it's working fine. but when i capture the video in portrait mode the video is flipped to wrong direction.

Please suggest.

Reproduceable Code

const frontformate = useCameraFormat(devicesFront, [
    { fps: 30 },
    {videoStabilizationMode : 'off'},
    { videoResolution: { width: 1280, height: 720 } },
    ]);
   
  const backformate =  useCameraFormat(devicesBack, [
    { fps: 30 },
    {videoStabilizationMode : 'off'},
    { videoResolution: { width: 1280, height: 720 } },
    ]);


<Camera
            ref={cameraRef}
            style={[styles.camera]}
            audio={true}
            video={true}
            isMirrored={false}
            device={cameraType === 'front' ? devicesFront : devicesBack}
            isActive={true}
            format={cameraType === 'front' ? frontformate : backformate}
          />

Relevant log output

2024-09-19 13:42:53.376174+0530 utrapp[3037:204765] [javascript] Permission: ios.permission.MICROPHONE, Status: granted
2024-09-19 13:42:53.384531+0530 utrapp[3037:204765] [javascript] 'isTablet', false
2024-09-19 13:42:53.384797+0530 utrapp[3037:204765] [javascript] 'isIpad', false
2024-09-19 13:42:53.385081+0530 utrapp[3037:204765] [javascript] 'iPhone', false
13:42:53.472: [info] 📸 VisionCamera.didSetProps(_:): Updating 25 props: [onInitialized, cameraId, position, enableBufferCompression, preview, onOutputOrientationChanged, onStarted, onCodeScanned, top, right, isActive, video, onViewReady, onError, onStopped, isMirrored, onPreviewOrientationChanged, onPreviewStopped, enableFrameProcessor, onPreviewStarted, format, left, bottom, audio, onShutter]
13:42:53.473: [info] 📸 VisionCamera.configurePreviewOrientation(_:): Updating Preview rotation: portrait...
13:42:53.473: [info] 📸 VisionCamera.configureOutputOrientation(_:): Updating Outputs rotation: portrait...
13:42:53.473: [info] 📸 VisionCamera.configure(_:): configure { ... }: Waiting for lock...
13:42:53.476: [info] 📸 VisionCamera.configure(_:): configure { ... }: Updating CameraSession Configuration... Difference(inputChanged: true, outputsChanged: true, videoStabilizationChanged: true, orientationChanged: true, formatChanged: true, sidePropsChanged: true, torchChanged: true, zoomChanged: true, exposureChanged: true, audioSessionChanged: true, locationChanged: true)
13:42:53.476: [info] 📸 VisionCamera.configureDevice(configuration:): Configuring Input Device...
13:42:53.476: [info] 📸 VisionCamera.configureDevice(configuration:): Configuring Camera com.apple.avfoundation.avcapturedevice.built-in_video:1...
13:42:53.482: [info] 📸 VisionCamera.configureDevice(configuration:): Successfully configured Input Device!
13:42:53.482: [info] 📸 VisionCamera.configureOutputs(configuration:): Configuring Outputs...
13:42:53.482: [info] 📸 VisionCamera.configureOutputs(configuration:): Adding Video Data output...
13:42:53.483: [info] 📸 VisionCamera.configurePreviewOrientation(_:): Updating Preview rotation: portrait...
13:42:53.483: [info] 📸 VisionCamera.configureOutputOrientation(_:): Updating Outputs rotation: portrait...
13:42:53.483: [info] 📸 VisionCamera.configureOutputs(configuration:): Successfully configured all outputs!
13:42:53.484: [info] 📸 VisionCamera.setTargetOutputOrientation(_:): Setting target output orientation from device to device...
13:42:53.484: [info] 📸 VisionCamera.configureFormat(configuration:device:): Configuring Format (3840x2160 | [email protected] (ISO: 19.0..1824.0))...
13:42:53.485: [info] 📸 VisionCamera.configureFormat(configuration:device:): Successfully configured Format!
13:42:53.486: [info] 📸 VisionCamera.getPixelFormat(for:): Available Pixel Formats: ["420v", "420f", "BGRA"], finding best match... (pixelFormat="yuv", enableHdr={false}, enableBufferCompression={true})
13:42:53.486: [info] 📸 VisionCamera.getPixelFormat(for:): Using PixelFormat: 420f...
13:42:53.647: [info] 📸 VisionCamera.init(frame:session:): Preview Layer started previewing.
13:42:53.648: [info] 📸 VisionCamera.configure(_:): Beginning AudioSession configuration...
13:42:53.648: [info] 📸 VisionCamera.configureAudioSession(configuration:): Configuring Audio Session...
13:42:53.648: [info] 📸 VisionCamera.configure(_:): Beginning Location Output configuration...
13:42:53.648: [info] 📸 VisionCamera.configureAudioSession(configuration:): Adding Audio input...
13:42:53.652: [info] 📸 VisionCamera.configureAudioSession(configuration:): Adding Audio Data output...
13:42:53.652: [info] 📸 VisionCamera.configure(_:): Finished Location Output configuration!
13:42:53.654: [info] 📸 VisionCamera.configure(_:): Committed AudioSession configuration!

Camera Device

Front formate {
  "formats": [],
  "minFocusDistance": 0,
  "sensorOrientation": "portrait",
  "maxZoom": 135,
  "minZoom": 1,
  "hasTorch": false,
  "hardwareLevel": "full",
  "position": "front",
  "maxExposure": 8,
  "supportsLowLightBoost": false,
  "id": "com.apple.avfoundation.avcapturedevice.built-in_video:1",
  "name": "Front Camera",
  "minExposure": -8,
  "hasFlash": true,
  "physicalDevices": [
    "wide-angle-camera"
  ],
  "neutralZoom": 1,
  "supportsFocus": false,
  "supportsRawCapture": false,
  "isMultiCam": false
}

back formate {
  "formats": [],
  "position": "back",
  "minFocusDistance": 10,
  "hardwareLevel": "full",
  "hasTorch": true,
  "isMultiCam": false,
  "supportsLowLightBoost": false,
  "maxExposure": 8,
  "supportsFocus": true,
  "supportsRawCapture": false,
  "neutralZoom": 1,
  "physicalDevices": [
    "wide-angle-camera"
  ],
  "name": "Back Camera",
  "minExposure": -8,
  "hasFlash": true,
  "maxZoom": 16,
  "id": "com.apple.avfoundation.avcapturedevice.built-in_video:0",
  "sensorOrientation": "portrait",
  "minZoom": 1
}

Device

iPhoneX OS 16.7.10

VisionCamera Version

4.5.3

Can you reproduce this issue in the VisionCamera Example app?

I didn't try (⚠️ your issue might get ignored & closed if you don't try this)

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! 🍻 Thanks for reporting zis issue. It looks like you might be encountering an unexpected behavior with video orientation in portrait mode.

Can you please verify if you have tried reproducing zis issue in ze VisionCamera Example app? It's important to ensure zis problem persists outside of your setup. Also, if possible, please provide any additional logs from Xcode or adb logcat when zis issue occurs. Zis will help mrousavy a lot in diagnosing ze problem.

If you're unsure how to gather logs, for iOS you can find them in ze Xcode console. For Android, use adb logcat in your terminal.

Once you have more information, we can work towards resolving zis. Danke!

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

[mrousavy]

Can you reproduce this issue in the VisionCamera Example app?

I didn't try (⚠️ your issue might get ignored & closed if you don't try this)

Please try if you can reproduce here.

[davetodd]

I was able to reproduce this with the front camera in the example app by adding isMirrored={false} to the Camera. It only seems to happen with video output on iOS. Photo output is correctly flipped around the vertical axis. Android works fine with both video and photo.

Edit: Tested with version 4.5.3

[colaquecez]

Same here, for android is working good, but for iOS with isMirrored={false} we are getting this error.

[flyingL123]

I am seeing this error as well. If isMirrored={false}, the resulting video is mirrored horizontally instead of vertically (the output video is upside down). However, I am also finding that video mirroring with the front camera on iOS isn't working.

In other words, if I record a video with the front camera, without using this isMirrored prop at all, the resulting output video does not get flipped like it should (like the default iOS camera would do). If I record a video, and hold up my right hand, it looks like my left hand in the preview, but then when I watch the output, it still looks like my left hand. If I do the same with the iOS built-in camera, the output properly looks like my right hand.

The code is below:

const device = useCameraDevice('front');

<Camera
        ref={cameraRef}
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        video={true}
        audio={true}
        onInitialized={() => {
          onCameraReady();
        }}
        onError={(error) => console.error(error)}
/>

@colaquecez @davetodd Am I missing something obvious here or is the front camera not working properly on iOS?

[paragbarsar99]

is this happening only in IOS version 16 or below 16 i saw the same issue in iphone x and in 7 but working fine in 13,14 device.

[davetodd]

@flyingL123 per this comment I think the default behavior is intentional -- unlike the default iOS camera's output, react-native-vision-camera's output is mirrored. So the bug is that isMirrored={false} should disable this, and instead it flips the output upside down.

[flyingL123]

@davetodd ok got it. That makes sense. My built-in camera has the mirroring setting disabled, so if I'm trying to have react-native-vision-camera mimic that behavior, I should pass isMirrored={false}. I can confirm when I do that, the output video is upside down.

I am on iPhone XR - iOS v17.6.1

@mrousavy any idea what's causing this?

[PatriciaRomaniuc]

I also need a fix for this, mirroring on IOS is turning the video upside down instead of vertical mirroring as the documentations says it should. Any update?

[juliajungle]

I am also seeing this issue on IOS. Currently having to add a workaround to rotate the videos that are upside down.