From Remote URL

VideoEditor SDK supports loading video files from a remote URL, this can be a resource hosted by a video hosting provider such as Vimeo or Wistia or your own servers.

Download the remote video#

Although you can pass a URL directly to the editor, we strongly recommend that you manage downloading the remote resource yourself. This allows for more control over where and how the download task is being executed and avoids potential problems around UI locking.

Hence we download the video using the expo-file-system module before loading it into the editor.

Open the editor#

When the download is finished we load the local video URL into the editor and open it. Once the video has been exported, we handle the result and possible occurring errors.

Handle user interaction#

For this example, we are using Recoil and Recoil Nexus state management to disable user interaction while the download task is executing. In production, you might want to indicate download progress here. When the download has finished, we can reenable user interaction and dismiss the progress indicator.


import { VESDK } from "react-native-videoeditorsdk";
import * as FileSystem from "expo-file-system";
import { interactionState } from "../../../../state/interactionState";
import { setRecoil } from "recoil-nexus";

export const openVideoFromRemoteURLExample = async (): Promise<void> => {
  // Although the editor supports opening a remote URL, we highly recommend
  // that you manage the download of the remote resource yourself, since this
  // gives you more control over the whole process. After successfully downloading
  // the file you should pass a local URL to the downloaded video to the editor.
  // This example demonstrates how to achieve this.
  const remoteURL = "https://img.ly/static/example-assets/Skater.mp4";

  // Disable user interaction while the download is active. In production you would
  // want to show a progress indicator for example.
  setRecoil(interactionState, false);

  try {
    // Download the video.
    const { uri } = await FileSystem.downloadAsync(
      remoteURL,
      FileSystem.documentDirectory + "Skater.mp4"
    );

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

    if (result != null) {
      // The user exported a new video successfully and the newly generated video is located at `result.video`.
      console.log(result?.video);
    } else {
      // The user tapped on the cancel button within the editor.
      return;
    }
  } catch (error) {
    // There was an error downloading/exporting the video.
    console.log(error);
  } finally {
    // Reenable user interaction. In production you would want to dismiss a
    // progress indicator for example.
    setRecoil(interactionState, true);
  }
};