How to add location exif data to photo❓

[jaltin]

Question

Hi,

We are currently using the react-native-camera library and are planning/hoping to replace it with this.

In react-native-camera it is possible to add the location to the photo exif data (see for example this https://github.com/react-native-camera/react-native-camera/pull/2573#issuecomment-575427945). This is something we need for our usage.

Is that possible to do also in react-native-vision-camera? If so, how can I achieve it?

Many thanks!

What I tried

No response

VisionCamera Version

2.12.0

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.

[mrousavy]

Hi! Take a look at the PhotoFile's metadata property. Just run the example to find out how it looks on iOS/Android

[jaltin]

Hi @mrousavy! Thanks for the quick reply.

I already saw that property, but it looks like this is a read-only property containing the information that is in the photo when it is taken. Unless I am misstaken?

Location data is not automatically included in photos (at least for iOS, they strip it for privacy reasobs), so it wouldn't be included in the exif meta data.

To have it included, it has to be added manually in one's own app code. In react-native-camera this is done with the writeExif prop as shown in the issue I linked above.

Is there some similar functionality in this lib? Or am I perhaps misunderstanding this and it already exists?

[mrousavy]

Hey @jaltin, no I am not doing this in VisionCamera yet.

I'm also not quite sure if this should be handled by VisionCamera, I will think about it. Either VisionCamera has a prop for this, or provides an easy API to access Exif data so you can write location yourself.

[jaltin]

@mrousavy, in my opinion a good approach would be for this package to allow writing of the location exif data into the image (similar to how react-native-camera does in my link in the initial post).

This package should not be concerned with the location access requests that are needed before an app can get the location data from the os, as this is rather complicated and can take many different paths, and depends on each individual apps needs. It would be messy to maintain that logic here.

It would be great if you would add this functionality, as at the moment that is blocking us from migrating over from react-native-camera. I suspect that it would be a functionality many others would benefit from too.

Thanks!

[mrousavy]

Sure. As a workaround you could write to the File directly, I believe there are Exif writers.

[Pakile]

Hi @mrousavy Any update for this?

[mrousavy]

Hi, no

[jaltin]

Hi @mrousavy, to follow up on your last comment.

Hi, no

Do you have any idea/guesstimate of if/when you would add exif write possibility? Asking so I can have a realistic view of what my alternatatives are going forward.

[mrousavy]

Hi @jaltin. VisionCamera is a project I maintain for free for other people in my very limited free time, and it's hard to support features that I personally do not use myself (that's features I would build entirely for other people, in my free time, for free - just think about it this way). VisionCamera is used in a lot of production apps out there, and I use it in ~4 different apps already (1 is mine, 3 are clients of Margelo).

Since this feature is quite complex and the immediate solution we discussed above (prop to include location data) should not be part of VisionCamera in my opinion, I do not have any plans to support those props in takePhoto(). In my opinion, this just makes everything messy and eventually we will end up like react-native-camera where everything is deprecated and it barely works and isn't maintainable anymore. I have a different philosophy with my libraries; everything should stay as lean as possible. Just like react-native core.

I did however make some experiments with an Image HostObject library (react-native-jsi-image) which will allow you to do any modifications in-memory (resize, crop, flip, color filters, metadata/EXIF writing, etc), that will be separate from VisionCamera, will be very lean and extremely extensible (again, separate libs, different goals, but interoperability and extensibility is a core motivator).

---

So in short; I will not implement this feature now unless someone pays me to do so, but I will do further experiments with the Image HostObject lib I created and we will potentially have an even better solution to in-memory writing than we had with react-native-camera.

[alexg-93]

@jaltin did you found a way to add gps location to write exif into image before saving it to camera roll or another path? i am using react-native-image-picker lib and there is also the same problem when you taking photo there is no gps location in the exif metadata..

did you found a solution?

[Pakile]

Hi @mrousavy Can you add an example of writing exif GPS using react-native-jsi-image?

[jaltin]

@jaltin did you found a way to add gps location to write exif into image before saving it to camera roll or another path? i am using react-native-image-picker lib and there is also the same problem when you taking photo there is no gps location in the exif metadata..

did you found a solution?

@alexg-93 No I haven't done any further work on this yet, been busy with other things. If/when I look into it I will share my findings here.

[jaltin]

So in short; I will not implement this feature now unless someone pays me to do so, but I will do further experiments with the Image HostObject lib I created and we will potentially have an even better solution to in-memory writing than we had with react-native-camera.

@mrousavy Thanks a lot for clarifying your position and philosophy on this, it makes it much clearer.

