Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 Mirror issue with front camera #2941

Closed
3 of 5 tasks
blueberry6401 opened this issue Jun 5, 2024 · 7 comments · Fixed by #3036
Closed
3 of 5 tasks

🐛 Mirror issue with front camera #2941

blueberry6401 opened this issue Jun 5, 2024 · 7 comments · Fixed by #3036
Labels
🐛 bug Something isn't working

Comments

@blueberry6401
Copy link

blueberry6401 commented Jun 5, 2024

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

@blueberry6401 blueberry6401 added the 🐛 bug Something isn't working label Jun 5, 2024
@mrousavy
Copy link
Owner

mrousavy commented Jun 5, 2024

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
Copy link
Author

blueberry6401 commented Jun 5, 2024

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
Copy link
Owner

mrousavy commented Jun 5, 2024

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
Copy link
Author

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
Copy link
Owner

mrousavy commented Jun 6, 2024

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
Copy link
Author

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
Copy link
Owner

mrousavy commented Jul 2, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants