Skip to main content
Contact SalesFree Trial
Contact SalesFree Trial
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 '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);
    }
  }
}