react-native-vision-camera icon indicating copy to clipboard operation
react-native-vision-camera copied to clipboard

✨ Add record / save path

Open hirbod opened this issue 2 years ago • 14 comments

What feature or enhancement are you suggesting?

I think it would be nice to define where the file should be saved. Currently it's being saved in the /tmp/ folder. While this is not an issue but more a convenience and speed thing, (I am using FileSystem.copyAsync from expo to create a copy of it, since I am not allowed to "moveAsync" (permission issue?)

I would love to be able to define a save path, which Expo's FileSystem has access to.

Why I am asking for it? Because it's unreliable when the OS clears the tmp folder. I currently generated 16 GB of video files in my tests and there is no way for me to delete those. I think the end user will eventually delete our app if they can't free up space.

What Platforms whould this feature/enhancement affect?

iOS, Android

Alternatives/Workarounds

There are no workarounds. I tried to delete the files with FileSystem.deleteAsync but it always ends up with "file is not deleteable/moveable".

The copies of the files I create though, which live in FileSystems documentDirectory, are move- and deleteable.

I am using a video editor sdk which also has the ability to define the save path and its working pretty good and reliable.

Additional information

hirbod avatar Mar 12 '22 10:03 hirbod

Thanks for the feature request, that's a pretty valid enhancement. I'd imagine the user being responsible for creating all of the paths and making sure VisionCamera has permission to create a file there?

mrousavy avatar Mar 14 '22 08:03 mrousavy

Here are the comments the other SDK I am using is making:

* The filename for the exported data .
     * The correct filename extension will be automatically added
     * based on the selected export format. It can be an absolute path or file URL or a relative path.
     * If some relative path is chosen it will be created in a temporary system directory and overwritten
     * if the corresponding file already exists. If the value is `null` an new temporary file will be
     * created for every export.
     * @note Please make sure that the provided `filename` is valid for the different devices and that
     * your application has the corresponding access rights to write to the desired location. For Android,
     * you will want to make sure to set this inside one of the directories conforming to scoped storage:
     * - DCIM/
     * - Pictures/
     * 
     * For Videos you can additionally use:
     *  - Movies/

And I am supplying something like this:

filename: VIDEO_TMP_DIR + uuidv4()

The SDK adds .mov/mp4 automatically based on filetype/codec.

And my VIDEO_TMP_DIR is

export const VIDEO_TMP_DIR = `${FileSystem.documentDirectory}myCoolApp/video-tmp-exports/`;

To your question: If no filename/path supplied, it should behave like it does now: writing into the temp directory. If the user does supply a path, RNVC should not be responsible for permissions.

hirbod avatar Mar 14 '22 08:03 hirbod

+1 on this. I have faced issues in the past with losing pictures after a crash because React Native iOS clears the tmp directory upon each cold boot. Since then I have always moved every capture to a permanent directory immediately after capture, but this can add a slight delay which I'd rather avoid. Another reason is I'd like to generate my own file names instead of mrousavyXXXXXXXXX.jpg as they show up in certain file browsers, so currently I have to do another file operation to rename the file.

alexstanbury avatar Mar 21 '22 10:03 alexstanbury

@mrousavy I'm willing to help out with this, giving your approval and kind of a guide. I need this anyway :)

garyhlusko avatar Mar 31 '22 23:03 garyhlusko

Sure:

  1. Add path?: string in this interface: https://github.com/mrousavy/react-native-vision-camera/blob/3850491b9f443257880964a4b0c0c70f484ab4f3/src/VideoFile.ts#L17
  2. [iOS]: Read options.path and if it exists, use it instead of tempURL here: https://github.com/mrousavy/react-native-vision-camera/blob/3850491b9f443257880964a4b0c0c70f484ab4f3/ios/CameraView%2BRecordVideo.swift#L39
  3. [Android]: Read options.path and if it exists, use it instead of tempURL here: https://github.com/mrousavy/react-native-vision-camera/blob/3850491b9f443257880964a4b0c0c70f484ab4f3/android/src/main/java/com/mrousavy/camera/CameraView%2BRecordVideo.kt#L41

Test both with and without path to make sure everything still works, then create a PR and I can test :)

mrousavy avatar Apr 04 '22 09:04 mrousavy

We need some kind of error handling as well, so e.g.

  • Path does not exist
  • Path is not valid
  • Path is not writeable
  • Path is a folder, not a file
  • Path has invalid extension (not .mp4)

On Android, add here: https://github.com/mrousavy/react-native-vision-camera/blob/main/android/src/main/java/com/mrousavy/camera/Errors.kt On iOS, add here: https://github.com/mrousavy/react-native-vision-camera/blob/main/ios/CameraError.swift For JS, add here: https://github.com/mrousavy/react-native-vision-camera/blob/main/src/CameraError.ts

mrousavy avatar Apr 04 '22 09:04 mrousavy

I'm happy to work on this next week sometime if @garyhlusko can't.

alexstanbury avatar Apr 20 '22 15:04 alexstanbury

Hi, did this enhancement ever get done? I am loving the vision camera but have hit a dead end re: using the results as its not possible to even read the photo/video files created using Expo FileSystem. FileSystem.getInfoAsync works but copyASync does not (file "isn't readable"). Any workaround's suggestions greatly appreciated.

GreenCurveDev avatar Aug 20 '22 12:08 GreenCurveDev

I'm having the same problem @GreenCurveDev has. I cannot even do copyASync on the file to keep it.

mortenmo avatar Oct 05 '22 14:10 mortenmo

@GreenCurveDev if you can use react-native-fs in your project, copying the file with that library does work.

mortenmo avatar Oct 05 '22 17:10 mortenmo

Thanks mortenmo, to work around this I prefixed the file paths with file:// but it definitely felt wrong - I will try your suggestion.

GreenCurveDev avatar Oct 06 '22 16:10 GreenCurveDev

Is this still in progress? Did either of you guys get to work on it? @alexstanbury @garyhlusko

I would use react-native-fs however i'm recording large videos which may be too large for the initial write to internal storage.

Another useful alternative would be to get some kind of access to chunks of data. Any thoughts on this kind of functionality @mrousavy ?

Sid-Turner-Ellis avatar Jan 20 '23 05:01 Sid-Turner-Ellis

Yea, this is WIP - need V3 for this. If you wanna see this faster, consider sponsoring the V3 efforts :) [email protected]

mrousavy avatar Jan 25 '23 13:01 mrousavy

Was this ever completed?

josh-thompson13 avatar Oct 12 '23 22:10 josh-thompson13