Configure Brush

VideoEditor SDK supports several configuration options for the brush 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.

`actions`#

By default, all available brush tools are enabled. For this example only a couple are enabled.

`defaultColor`#

The default color of the brush stroke is #000000. If you can anticipate that your use case requires a different default color you can set the defaultColor.

`defaultSize`#

Similarly, the size of the brush is set at 5% relative to the smaller side of the video by default. For this example, the default size is set to be 2.5% of the smaller side of the video.

`colors`#

By default, the editor provides a variety of different colors to customize the color of the brush stroke. Here, we only provide a small selection of colors as might be sensible for an annotation use case.


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

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

  // Create a `Configuration` object.
  const configuration: Configuration = {
    brush: {
      // By default all available brush tools are enabled.
      // For this example only a couple are enabled.
      actions: [BrushAction.COLOR, BrushAction.SIZE],

      // By default the default color for the brush stroke is
      // `#ffffff`. For this example the default color
      // is set to `#000000`.
      defaultColor: "#000000",

      // By default the default brush size is set to 5% of the
      // smaller side of the video.
      // For this example the default size is set to be 2.5% of
      // the smaller side of the video.
      defaultSize: 0.025,

      // By default the editor provides a variety of different
      // colors to customize the color of the brush stroke.
      // For this example only a small selection of colors is enabled.
      colors: [
        {
          name: "White",
          color: "#ffffff",
        },
        {
          name: "Black",
          color: "#000000",
        },
        {
          name: "Red",
          color: "ff0000",
        },
      ],
    },
  };

  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);
  }
};

Configure Brush

actions#

defaultColor#

defaultSize#

colors#

`actions`#

`defaultColor`#

`defaultSize`#

`colors`#