Annotation

Use annotation to draw over shared content. Both the user who is sharing and viewers can annotate during screen sharing.

You must set up screen sharing before you can use annotation.

Check whether the SDK supports annotation

Before you use annotation, confirm that the SDK supports the annotation feature.

// To check if annotation feature is supported
bool isSupported = await zoom.shareHelper.isAnnotationFeatureSupport();
// If you are the share owner, you can check if your viewer has annotation rights.
bool isDisabled = await zoom.annotationHelper.canDoAnnotation();
// If you are the share owner, you can enable or disable your viewer from annotation rights.
await zoom.shareHelper.disableViewerAnnotation(true); //disable
await zoom.shareHelper.disableViewerAnnotation(false); // enable
  // Callback to listen to the annotation privilege change
  var eventListener = ZoomVideoSdkEventListener();
  eventListener.addListener(EventType.onAnnotationPrivilegeChange, (data) async {
      data = data as Map;
      ZoomVideoSdkShareAction shareAction =
          ZoomVideoSdkShareAction.fromJson(jsonDecode(data['shareAction']));
      ZoomVideoSdkUser shareOwner =
          ZoomVideoSdkUser.fromJson(jsonDecode(data['shareOwner'].toString()));
      bool isEnabled = shareAction.isAnnotationPrivilegeEnabled;
  });

If the SDK supports it, continue. Be sure to set up screen sharing first.

Start and stop annotation

Annotation draws over the shared content, so your app must already render the shared stream before starting annotation. Use the plugin's View widget (or your own subclass of ZoomView) and pass sharing: true in its creation params so it renders the share stream instead of the video stream. For details, see Video and Screen sharing. The example app includes a complete VideoView wrapper at example/lib/components/video_view.dart.

After you render the shared view, get the annotation helper from the SDK instance with zoom.annotationHelper. Confirm that you have annotation privileges before you start.

// Get the annotation helper from the SDK instance.
var annotationHelper = zoom.annotationHelper;
// Check for permission before starting.
bool canAnnotate = await annotationHelper.canDoAnnotation();
// You can also check whether the person sharing has disabled annotation.
bool isSenderDisabled = await annotationHelper.isSenderDisableAnnotation();
if (canAnnotate && !isSenderDisabled) {
  // Start annotation.
  await annotationHelper.startAnnotation();
  // Stop annotation later.
  await annotationHelper.stopAnnotation();
}

Annotation tools

The SDK provides a list of annotation tools. AnnotationToolType lists the full set of tools.

// Constants of AnnotationToolType
AnnotationToolType.None
AnnotationToolType.Pen
AnnotationToolType.HighLighter
AnnotationToolType.Eraser
AnnotationToolType.Picker // not supported for viewers
AnnotationToolType.SpotLight // not supported for viewers
AnnotationToolType.Arrow
AnnotationToolType.AutoLine
AnnotationToolType.AutoRectangle
AnnotationToolType.AutoRectangleFill
AnnotationToolType.AutoRectangleSemiFill
AnnotationToolType.AutoEllipse
AnnotationToolType.AutoEllipseFill
AnnotationToolType.AutoEllipseSemiFill
AnnotationToolType.AutoArrow
AnnotationToolType.AutoDoubleArrow
AnnotationToolType.AutoDiamond
AnnotationToolType.AutoStampArrow
AnnotationToolType.AutoStampCheck
AnnotationToolType.AutoStampX
AnnotationToolType.AutoStampStar
AnnotationToolType.AutoStampHeart
AnnotationToolType.AutoStampQm
AnnotationToolType.VanishingPen
AnnotationToolType.VanishingArrow
AnnotationToolType.VanishingDoubleArrow
AnnotationToolType.VanishingRectangle
AnnotationToolType.VanishingEllipse
AnnotationToolType.VanishingDiamond

Upon selecting the tool, the user can also get or set the current tool's color or width.

// Get/set tool type
String toolType = await annotationHelper.getToolType();
await annotationHelper.setToolType(AnnotationToolType.Pen);
// Get/set tool's color - hex string
String toolColor = await annotationHelper.getToolColor();
await annotationHelper.setToolColor("#FF0000");
// Get/set tool's width - num
num toolWidth = await annotationHelper.getToolWidth();
await annotationHelper.setToolWidth(5);

Other annotation methods

You can also undo or redo annotations. And you can clear all annotations, just your own, or just others' annotations.

await annotationHelper.undo();
await annotationHelper.redo();
await annotationHelper.clear(AnnotationClearType.All); // All, My, Others

For details, see the ZoomVideoSdkAnnotationHelper class reference.