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
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. #ff0000LineWidth
: 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" */ });