Basics

Dyte Plugins allow you to build collaborative and immersive experiences in your meetings without ever having to leave the meeting. The guides listed here will help you enable or disable plugins during meetings, configure existing plugins and even create new plugins with the help of Meeting APIs and built-in realtime database.

Usage

Methods / Properties

Core

Here is an introduction on the basics of plugins in your meetings:

Javascript

List all plugins

const plugins = meeting.plugins.all.toArray();

Each plugin object in the array is of type DytePlugin

Activate plugin

The activate() method activates a plugin for all users in the meeting. When you activate a plugin, it moves into the active plugins map and can be accessed from meeting.plugins.active.

The snippet below finds a plugin by name and activates it

const plugins = meeting.plugins.all.toArray();
const whiteboard = plugins.find((p) => p.name == 'Whiteboard');

await whiteboard.activate();

Deactivate plugin

whiteboard.deactivate()

React

List all plugins

const plugins = meeting.plugins.all.toArray();

Each plugin object in the array is of type DytePlugin

Activate plugin

The activate() method activates a plugin for all users in the meeting. When you activate a plugin, it moves into the active plugins map and can be accessed from meeting.plugins.active.

The snippet below finds a plugin by name and activates it

const plugins = meeting.plugins.all.toArray();
const whiteboard = plugins.find((p) => p.name == 'Whiteboard');

await whiteboard.activate();

Deactivate plugin

whiteboard.deactivate()

Flutter

List all plugins

List<DytePlugin> plugins = await dyteClient.plugins.all;

Each plugin object in the array is of type DytePlugin

Activate plugin

The activate() method activates a plugin for all users in the meeting. When you activate a plugin, it moves into the active plugins map and can be accessed from meeting.plugins.active.

The snippet below finds a plugin by name and activates it

List<DytePlugin> plugins = await dyteClient.plugins.all;
DytePlugin whiteboard = plugins.firstWhere((p) => p.name == 'Whiteboard');

await whiteboard.activate();

Deactivate plugin

whiteboard.deactivate()

React Native

List all plugins

const plugins = meeting.plugins.all.toArray();

Each plugin object in the array is of type DytePlugin

Activate plugin

The activate() method activates a plugin for all users in the meeting. When you activate a plugin, it moves into the active plugins map and can be accessed from meeting.plugins.active.

The snippet below finds a plugin by name and activates it

const plugins = meeting.plugins.all.toArray();
const whiteboard = plugins.find((p) => p.name == 'Whiteboard');

await whiteboard.activate();

Deactivate plugin

whiteboard.deactivate()

Android

List all plugins

val plugins = meeting.plugins.all

Each plugin object in the array is of type DytePlugin

Activate plugin

The activate() method activates a plugin for all users in the meeting. When you activate a plugin, it moves into the active plugins array and can be accessed from meeting.plugins.active.

The snippet below finds a plugin by name and activates it

val plugins = meeting.plugins.all
val whiteboard = plugins.find { p -> p.name == "Whiteboard" }

whiteboard.activate();

Deactivate plugin

whiteboard.deactivate()

iOS

List all plugins

let plugins = meeting.plugins.all

Each plugin object in the array is of type DytePlugin

Activate plugin

The activate() method activates a plugin for all users in the meeting. When you activate a plugin, it moves into the active plugins array and can be accessed from meeting.plugins.active.

The snippet below finds a plugin by name and activates it

let plugins = meeting.plugins.all
let whiteboard = plugins.first { $0.name == "Whiteboard" }

whiteboard.activate();

Deactivate plugin

whiteboard.deactivate()

Events

Core

Javascript

Each plugin object emits an enabled event and a closed event

const whiteboard = plugins.find((p) => p.name == 'Whiteboard');
whiteboard.on('enabled', () => {
  console.log('Whiteboard has been enabled');
});
whiteboard.on('closed', () => {
  console.log('Whiteboard has been disabled');
});

React

Each plugin object emits an enabled event and a closed event

const whiteboard = plugins.find((p) => p.name == 'Whiteboard');
whiteboard.on('enabled', () => {
  console.log('Whiteboard has been enabled');
});
whiteboard.on('closed', () => {
  console.log('Whiteboard has been disabled');
});

Flutter

class PluginNotifier extends DytePluginEventsListener {
  @override
  void onPluginActivated(DytePlugin plugin) {
    state = OnPluginActivated(plugin);
  }

  @override
  void onPluginDeactivated(DytePlugin plugin) {
    state = OnPluginDeactivated(plugin);
  }
}

meeting.addPluginEventsListener(PluginNotifier())

React Native

Each plugin object emits an enabled event and a closed event

const whiteboard = plugins.find((p) => p.name == 'Whiteboard');
whiteboard.on('enabled', () => {
  console.log('Whiteboard has been enabled');
});
whiteboard.on('closed', () => {
  console.log('Whiteboard has been disabled');
});

Android

Any plugin activation / deactivation will trigger a callback. To be able to listen to plugin events you need to implement a methods from callback DytePluginEventsListener. You can subscribe to this events by calling meeting.addPluginEventsListener(dytePluginEventsListener).

meeting.addMeetingRoomEventsListener(object :
  DyteMeetingRoomEventsListener {
    override fun onPluginActivated(plugin: DytePlugin) {
      super.onPluginActivated(plugin)
      // your code to handle plugin activation
    }

    override fun onPluginDeactivated(plugin: DytePlugin) {
      super.onPluginDeactivated(plugin)
      // your code to handle plugin de-activation
    }
  }
)

iOS

Any plugin activation / deactivation will trigger a callback. To be able to listen to plugin events you need to implement a methods from callback DytePluginEventsListener. You can subscribe to this events by calling meeting.addPluginEventsListener(dytePluginEventsListener).

extension MeetingViewModel: DytePluginEventsListener {

  func onPluginActivated(plugin: DytePlugin) {
    // your code to handle plugin activation
  }

  func onPluginDeactivated(plugin: DytePlugin) {
    // your code to handle plugin activation
  }

}