🐛 Mirror issue with front camera

[blueberry6401]

What's happening?

Front facing video file output is mirrored, both on Android and iOS. While the preview should be mirrored, the output file should not.
Also, while PhotoFile has isMirrored field, VideoFile does not. So if I want to flip the video, I have no idea if it's mirrored or not.

There is opening issue about this mirror thing from 2022, but my needs are simpler, either provide an option to disable this mirror, or provide a field to let me know if it's mirrored.

Reproduceable Code

const device = useCameraDevice('front');
    const format = useCameraFormat(device, [
        { videoResolution: { width: 1000, height: 1280 } },
    ]);


<Camera
                style={styles.cameraStyle}
                device={device}
                isActive={true}
                video={true}
                ref={refCamera}
                format={format}
            />

refCamera.current.startRecording({
                onRecordingFinished: (video) => {
                },
                onRecordingError: (error) => {
                },
                videoCodec: 'h264',
                fileType: 'mp4',
            });

Relevant log output

No log

Camera Device

// iPhone 12 Pro
{
  isMultiCam: false,
  minFocusDistance: 0,
  supportsLowLightBoost: false,
  maxExposure: 8,
  hasTorch: false,
  id: 'com.apple.avfoundation.avcapturedevice.built-in_video:1',
  minZoom: 1,
  sensorOrientation: 'landscape-right',
  formats: [],
  hardwareLevel: 'full',
  position: 'front',
  supportsRawCapture: false,
  supportsFocus: false,
  neutralZoom: 1,
  physicalDevices: [ 'wide-angle-camera' ],
  name: 'Front Camera',
  hasFlash: true,
  minExposure: -8,
  maxZoom: 128.875
}

// Samsung Galaxy A32
{
  formats: [],
  sensorOrientation: 'landscape-right',
  hardwareLevel: 'limited',
  maxZoom: 4,
  minZoom: 1,
  maxExposure: 20,
  supportsLowLightBoost: false,
  neutralZoom: 1,
  physicalDevices: [ 'wide-angle-camera' ],
  supportsFocus: true,
  supportsRawCapture: false,
  isMultiCam: false,
  minFocusDistance: 0,
  minExposure: -20,
  name: '1 (FRONT) androidx.camera.camera2',
  hasFlash: false,
  hasTorch: false,
  position: 'front',
  id: '1'
}

Device

iPhone 12 Pro + Samsung Galaxy A32

VisionCamera Version

4.0.5

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.

[mrousavy]

Mirroring is intentional. This is how VisionCamera works.

For Video files it just isn't really simple - what if you flip camera devices from front to back while recording? Is the video now mirrored or not?

[blueberry6401]

Mirroring is intentional. This is how VisionCamera works.

For Video files it just isn't really simple - what if you flip camera devices from front to back while recording? Is the video now mirrored or not?

The back camera does not mirror the video, only the front-facing camera does. Typically on stock camera app (on my iphone), the camera preview appears mirrored, but when saving to a file, it is flipped back.
While I can manually flip the video, there is no indicator to determine if the video is mirrored, unlike PhotoFile which has an 'isMirrored' field.

[mrousavy]

That's not what I said.

A video file cannot have an isMirrored flag because you could switch from back <-> front while recording. One stream is mirrored, one isn't.

[blueberry6401]

That's not what I said.

A video file cannot have an isMirrored flag because you could switch from back <-> front while recording. One stream is mirrored, one isn't.

So what could you suggest? My usecase is quite simple, only need front camera.

[mrousavy]

I think I could add a prop like isMirrored that controls mirroring for photos and videos. But this is a bit complex due to orientation, and I don't have the time to add that right now. If you want to sponsor this, I could add it. DM me for details.

[blueberry6401]

Thank you for your information, I'll consider it.
At the moment, I have a quick patch, so if anyone who needs a very simple use like me could try:

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 16d9aa5..4b48c31 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
@@ -305,7 +305,7 @@ class CameraSession(private val context: Context, private val callback: Callback
 
       val video = VideoCapture.Builder(recorder).also { video ->
         // Configure Video Output
-        video.setMirrorMode(MirrorMode.MIRROR_MODE_ON_FRONT_ONLY)
+        // video.setMirrorMode(MirrorMode.MIRROR_MODE_ON_FRONT_ONLY)
         if (configuration.videoStabilizationMode.isAtLeast(VideoStabilizationMode.STANDARD)) {
           assertFormatRequirement("videoStabilizationMode", format, InvalidVideoStabilizationMode(configuration.videoStabilizationMode)) {
             it.videoStabilizationModes.contains(configuration.videoStabilizationMode)
diff --git a/node_modules/react-native-vision-camera/ios/Core/CameraSession+Configuration.swift b/node_modules/react-native-vision-camera/ios/Core/CameraSession+Configuration.swift
index 882f4b3..9897d69 100644
--- a/node_modules/react-native-vision-camera/ios/Core/CameraSession+Configuration.swift
+++ b/node_modules/react-native-vision-camera/ios/Core/CameraSession+Configuration.swift
@@ -158,7 +158,7 @@ extension CameraSession {
   func configureOrientation(configuration: CameraConfiguration) {
     // Set up orientation and mirroring for all outputs.
     // Note: Photos are only rotated through EXIF tags, and Preview through view transforms
-    let isMirrored = videoDeviceInput?.device.position == .front
+    let isMirrored = false
     for output in captureSession.outputs {
       if isMirrored {
         output.mirror()

[mrousavy]

Hey all! I just spent some time to build a new feature: I created a PR to add a isMirrored prop to Camera: #3036

With this prop you can enable or disable output mirroring 🎉🥳

If you appreciate my time and dedication towards building new features and constantly improving this library, please consider sponsoring me on GitHub :)