Annotation

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

Set up annotation

  1. Check if the annotation feature is supported.

    // To check if annotation feature is supported
    ZoomVideoSDK.shareInstance()?.getShareHelper()?.isAnnotationFeatureSupport()
    // If you are the share owner, you can check if your viewer has annotation rights.
    ZoomVideoSDK.shareInstance()?.getShareHelper()?.isViewerAnnotationDisabled()
    // If you are the share owner, you can enable or disable your viewer from annotation rights.
    ZoomVideoSDK.shareInstance()?.getShareHelper()?.disableViewerAnnotation(true/false)
    
    // To check if annotation feature is supported
    [[[ZoomVideoSDK shareInstance] getShareHelper] isAnnotationFeatureSupport];
    // If you are the share owner, you can check if your viewer has annotation rights.
    [[[ZoomVideoSDK shareInstance] getShareHelper] isViewerAnnotationDisabled];
    // If you are the share owner, you can enable or disable your viewer from annotation rights.
    [[[ZoomVideoSDK shareInstance] getShareHelper] disableViewerAnnotation:YES]; // or NO
    

    If it is supported, continue.

  2. Set up screen sharing.

  3. Add zm_annoter_dynamic.xcframework into your main project with "Embed & Sign". See integrate feature framework bundles for details.

Now you can use annotation in your implementation.

Start and stop annotation

In order to start annotation, the viewer must first have already subscribed to a shared view and input the same view to create a new ZoomVideoSDKAnnotationHelper from the share helper.

// Same as before, get the user's share canvas that you want to subscribe to
let userShareCanvas: ZoomVideoSDKVideoCanvas
// Render the user's share stream into your view of choice. (This view is required for annotation)
usersShareCanvas.subscribe(with: view, aspectMode: .panAndScan, andResolution: ._Auto)
// Create annotation helper using the same view above and check for permission again
if let annotationHelper = ZoomVideoSDK.shareInstance()?.getShareHelper()?.createAnnotationHelper(cell.speakerView), annotationHelper.canDoAnnotation() {
    annotationHelper.startAnnotation()
    // To stop annotation later
    annotationHelper.stopAnnotation()
}
// Same as before, get the user's share canvas that you want to subscribe to
ZoomVideoSDKVideoCanvas *userShareCanvas;
// Render the user's share stream into your view of choice. (This view is required for annotation)
[userShareCanvas subscribeWithView:view aspectMode:ZoomVideoSDKVideoAspect_PanAndScan andResolution:ZoomVideoSDKVideoResolution_Auto];
// Create annotation helper using the same view above and check for permission again
ZoomVideoSDKAnnotationHelper *annotationHelper = [[[ZoomVideoSDK shareInstance] getShareHelper] createAnnotationHelper:cell.speakerView];
if (annotationHelper && [annotationHelper canDoAnnotation]) {
    [annotationHelper startAnnotation];
    // To stop annotation later
    [annotationHelper stopAnnotation];
}

Annotation tools

There are a list of annotation tools available. The full list of tools is located under ZoomVideoSDKAnnotationToolType.

// Enum of ZoomVideoSDKAnnotationToolType
ZoomVideoSDKAnnotationToolType_None,
ZoomVideoSDKAnnotationToolType_Pen,
ZoomVideoSDKAnnotationToolType_HighLighter,
ZoomVideoSDKAnnotationToolType_AutoLine,
ZoomVideoSDKAnnotationToolType_AutoRectangle,
ZoomVideoSDKAnnotationToolType_AutoEllipse,
ZoomVideoSDKAnnotationToolType_AutoArrow,
ZoomVideoSDKAnnotationToolType_AutoRectangleFill,
ZoomVideoSDKAnnotationToolType_AutoEllipseFill,
ZoomVideoSDKAnnotationToolType_SpotLight,
ZoomVideoSDKAnnotationToolType_Arrow,
ZoomVideoSDKAnnotationToolType_ERASER,
ZoomVideoSDKAnnotationToolType_Picker,
ZoomVideoSDKAnnotationToolType_AutoRectangleSemiFill,
ZoomVideoSDKAnnotationToolType_AutoEllipseSemiFill,
ZoomVideoSDKAnnotationToolType_AutoDoubleArrow,
ZoomVideoSDKAnnotationToolType_AutoDiamond,
ZoomVideoSDKAnnotationToolType_AutoStampArrow,
ZoomVideoSDKAnnotationToolType_AutoStampCheck,
ZoomVideoSDKAnnotationToolType_AutoStampX,
ZoomVideoSDKAnnotationToolType_AutoStampStar,
ZoomVideoSDKAnnotationToolType_AutoStampHeart,
ZoomVideoSDKAnnotationToolType_AutoStampQm

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

// Get/set tool type
annotationHelper.getToolType()
annotationHelper.setToolType(.pen)
// Get/set tool's color - UIColor
annotationHelper.getToolColor()
annotationHelper.setToolColor(.red)
// Get/set tool's width - UInt
annotationHelper.getToolWidth()
annotationHelper.setToolWidth(5)
// Get/set tool type
[annotationHelper getToolType];
[annotationHelper setToolType:ZoomVideoSDKAnnotationToolType_Pen];
// Get/set tool's color - UIColor
[annotationHelper getToolColor];
[annotationHelper setToolColor:[UIColor redColor]];
// Get/set tool's width - NSUInteger
[annotationHelper getToolWidth];
[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.

annotationHelper.undo()
annotationHelper.redo()
annotationHelper.clear(.all) // .all, .my, .others
[annotationHelper undo];
[annotationHelper redo];
[annotationHelper clear:ZoomVideoSDKAnnotationClearType_All]; // _All, _My, _Others

Destroy annotation

Once annotation is no longer valid or required, you can destroy it by calling the destroyAnnotationHelper method in the ZoomVideoSDKShareHelper class.

ZoomVideoSDK.shareInstance()?.getShareHelper()?.destroyAnnotationHelper(annotationHelper)
[[[ZoomVideoSDK shareInstance] getShareHelper] destroyAnnotationHelper:annotationHelper];