this.camera.takePictureAsync() flips image horizontally

#1

Reproduce with the camera app:
https://expo.io/@community/camerja

Using iPhone 6s or android. Images taken using the front camera are flipped 180 horizontally.

How can we prevent this?

Thank you.

#2

Hi-

Are the images flipped in general? Or just when you are using the selfie camera?

When using the selfie camera, it’s tricky to say what the right behavior should be. You can either show something like a mirror that will be intuitive for people looking at themselves in it, but will flip things like writing around backwards. Or you can show the image as its taken from the camera which will show writing forwards but will feel weird to someone looking at themselves on the screen in the camera.

Most products (including, for example, the default Camera app on iOS) show the mirror view as you take a photo, and then flip that around and show it the way the camera saw it in your camera roll. This is what Camerja does. Some apps behave differently. Snapchat for example uses the mirror view as you look but then leaves the image reversed so it looks more natural for someone who just took the photo but writing on your shirt would look backwards and its less natural for people who are looking at the person who just took the photo.

You could just do an image transformation on either the camera view or the output image to choose different solutions to this problem.

i’ll try to find examples of that for you if i can.

1 Like
#3

Take a look here:

#4

Hello.

Yes, this happens only using the front camera.

Exactly, we are going for the snapchat type of effect.

Yes, it appears we will have to transform the image.

Thank you for the input. We were not aware this was an intentional feature!

1 Like
#5

Do you have any ideas how we could transform the perspective on the output image, in a way that we could upload the file afterwards with the transformation intact?

#6

@globlee interesting trivia: snapchat on android doesn’t actually even take a picture with your camera, it takes a screenshot. you can achieve the same behavior with the front camera if you use expo’s takeSnapshotAsync

this is going to result in slightly lower picture quality though - so you could flip the captured images to your liking using css: https://www.w3schools.com/howto/howto_css_flip_image.asp

#7

Interesting indeed. Thank you for sharing that.

We managed to flip the image using react-native-canvas, now we are trying to figure out what to do with the base64 string. Probably going to try and save it, then upload the saved file.

If this does not work, we will use that method.