Annotation: Web SDK – Video API

The Annotation feature allows you to annotate on a Remote Stream. To support Annotations, you need to enable Canvas Streaming during Room Creation by setting: { canvas: true; }} in the JSON payload. To implement Annotation, you need to add Annotation Toolbar before you can start Annotations.

Table of Contents

• Annotation Toolbar
• Start Annotation
• Stop Annotation

Annotation Toolbar

The Annotation Toolbar appears with a default set of tools and properties. The EnxRoom.annotateToolAction() method allows you to configure the Annotation Toolbar.

Class: EnxRoom

Method: EnxRoom.annotateToolAction(action, value)

Parameters:

• action: String. Tool property name. Following tools are used as action:
  • draw : Boolean.
  • drawType : String e.g. Pencil.
  • Color : String. HEX Color Code e.g. #ff0000
  • LineWidth : Numeric. Default: 3
• value: value of the Tool as explained above.

function annotateToolAction("Color", "#ff0000") {
}

Start Annotation

The EnxRoom.startAnnotation() method is used to start Annotation on a given Stream object.

Class: EnxRoom

Methods: EnxRoomstartAnnotation(EnxStream, Callback) 

Parameter: 

EnxStream – Stream Object that needs to be annotated.

Event Listeners:

• canvas-started – Notification to everyone in the Room when canvas streaming starts. The event message contains "canvasType == "Annotation” to identify it as Annotation.

const stream = roomObject.remoteStreams.get(streamId);
roomObject.startAnnotation(stream, function (arg) {
	console.log(arg, "arg");
});

//All are notified that Annotation started
roomObject.addEventListener("canvas-started ", function(evt) {
	/* evt.canvasType === "Annotation" */ 
}); 

Stop Annotation

The EnxRoom.stopAnnotation() method is used to stop Annotations.

Methods:EnxRoom.stopAnnotation(Callback) 

Event Listeners:

• canvas-stopped – Notification to everyone in the Room when canvas streaming stops. The event message contains "canvasType == "Annotation” to identify it as Annotation.

roomObject.stopAnnotation(function (arg) {
});

//All are notified that Annotation stopped
roomObject.addEventListener("canvas-stopped ", function(evt) {
	/* evt.canvasType === "Annotation" */ 
}); 

---