{"id":19845419,"url":"https://github.com/opentok/accelerator-annotation-js","last_synced_at":"2025-10-20T03:38:22.656Z","repository":{"id":56330254,"uuid":"81806165","full_name":"opentok/accelerator-annotation-js","owner":"opentok","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-31T09:08:22.000Z","size":201,"stargazers_count":2,"open_issues_count":5,"forks_count":8,"subscribers_count":26,"default_branch":"main","last_synced_at":"2025-06-09T02:47:10.346Z","etag":null,"topics":["annotations","opentok","tokbox","webrtc"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/opentok.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-13T09:14:48.000Z","updated_at":"2023-03-24T17:47:50.000Z","dependencies_parsed_at":"2022-08-15T16:50:16.312Z","dependency_job_id":null,"html_url":"https://github.com/opentok/accelerator-annotation-js","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/opentok/accelerator-annotation-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opentok%2Faccelerator-annotation-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opentok%2Faccelerator-annotation-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opentok%2Faccelerator-annotation-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opentok%2Faccelerator-annotation-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/opentok","download_url":"https://codeload.github.com/opentok/accelerator-annotation-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opentok%2Faccelerator-annotation-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265224164,"owners_count":23730348,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["annotations","opentok","tokbox","webrtc"],"created_at":"2024-11-12T13:07:42.802Z","updated_at":"2025-10-20T03:38:22.565Z","avatar_url":"https://github.com/opentok.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Accelerator Annotation for JavaScript\n\n[![Build Status](https://travis-ci.org/opentok/accelerator-annotation-js.svg?branch=main)](https://travis-ci.org/opentok/accelerator-annotation-js)\n[![GitHub release](https://img.shields.io/github/release/opentok/accelerator-annotation-js.svg)](./README.md)\n[![license MIT](https://img.shields.io/github/license/opentok/accelerator-annotation-js.svg)](./LICENSE)\n[![npm](https://img.shields.io/npm/v/opentok-annotation.svg)](https://www.npmjs.com/package/opentok-annotation)\n\n\u003cimg src=\"https://assets.tokbox.com/img/vonage/Vonage_VideoAPI_black.svg\" height=\"48px\" alt=\"Tokbox is now known as Vonage\" /\u003e\n\n\u003e Disclaimer: Please keep in mind that this is an OpenTok Labs project which means that it's not officially supported by Vonage.\n\n## Quick start\n\nThe 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.\nThis section shows you how to prepare and use the OpenTok Annotations Accelerator Pack as part of an application.\n\n## Install\n\n```bash\n$ npm install --save opentok-annotation\n```\n\nIf using browserify or webpack:\n\n```javascript\nconst annotation = require('opentok-annotation');\n```\n\n\nOtherwise, include the accelerator pack in your html:\n\n```html\n\u003cscript src=\"../your/path/to/opentok-annotation.js\"\u003e\u003c/script\u003e\n```\n\n... and it will be available in global scope as `AnnotationAccPack`\n\n---\n\nClick [here](https://www.npmjs.com/search?q=opentok-acc-pack) for a list of all OpenTok accelerator packs.\n\n## Explore the code\n\nThe following `options` fields are used in the `AnnotationAccPack` constructor:\n\n| Feature                                                                                                                | Field             | Required |\n| ---------------------------------------------------------------------------------------------------------------------- | ----------------- | -------- |\n| Set the OpenTok session  (object).                                                                                     | `session`         | `true`   |\n| Set the Common layer API (object) - Automatically set if using [Core](https://github.com/opentok/accelerator-core-js). | `accPack`         | `false`  |\n| Set the callback to receive the image data on screen capture (function).                                               | `onScreenCapture` | `false`  |\n\nTo initialize the accelerator pack:\n\n```javascript\nvar annotation = new annotationAccPack(options);\n```\n\nOnce initialized, the following methods are available:\n\n### `start`\n\n*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.*\n\n```javascript\n@param {Object} session\n@param {Object} [options]\n@param {Boolean} [options.screensharing] - Using an external window\n@param {Array} [options.items] - Custom set of tools\n@param {Array} [options.colors] - Custom color palette\n@returns {Promise} \u003c Resolve: undefined | {Object} Reference to external annotation window \u003e\n```\n\n### `linkCanvas`\n\n*Create and link a canvas to the toolbar and session.  See notes about [resizing the canvas](#resizing-canvas) below*\n\n```javascript\n@param {Object} pubSub - Either the publisher(sharing) or subscriber(viewing)\n@param {Object} container - The parent container for the canvas element\n@param {Object} options\n@param {Object} [options.externalWindow] - Reference to the an external annotation window (publisher only)\n@param {Object} [options.absoluteParent] - Reference element for resize if other than container\n```\n\n### `resizeCanvas`\n\n*Trigger a manual resize of the canvas.*\n\n### `addSubscriberToExternalWindow`\n\n*Add a subscriber's video to the external annotation window.*\n\n```javascript\n@param {Object} stream - The subscriber stream object\n```\n\n### `end`\n\n*End annotation, clean up the toolbar and canvas(es)*\n\nThe `AnnotationAccPack`  triggers the following events via the common layer:\n\n| Event                                          | Description                                                       |\n| ---------------------------------------------- | ----------------------------------------------------------------- |\n| `startAnnotation`                              | Annotation linked to session and toolbar created.                 |\n| `linkAnnotation `                              | Annotation canvas has been linked to the toolbar.                 |\n| `resizeCanvas`                                 | The annotation canvas has been resized.                           |\n| `annotationWindowClosed` (screen sharing only) | The external annotation window has been closed.                   |\n| `endAnnotation`                                | Annotation has ended.  Toolbar and canvases have been cleaned up. |\n\nIf using the common layer, you can subscribe to these events by calling `registerEventListener` on  `_accPack` and providing a callback function:\n\n```javascript\naccPack.registerEventListener('eventName', callback);\n```\n\nIf using the [Accelerator Core](https://github.com/opentok/accelerator-core-js) you can subscribe to these events by calling `on` on  `otCore` and providing a callback function:\n\n```javascript\notCore.on('eventName', callback)\n```\n\n### Best Practices for Resizing the Canvas\n\n\u003ca name=\"resizing-canvas\"\u003e\u003c/a\u003e\n\nThe `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`.\n\n### Multiparty video communication sample app using the Screen-sharing and Accelerator Annotation with best-practices for Javascript [here](https://github.com/opentok/accelerator-sample-apps-js)\n\n## Development and Contributing\n\nInterested in contributing? We :heart: pull requests! See the [Contribution](CONTRIBUTING.md) guidelines.\n\n## Getting Help\n\nWe love to hear from you so if you have questions, comments or find a bug in the project, let us know! You can either:\n\n- Open an issue on this repository\n- See \u003chttps://support.tokbox.com/\u003e for support options\n- Tweet at us! We're [@VonageDev](https://twitter.com/VonageDev) on Twitter\n- Or [join the Vonage Developer Community Slack](https://developer.nexmo.com/community/slack)\n\n## Further Reading\n\n- Check out the Developer Documentation at \u003chttps://tokbox.com/developer/\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopentok%2Faccelerator-annotation-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopentok%2Faccelerator-annotation-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopentok%2Faccelerator-annotation-js/lists"}