Skip to main content
Contact SalesFree Trial
Contact SalesFree Trial
Language:

Configure Video Composition

VideoEditor SDK supports several configuration options for the video composition tool allowing flexible adaptation to different needs and use cases. For a detailed explanation of how to configure different editor views, refer to this guide.

Configuration#

The video composition tool can be customized using the configuration.composition option. In there, you can specify the available video clip categories, the canvas actions, whether the user is allowed to add personal videos to the composition as well as options for when trimming individual video clips of the composition.

categories#

In order to provide one or multiple video libraries to the editor, you can specify an array of VideoClipCategory. Each category can contain multiple VideoClips.

personalVideoClips#

By default, the user is allowed to add personal video clips from the device. For this example the user is only allowed to add video clips that are predefined in the editor configuration.

File:
import { Configuration, VESDK } from "react-native-videoeditorsdk";


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


  // Create a `Configuration` object.
  const configuration: Configuration = {
    composition: {
      // Create new video clip categories with custom video clips from
      // the app bundle.
      categories: [
        {
          identifier: "misc",
          name: "Misc",
          items: [
            {
              identifier: "delivery",
              videoURI: require("../../../../assets/vesdk/delivery.mp4"),
            },
            {
              identifier: "notes",
              videoURI: require("../../../../assets/vesdk/notes.mp4"),
            },
          ],
        },
        {
          identifier: "people",
          name: "People",
          items: [
            {
              identifier: "dj",
              videoURI: require("../../../../assets/vesdk/dj.mp4"),
            },
            {
              identifier: "rollerskates",
              videoURI: require("../../../../assets/vesdk/rollerskates.mp4"),
            },
          ],
        },
      ],


      // By default the user is allowed to add personal video clips
      // from the device. For this example the user is only allowed
      // to add video clips that are predefined in the editor configuration.
      personalVideoClips: false,
    },
  };


  try {
    // 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);
  }
};