To a Remote URL

VideoEditor SDK supports saving videos to a remote URL.

Import Expo file system#

To use the device's file system, we need to install and import the expo-file-system module. For further reference on how to set this up, please take a look at the official documentation.

Set an accessible export path#

Since we are using the expo-file-system module for deleting the exported video after processing it, we need to save the video in one of the directories that are supported by this module. Otherwise, the module will not be able to delete the files. For further reference on this, please have a look at the official documentation. Please note that you need to specify the file extension for Android, while it is automatically added for iOS.

Open the editor and handle the result#

Open the video editor and handle the export result.

If no modifications have been made to the original video, we will not process the original video at all and also not reencode it. In this case, result.video will point to the original video that was passed to the editor, if available. If you want to ensure that the original video is always reencoded, even if no modifications have been made to it, you can set configuration.export.force to true, in which case result.video will always point to a newly generated video.

Upload the video#

After retrieving the exported video, use the expo-media-library to save the VideoEditorResult.video. In this example, the upload will fail, since no valid remote URL is specified.

Delete the temporary video#

Delete the temporary export file only after the upload process has finished, to be able to access it again in case anything went wrong while uploading the video.


import * as FileSystem from "expo-file-system";
import { Platform } from "react-native";
import { Configuration, VESDK } from "react-native-videoeditorsdk";

export const saveVideoRemoteURLExample = async (): Promise<void> => {
  try {
    // Add a video from the assets directory.
    const video = require("../../../../assets/vesdk/Skater.mp4");

    // Since this example is using `expo-file-system` to remove the exported video later,
    // we need to export the video in one of the two directories that are supported by this module.
    // For further reference, please have a look at the official documentation here:
    // https://docs.expo.dev/versions/latest/sdk/filesystem/#directories
    const configuration: Configuration = {
      export: {
        filename:
          FileSystem.cacheDirectory +
          `export${Platform.OS == "android" ? ".mp4" : ""}`,
      },
    };

    // Open the video editor and handle the export as well as any occuring errors.
    const result = await VESDK.openEditor(video, configuration);

    if (result != null) {
      // The user exported a new video successfully and the newly generated video is located at `result.video`.
      // If **no modifications** have been made to the original video, we will not process the original video at all
      // and also not reencode it. In this case `result.video` will point to the original video that was passed to the editor,
      // if available. If you want to ensure that the original video is always reencoded, even if no modifications have
      // been made to it, you can set `configuration.export.force` to `true`, in which case `result.video` will
      // always point to a newly generated video.
      //
      // For this example, the video is uploaded to a remote URL.
      const uploadResult = await FileSystem.uploadAsync(
        "YOUR-VALID-DESTINATION-URL",
        result.video
      );

      if (uploadResult.status != 200) {
        throw "There was an error uploading the video.";
      }

      // Delete the temporary export file only after the upload process has finished,
      // to be able to access it again in case anything went wrong while uploading
      // the video.
      return FileSystem.deleteAsync(result.video);
    } else {
      // The user tapped on the cancel button within the editor.
      return;
    }
  } catch (error) {
    // There was an error generating the video.
    console.log(error);
  }
};