Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

opentok-annotation

Package Overview
Dependencies
Maintainers
2
Versions
101
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

opentok-annotation

OpenTok annotation accelerator pack

  • 2.0.59
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
712
decreased by-7.17%
Maintainers
2
Weekly downloads
 
Created
Source

logo

Accelerator Annotation for JavaScript

Build Status GitHub release license MIT npm

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 = require('opentok-annotation');

Otherwise, include the accelerator pack in your html:

<script src="../your/path/to/opentok-annotation.js"></script>

. . . 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:

FeatureFieldRequired
Set the OpenTok session (object).sessiontrue
Set the Common layer API (object) - Automatically set if using Core.accPackfalse
Set the callback to receive the image data on screen capture (function).onScreenCapturefalse

To initialize the accelerator pack:

var annotation = new annotationAccPack(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} [options.screensharing] - Using an external window
@param {Array} [options.items] - Custom set of tools
@param {Array} [options.colors] - 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 publisher(sharing) or subscriber(viewing)
@param {Object} container - The parent container for the canvas element
@param {Object} options
@param {Object} [options.externalWindow] - Reference to the an external annotation window (publisher only)
@param {Object} [options.absoluteParent] - 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:

EventDescription
startAnnotationAnnotation linked to session and toolbar created.
linkAnnotation Annotation canvas has been linked to the toolbar.
resizeCanvasThe annotation canvas has been resized.
annotationWindowClosed (screen sharing only)The external annotation window has been closed.
endAnnotationAnnotation 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.registerEventListener('eventName', callback);

If using the Accelerator Core you can subscribe to these events by calling on on otCore and providing a callback function:

otCore.on('eventName', callback)

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.

Multiparty video communication sample app using the Screensharing and Accelerator Annotation with best-practices for Javascript here.

Keywords

FAQs

Package last updated on 16 Nov 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc