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

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 'package:catalog/models/code_example.dart';
import 'package:imgly_sdk/imgly_sdk.dart';
import 'package:video_editor_sdk/video_editor_sdk.dart';

class VideoAnnotationExample extends CodeExample {
  @override
  void invoke() async {
    // Add a video from the assets directory.
    final video = Video("assets/Skater.mp4");

    // For this example only stickers suitable for annotations are enabled.
    // Therefore, create a custom [StickerCategory] to assign the options.
    final stickerCategory = StickerCategory(
        "annotation_stickers", "Annotation", "assets/sticker_thumbnail.png",
        items: [
          Sticker.existing("imgly_sticker_shapes_arrow_02"),
          Sticker.existing("imgly_sticker_shapes_arrow_03"),
          Sticker.existing("imgly_sticker_shapes_badge_11"),
          Sticker.existing("imgly_sticker_shapes_badge_12"),
          Sticker.existing("imgly_sticker_shapes_badge_36")
        ]);

    // Load the custom sticker category into the [StickerOptions].
    final stickerOptions = StickerOptions(categories: [stickerCategory]);

    // Create a [Configuration] instance.
    final configuration = Configuration(
        tools: [Tool.sticker, Tool.text, Tool.brush],
        sticker: stickerOptions);

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

      if (result != null) {
        // The user exported a new video successfully and the newly generated video is located at `result.video`.
        print(result.video);
      } else {
        // The user tapped on the cancel button within the editor.
        return;
      }
    } catch (error) {
      // There was an error generating the video.
      print(error);
    }
  }
}

Annotations

Configuring menu items#

Stickers#

Open editor#