React Native Video Annotation

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

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.


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

React Native Video Annotation

Configuring menu items#

Stickers#

Open editor#