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.

const zoom = useZoom();
// To check if annotation feature is supported
const isSupported = await zoom.shareHelper.isAnnotationFeatureSupport();
// If you are the share owner, you can check if your viewer has annotation rights.
const isDisabled = await zoom.shareHelper.isViewerAnnotationDisabled();
// 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 changes in annotation privilege
const annotationPrivilegeChange = zoom.addListener(
    EventType.onAnnotationPrivilegeChange,
    (params) => {
        const isEnabled = params.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 the viewer must already be rendering the shared stream before starting. Render the shared view with VideoView by setting sharing to true. For details, see Video and Screen sharing.

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.
const annotationHelper = zoom.annotationHelper;
// Check for permission before starting.
const canAnnotate = await annotationHelper.canDoAnnotation();
if (canAnnotate) {
    // 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.AutoLine;
AnnotationToolType.AutoRectangle;
AnnotationToolType.AutoEllipse;
AnnotationToolType.AutoEllipseFill;
AnnotationToolType.AutoRectangleFill;
AnnotationToolType.SpotLight; // not supported for viewers
AnnotationToolType.Arrow;
AnnotationToolType.ERASER;
AnnotationToolType.Picker; // not supported for viewers
AnnotationToolType.AutoArrow;
AnnotationToolType.AutoRectangleSemiFill;
AnnotationToolType.AutoEllipseSemiFill;
AnnotationToolType.AutoDoubleArrow;
AnnotationToolType.AutoDiamond;
AnnotationToolType.AutoStampArrow;
AnnotationToolType.AutoStampCheck;
AnnotationToolType.AutoStampX;
AnnotationToolType.AutoStampStar;
AnnotationToolType.AutoStampHeart;
AnnotationToolType.AutoStampQm;

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

// Get/set tool type
const toolType = await annotationHelper.getToolType();
await annotationHelper.setToolType(AnnotationToolType.Pen);
// Get/set tool's color - hex string
const toolColor = await annotationHelper.getToolColor();
await annotationHelper.setToolColor("#FF0000");
// Get/set tool's width - number
const 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.