dyte-plugin-sdk 🚀

An SDK for creating client/server side plugins to integrate with the video calling platform dyte.in

Table of Contents

• dyte-plugin-sdk 🚀
  • Table of Contents
  • Plugins made using the dyte plugin sdk
• Usage
  • Quickstart
  • Installation
  • Tutorial
  • Plugin Events
  • Store persistant room data

Plugins made using the dyte plugin sdk

• Witeboard Plugin
• Google Drive (Docs/Spreadsheets/Slides) Plugin
• Trello Plugin
• Figma Plugin

Check them out live in a meeting on https://app.dyte.in !

Usage

Quickstart

If you're building a react app, a template app is available here: https://github.com/dyte-in/dyte-plugin-react-template

If you're building a vanilla JS library using our CDN refer to the template here: https://github.com/dyte-in/dyte-plugin-js-template

Refer to https://sdk.dyte.in for the complete API reference.

Installation

For both server side and client side plugins, install the sdk from npm:

npm install dyte-plugin-sdk

The package has typings for typescript included and does not need any external @types package. Alternatively for non nodejs projects, the sdk can also be included from the following CDN link using a <script> tag:

<script src="https://cdn.dyte.in/lib/dyte-plugin-sdk/dyte-plugin-sdk.vanilla.js"></script>

Tutorial

We recommend checking out the templates in the quickstart section for more detailed step by step instructions: But a basic overview can also be found below:

All plugins need to be initialized using the pluginId generated for the plugin on the Dyte Developer Panel (Coming Soon):

import { DytePlugin, Events } from 'dyte-plugin-sdk';

...

const plugin = new DytePlugin('<pluginId>');

Plugin Events

Plugins can trigger and listen for events on the room. The plugin SDK will ensure all instances of the plugin running for every peer in the call are notified of these events.

To trigger an event:

plugin.triggerEvent({a: 'value', b: 2});

Any data can be passed to triggerEvent as long as it serializable using JSON.stringify

To listen for plugin events:

plugin.connection.on(Events.pluginEvent, (data) => console.log(data));
// prints {a: 'value', b: 2}

Store persistant room data

We can also use "stores" to store data about a plugin that can be set and retrieved by all other users in the room using the same plugin sdk

// Stores are like "databases" to store your plugin data. You can create
// multiple plugin stores, and each store can store key value pairs which
// is shared across all the instances of the plugin in a meeting.
const store = plugin.store("TST");

// View the whole store
console.log(store.getAll());

// Get a single key from the store
console.log(store.get("hello"));

// set keys on a store
store.set("hello", "test123")
store.set("another", "value");

// Subscribe for changes on a key in the store (the above set will also trigger a subscribe change here)
store.subscribe("hello", (data) => {
    // data has the whole store
    console.log(data);
});

// You can make multiple stores to seperate different kinds of data!
const anotherStore = plugin.store("Hello");
anotherStore.set("anotherKey", "anotherValue");
anotherStore.subscribe("anotherKey", (data) => {
    console.log(data);
});