Why does the front camera turn photos in horizontal mode and why I cannot make them vertically❓

[VGabriel45]

Question

I am not sure if it is a bug or not but the front-camera behaves weird, I have react vision camera version 3.3.1 and when using front camera, after taking a picture, it takes that picture horizontally but I want it to be vertical. My phone orientation is vertical. I can't find a way to make the picture vertical.

What I tried

I tried to set orientation on PhotoFile but it doesn't change anything also on ReanimatedCamera.

VisionCamera Version

3.3.1

Additional information

• [ ] I am using Expo
• [X] I have read the Troubleshooting Guide
• [X] I agree to follow this project's Code of Conduct
• [X] I searched for similar questions in the issues page as well as in the discussions page and found none.

[askynet]

Any update on this or any workaround?

[VGabriel45]

Any update on this or any workaround?

Nothing yet

[JB712]

Same problem with v3.6.4

But Orientation is a pinned issue, so the problem seems far to be corrected within the package...

[bglgwyng]

It's weird.

The code that decides the orientation of the taken photo is here. https://github.com/mrousavy/react-native-vision-camera/blob/8f986a45ea0aa3398e45a806a264fbcc03278971/package/android/src/main/java/com/mrousavy/camera/extensions/CameraDevice%2BcreatePhotoCaptureRequest.kt#L52

I've tried modifying that line to some explicit JPEG_ORIENTATION values, like captureRequest.set(CaptureRequest.JPEG_ORIENTATION, 90) I found that the photo taken by the front camera didn't get affected by the value(90 above) at all, while the back camera worked properly ,which means that the changes in JPEG_ORIENTATION value actually rotated the taken photos. I used Galaxy S21 to test it and I'm confused if it's a bug in the device or we are missing somthing.

[bglgwyng]

Could you guys report your Android devices please? @VGabriel45 @JB712 @askynet I'm using Galaxy S21.

[VGabriel45]

For me it is not working on any device, the issue is only on front camera for some reason

[Alnyli07]

I have same problem with 'front' camera in Xiaomi Mi Note 10 Lite device.

PhotoFile: json{"height": 1728, "isMirrored": true, "isRawPhoto": false, "orientation": "landscape-right", "path": "/data/user/0/com.test.app/cache/mrousavy7832491812325578879.jpg", "width": 2304}

Is there any solution to rotate existing image via orientation info?

[JB712]

@bglgwyng I'm working mostly on emulated Pixel 2 in windows environnement.

I think there's a workaround possible with react-native-orientation-locker: it provides device precise orientation (not only portrait/landscape, but landscape-left, landscape-right, portrait-upsidedown, ...) and it can lock some components in specific orientations. I did choose to lock my camera page on portrait orientation as it is easier to implement, but I'll try the other one when I have time

[PierreCapo]

Video of the issue with Samsung Galaxy A13. I am using using camera roll to save the picture as per mentioned by the documentation. I am using the front camera.

Code:

const photo = await cameraRef.current?.takePhoto({
  qualityPrioritization: 'speed',
});
const photoPath = `file://${photo?.path}`;
if (Platform.OS === 'android') {
  await CameraRoll.save(photoPath, {
    type: 'photo',
  });
  setPhotoUrl(photoPath);
}

Output:

https://github.com/mrousavy/react-native-vision-camera/assets/26744253/47ecc3f8-0a52-4dd4-b984-8f5f64a07f61

[PierreCapo]

Oh it probably may be related to https://github.com/mrousavy/react-native-vision-camera/issues/1935

[umar-stride-studio]

I made a little fix by determining the orientation of image and then rotating the image by using image-resizer

const handleCapture = async () => {
    if (camera) {
      const image = await camera.current!.takePhoto({
        qualityPrioritization: 'speed',
      });
      await handleRotation(image);
    }
  };
  
  const handleRotation = async (image: PhotoFile) => {

    let output = await ImageResizer.createResizedImage(
      'file://' + image.path,
      350,
      350,
      'JPEG',
      100,
      image.orientation === 'landscape-left'
        ? 90
        : image.orientation === 'landscape-right'
        ? -90
        : image.orientation === 'portrait-upside-down'
        ? 180
        : 0,
      undefined,
      false,
    );

    // your further processing
  };

ImageResizer can be import from @bam.tech/react-native-image-resizer

[hashhirr]

i am having the same issue recording videos on front cam works fine but clicking images have issues..i am making a camera app even tho if i rotate the image somehow in the image display screen when i save it in my gallery the image orientation is not portrait.do any of you have a fix?

[mrousavy]

Closing this for now as this is the issue orientation is being tracked in: https://github.com/mrousavy/react-native-vision-camera/issues/1891

[HaiNam362]

i use ffmpeg-kit-react-native library and write command function then i use Aspect Ratio scaling and i use following command command: static async reduceImage(payload: { path: string; ext?: string; }): Promise { const {path, ext = 'png'} = payload; const newPath = this.formatPath(path); const outputPath = ${newPath}_resized.${ext};

 const command = `-i ${path} -vf "scale=ih*9/16:ih" ${outputPath}`;
 await FFmpegKit.execute(command);

 return outputPath;

}

[mrousavy]

Hey all! I just spent some time to build a new feature: I created a PR to add a isMirrored prop to Camera: https://github.com/mrousavy/react-native-vision-camera/pull/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 :)