Skip to main content
Language:

Annotations

While there is no dedicated tool for annotations, VideoEditor SDK can easily be configured to include the features necessary for a powerful yet simple-to-use video annotation tool. To this end we only enable features that are useful to annotate objects in a video:

  • brush tool for flexible marking and colored highlights
  • sticker tool for including shapes such as arrows, tags or badges
  • text tool to provide information around annotation markers

Configuring menu items#

Since we only want to include the three above mentioned tools, we only add those tools to the configuration.

Stickers#

We want to omit stickers that are not annotation specific, but rather add shapes such as arrows, tags or badges. To that end, we group suitable existing stickers in a custom StickerCategory and load this into the configuration. Consult the sticker configuration section for more details.

Open editor#

Finally, we load the previously created configuration into the editor for the customizations to take effect.

For a detailed explanation of how to configure different editor views, refer to this guide.

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


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


  // Create a `Configuration` object.
  const configuration: Configuration = {
    // For this example only the sticker, text, and brush tool are enabled.
    tools: [Tool.STICKER, Tool.TEXT, Tool.BRUSH],


    // For this example only stickers suitable for annotations are enabled.
    sticker: {
      categories: [
        {
          identifier: "annotation_stickers",
          name: "Annotation",
          thumbnailURI: require("../../../../assets/sticker_thumbnail.png"),
          items: [
            { identifier: "imgly_sticker_shapes_arrow_02" },
            { identifier: "imgly_sticker_shapes_arrow_03" },
            { identifier: "imgly_sticker_shapes_badge_11" },
            { identifier: "imgly_sticker_shapes_badge_12" },
            { identifier: "imgly_sticker_shapes_badge_36" },
          ],
        },
      ],
    },
  };


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


    // highlight-events
    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);
  }
};