From Remote URL

VideoEditor SDK supports loading filters from a remote URL, this can be a resource hosted by a video hosting provider or your servers. In this example, we load a custom LUT effect from a remote server.

Downloading remote resources#

We are creating a promise for downloading the filter category thumbnail as well as the LUT filter into the temporary directory.

Adding custom filter categories#

Using the downloaded resources, we are creating a custom filter category containing a custom filter and load it into the configuration.

Handling 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 { Configuration, VESDK } from "react-native-videoeditorsdk";
import * as FileSystem from "expo-file-system";
import { setRecoil } from "recoil-nexus";
import { interactionState } from "../../../../state/interactionState";

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

  // Download promises of remote assets.
  const filterPromise = FileSystem.downloadAsync(
    "https://img.ly/static/example-assets/custom_lut_invert.png",
    FileSystem.cacheDirectory + "custom_lut_invert.png"
  );

  const thumbnailPromise = FileSystem.downloadAsync(
    "https://img.ly/static/example-assets/custom_filter_category.jpg",
    FileSystem.cacheDirectory + "custom_filter_category.jpg"
  );

  // 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 remote resources.
    const downloads = await Promise.all([filterPromise, thumbnailPromise]);

    // Create a `Configuration` object.
    const configuration: Configuration = {
      filter: {
        categories: [
          // A custom `FilterCategory`.
          {
            identifier: "custom",
            name: "Custom",
            thumbnailURI: downloads[1].uri,
            items: [
              // A custom `LUTFilter`.
              {
                identifier: "custom_lut_filter",
                name: "Custom LUT",
                lutURI: downloads[0].uri,
              },
            ],
          },
        ],
      },
    };

    // 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`.
      console.log(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);
  } finally {
    // Reenable user interaction. In production you would want to dismiss a
    // progress indicator for example.
    setRecoil(interactionState, true);
  }
};