Cheers!

[elirichey]

I'm also interested in the requested feature. @mrousavy, how much do you want to build the feature? @jaltin, @Pakile, @alexg-93 - are you also interested in contributing? Let's get it built.

[mrousavy]

I'm not sure how long it would take to implement the feature, and I'm not sure how I want the feature to be implemented.

Location Data could be written in a separate library, since all the Camera specific stuff is already being written in VisionCamera, I'd have to take a look at performance.

I'd love to take a look at this issue through my app development agency with our discounted open-source consulting rate, since my free time at the moment is very unpredictable and I don't want to waste any money here.

What size of financial contributions are you guys thinking?

[elirichey]

@mrousavy I concur. Writing location data via the library seems to be outside of the project scope. What I'm suggesting is allowing the user to pass a prop that maps to location metadata the same way you're passing additional props:

this.camera.current.takePhoto({
  ...options,
  location: {
    latitude: '',
    longitude: '',    
  }
});

this.camera.current.startRecording({
  ...options,
  location: {
    latitude: '',
    longitude: '',    
  }
})

Thoughts?

[jaltin]

Hi @mrousavy and @elirichey,

Sorry for my late response on this.

We are having to replace react-native-camera since it is deprecated (as is the case for many other users I suspect). As that repo suggested, we looked at this repo as an alternative and that is where we started to evaluate what was missing and if it is feasible to make the switch.

The location exif data is one of the blockers for us. And in principle we would be willing to co-sponsor work to get it implemented.

However, at the moment we feel that there are too many outstanding issues in this repo and too little activity for us to feel comfortable in attempting the switch.

Don't take me wrong here, we really appreciate the effort by @mrousavy with this package, but we just don't feel that it is mature enough for us to try the switch yet.

I'll leave this issue open as it is still a relevant feature request, but feel free to close it if that is more suitable.

[Pakile]

@elirichey I finally got a solution that uses base64 and an external lib to write the location to the image

[elirichey]

@elirichey I finally got a solution that uses base64 and an external lib to write the location to the image

@Pakile Awesome! Mind sharing the solution?

[Pakile]

@elirichey after taking the image, I get the base64 of the image and use piexifjs to write the location to the picture. it works but is not the most optimal method

[elirichey]

@Pakile If it works, it works! Thanks for sharing!

[lodev09]

expo-camera does this by exposing an additionalExif option when taking photo like this:

const { coords, timestamp } = location
const picture = await cameraRef.current.takePictureAsync({
  exif: true,
  additionalExif: {
    GPSLatitude: coords.latitude,
    GPSLongitude: coords.longitude,
    GPSAltitude: coords.altitude,
    GPSSpeed: coords.speed,
    GPSTimeStamp: timestamp,
    UserComment: 'blah blah'
  },
})

Where location is the object from expo-location (or some other library). Not sure how hard is this to implement to this library 😄

[stevengoldberg]

@elirichey @Pakile: I'm trying to write the GPS data with piexifjs, but having trouble — if you could share a code sample it would be much appreciated.

[mrousavy]

VisionCamera is not a location library and will not support that, you can add that later on with an EXIF lib

[glisom]

Hey all, I noticed an example never got posted so I wanted to share how we are doing this in our app. https://gist.github.com/glisom/5889b8fb52352d46278694d8ea83b268

[jbrodriguez]

@glisom the issue with piexifjs is that the entire image blob traverses the bridge twice:

• the first time to read it into javascript space
• the second time to write it back (with exif tags added) into native storage

although less than ideal, it's probably the only way at the moment

[glisom]

Yeah, I think the only way to avoid would be a native module. Interesting there isn't an exif library already out there for react native specifically.

[jtklein]

We have started to implement a native module solution as an open-source package here: https://github.com/inaturalist/react-native-exif-reader

The package allows reading and writing of EXIF data.

Our main specific use-case is to take photo with vision-camera and write location into the EXIF data.

[lodev09]

@mrousavy been using expo-camera but we came to a point where we need to switch to this package for performance and other needs. I've created a native Exif reader/writer to fix the only blocking feature of this package here: https://github.com/lodev09/react-native-exify

Hoping this helps other people as well.

PS: not to overshadow @jtklein here but we needed a way to write exif to a local file image and not into an asset/camera roll image 🙏

[mrousavy]

@lodev09 nice work man! That library is really useful, I might use it for ShadowLens.

On another note, I think I'll add location tags to VisionCamera though after a lot of consideration. I'll do that in V4