Quick start
The OpenTok Accelerator Annotation provides functionality you can add to your OpenTok applications that enables users to have the ability to annotate on a local or remote screen. This section shows you how to prepare and use the OpenTok Annotations Accelerator Pack as part of an application.
Install
$ npm install --save opentok-annotation
If using browserify or webpack:
const annotation = ;
Otherwise, include the accelerator pack in your html:
. . . and it will be available in global scope as AnnotationAccPack
Click here for a list of all OpenTok accelerator packs.
Explore the code
The following options
fields are used in the AnnotationAccPack
constructor:
Feature | Field | Required |
---|---|---|
Set the OpenTok session (object). | session |
true |
Set the Common layer API (object) - Automatically set if using Core. | accPack |
false |
Set the callback to receive the image data on screen capture (function). | onScreenCapture |
false |
To initialize the accelerator pack:
var annotation = options;
Once initialized, the following methods are available:
start
Creates an external window (if required) and links the annotation toolbar to the session. An external window is ONLY required if sharing the current browser window.
@param Object session@param Object options@param Boolean optionsscreensharing - Using an external window@param Array optionsitems - Custom set of tools@param Array optionscolors - Custom color palette@returns Promise < Resolve: undefined | Object Reference to external annotation window >
linkCanvas
Create and link a canvas to the toolbar and session. See notes about resizing the canvas below
@param Object pubSub - Either the or @param Object container - The parent container for the canvas element@param Object options@param Object optionsexternalWindow - Reference to the an external annotation window publisher only@param Object optionsabsoluteParent - Reference element for resize if other than container
resizeCanvas
Trigger a manual resize of the canvas.
addSubscriberToExternalWindow
Add a subscriber's video to the external annotation window.
@param Object stream - The subscriber stream object
end
End annotation, clean up the toolbar and canvas(es)
The AnnotationAccPack
triggers the following events via the common layer:
Event | Description |
---|---|
startAnnotation |
Annotation linked to session and toolbar created. |
linkAnnotation |
Annotation canvas has been linked to the toolbar. |
resizeCanvas |
The annotation canvas has been resized. |
annotationWindowClosed (screen sharing only) |
The external annotation window has been closed. |
endAnnotation |
Annotation has ended. Toolbar and canvases have been cleaned up. |
If using the common layer, you can subscribe to these events by calling registerEventListener
on _accPack
and providing a callback function:
accPack;
If using the Accelerator Core you can subscribe to these events by calling on
on otCore
and providing a callback function:
otCore
Best Practices for Resizing the Canvas
The linkCanvas
method refers to a parent DOM element called the absoluteParent
. When resizing the canvas, the annotation accelerator pack also resizes the canvas container element using inline properties. Because of this, we need another element to reference for dimensions. For this, we use the absoluteParent
.