-
Notifications
You must be signed in to change notification settings - Fork 156
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add participants and plugins core docs
- Loading branch information
Showing
9 changed files
with
357 additions
and
584 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,192 +1,231 @@ | ||
--- | ||
title: Events | ||
description: Event handling for participants. | ||
title: Participant Events | ||
description: >- | ||
Dive into the details of handling participant events in your Android | ||
application using Dyte's comprehensive documentation. | ||
sidebar_position: 3 | ||
tags: | ||
- web-core | ||
- mobile-core | ||
- participants | ||
- self | ||
--- | ||
|
||
You can subscribe to events for all participants using | ||
`meeting.participants.on()` method. Here are the supported events: | ||
# All Participant Events | ||
|
||
### View mode change | ||
You can subscribe to events for all participants by implementing | ||
`DyteParticipantEventsListener` callback and then passing that object to | ||
`meeting.addParticipantEventsListener(dyteParticipantEventsListener)` method. | ||
|
||
Triggered when the View mode changes | ||
Here are the supported methods: | ||
|
||
```ts | ||
meeting.participants.on( | ||
'viewModeChanged', | ||
({ viewMode, currentPage, pageCount }) => { | ||
console.log('view mode changed', viewMode); | ||
} | ||
); | ||
## Participant joined | ||
|
||
Triggers an event when any participant joins the meeting. | ||
|
||
```kotlin | ||
private val participantEventsListener = object : DyteParticipantEventsListener { | ||
override fun onParticipantJoin(participant: DyteMeetingParticipant) { | ||
// your code here to handle new participant | ||
} | ||
} | ||
``` | ||
|
||
### Page change | ||
## Participant left | ||
|
||
```ts | ||
meeting.participants.on( | ||
'pageChanged', | ||
({ viewMode, currentPage, pageCount }) => { | ||
console.log('page changed', currentPage); | ||
} | ||
); | ||
Triggers an event when any participant leaves the meeting. | ||
|
||
```kotlin | ||
private val participantEventsListener = object : DyteParticipantEventsListener { | ||
override fun onParticipantLeave(participant: DyteMeetingParticipant) { | ||
// your code here to handle participant left from meeting | ||
} | ||
} | ||
``` | ||
|
||
### Active speaker | ||
## Participant update | ||
|
||
This event is triggered when a participant becomes `active` when they starts to | ||
speak. | ||
Triggers an event whenever there is any change in participant. | ||
|
||
```ts | ||
meeting.participants.on('activeSpeaker', (participant) => { | ||
console.log(`${participant.id} is currently speaking`); | ||
}); | ||
```kotlin | ||
private val participantEventsListener = object : DyteParticipantEventsListener { | ||
override fun onUpdate(participants: DyteParticipants) { | ||
// your code here to handle participant update | ||
} | ||
} | ||
``` | ||
|
||
## Events on all participants | ||
## Video update | ||
|
||
Instead of subscribing to individual participant events, you can subscribe to a | ||
participant map, such as `joined` & `active` and get updated when any of the | ||
participant emits an event. | ||
Trigger an event when any participant starts / stops video. | ||
|
||
If you want to subscribe to participants when they become `active`, you can do | ||
so by subscribing to `meetings.participants.active.on('participantJoined')` | ||
```kotlin | ||
private val participantEventsListener = object : DyteParticipantEventsListener { | ||
override fun onVideoUpdate(videoEnabled: Boolean, participant: DyteMeetingParticipant) { | ||
// your code here to handle participant video toggle update | ||
} | ||
} | ||
``` | ||
|
||
### Participant joined | ||
## Audio update | ||
|
||
Trigger an event when any participant joins the meeting. | ||
Trigger an event when any participant starts / stops audio. | ||
|
||
```ts | ||
meeting.participants.joined.on('participantJoined', (participant) => { | ||
console.log(`A participant with id "${participant.id}" has joined`); | ||
}); | ||
```kotlin | ||
private val participantEventsListener = object : DyteParticipantEventsListener { | ||
override fun onAudioUpdate(audioEnabled: Boolean, participant: DyteMeetingParticipant) { | ||
// your code here to handle participant audio toggle update | ||
} | ||
} | ||
``` | ||
|
||
### Participant left | ||
## Screenshare updates | ||
|
||
Triggers an event when there is any change in screenshares in a meeting. | ||
|
||
```kotlin | ||
private val participantEventsListener = object : DyteParticipantEventsListener { | ||
override fun onScreenSharesUpdated() { | ||
// your code here to handle screenshares from meeting | ||
// you can use `meeting.participants.screenshares` to get latest screenshare participants | ||
} | ||
|
||
Trigger an event when any participant leaves the meeting. | ||
override fun onScreenShareStarted(participant: DyteJoinedMeetingParticipant) { | ||
// participant stared presenting screen in the meeting | ||
} | ||
|
||
```ts | ||
meeting.participants.joined.on('participantLeft', (participant) => { | ||
console.log(`A participant with id "${participant.id}" has left the meeting`); | ||
}); | ||
override fun onScreenShareEnded(participant: DyteJoinedMeetingParticipant) { | ||
// participant stopped presenting screen in the meeting | ||
} | ||
} | ||
``` | ||
|
||
### Participant pinned | ||
## Active speaker | ||
|
||
Trigger an event when any is change in active speaker in the meeting. | ||
|
||
Trigger an event when a participant is pinned. | ||
```kotlin | ||
private val participantEventsListener = object : DyteParticipantEventsListener { | ||
override fun onActiveSpeakerChanged(participant: DyteMeetingParticipant) { | ||
// your code here to handle active speaker | ||
} | ||
|
||
```ts | ||
meeting.participants.joined.on('pinned', (participant) => { | ||
console.log(`Participant with id "${participant.id}" was pinned`); | ||
}); | ||
override fun onNoActiveSpeaker() { | ||
// your code here to handle no active speaker | ||
} | ||
} | ||
``` | ||
|
||
### Participant unpinned | ||
## Pinned participant | ||
|
||
Trigger an event when any is change in pinned participant in the meeting. | ||
|
||
Trigger an event when a participant is unpinned. | ||
```kotlin | ||
private val participantEventsListener = object : DyteParticipantEventsListener { | ||
override fun onParticipantPinned(participant: DyteMeetingParticipant) { | ||
// your code here to show pinned participant | ||
} | ||
|
||
```ts | ||
meeting.participants.joined.on('unpinned', (participant) => { | ||
console.log(`Participant with id "${participant.id}" was unpinned`); | ||
}); | ||
override fun onParticipantUnpinned() { | ||
// your code here to remove pinned participant | ||
} | ||
} | ||
``` | ||
|
||
### Video update | ||
## Active participants list change | ||
|
||
Trigger an event when any participant starts / stops video. | ||
Triggers an event when any is change in active participants list in the meeting. | ||
|
||
```ts | ||
meeting.participants.joined.on('videoUpdate', (participant) => { | ||
console.log( | ||
`A participant with id "${participant.id}" updated their video track in the meeting` | ||
); | ||
// Use the video track if it exists | ||
if (participant.videoEnabled) { | ||
// participant.videoTrack | ||
} else { | ||
// handle stop video | ||
} | ||
}); | ||
```kotlin | ||
private val participantEventsListener = object : DyteParticipantEventsListener { | ||
override fun onActiveParticipantsChanged(active: List<DyteMeetingParticipant>) { | ||
// your code here to refresh active participants | ||
} | ||
} | ||
``` | ||
|
||
### Audio update | ||
## All participants list change | ||
|
||
Trigger an event when any participant starts / stops audio. | ||
Triggers an event when any is change in all participants list in the meeting. | ||
|
||
```ts | ||
meeting.participants.joined.on('audioUpdate', (participant) => { | ||
console.log( | ||
`A participant with id "${participant.id}" updated their audio track in the meeting` | ||
); | ||
// Use the audio track if it exists | ||
if (participant.audioEnabled) { | ||
// participant.audioTrack | ||
} else { | ||
// handle stop audio | ||
} | ||
}); | ||
```kotlin | ||
private val participantEventsListener = object : DyteParticipantEventsListener { | ||
override fun onAllParticipantsChanged(all: List<DyteMeetingParticipant>) { | ||
// your code here to refresh all participants | ||
} | ||
} | ||
``` | ||
|
||
### Screen share update | ||
|
||
Trigger an event when any participant starts / stops screen share. | ||
|
||
```ts | ||
meeting.participants.joined.on('screenShareUpdate', (participant) => { | ||
console.log( | ||
`A participant with id "${participant.id}" updated their screen share in the meeting` | ||
); | ||
// Use the screen share track if it exists | ||
if (participant.screenShareEnabled) { | ||
// participant.screenShareTrack | ||
} else { | ||
// handle stop screen share | ||
} | ||
}); | ||
# Single Participant Events | ||
|
||
You can also subscribe to events for a single participant by implementing `DyteParticipantUpdateListener` callback and then passing that object to `participant.addParticipantUpdateListener(dyteParticipantUpdateListener)` method. | ||
|
||
Here are the supported methods: | ||
|
||
## Participant update | ||
|
||
Triggers an event whenever there is any change in participant. | ||
|
||
```kotlin | ||
private val participantUpdateListener = object : DyteParticipantUpdateListener { | ||
override fun onUpdate() { | ||
// your code here to handle participant update | ||
} | ||
} | ||
``` | ||
|
||
## Network quality score | ||
|
||
Subscribe to the `mediaScoreUpdate` event to monitor network | ||
|
||
```ts | ||
meeting.participants.joined.on( | ||
'mediaScoreUpdate', | ||
({ participantId, kind, isScreenshare, score }) => { | ||
if (kind === 'video') { | ||
console.log( | ||
`Participant ${participantId}'s ${ | ||
isScreenshare ? 'screenshare' : 'video' | ||
} quality score is `, | ||
score | ||
); | ||
## Video update | ||
|
||
Trigger an event when the participant starts / stops video. | ||
|
||
```kotlin | ||
private val participantUpdateListener = object : DyteParticipantUpdateListener { | ||
override fun onVideoUpdate(isEnabled: Boolean) { | ||
// your code here to handle participant video toggle update | ||
} | ||
} | ||
``` | ||
|
||
## Audio update | ||
|
||
Trigger an event when the participant starts / stops audio. | ||
|
||
if (kind === 'audio') { | ||
console.log( | ||
`Participant ${participantId}'s audio quality score is `, | ||
score | ||
); | ||
```kotlin | ||
private val participantUpdateListener = object : DyteParticipantUpdateListener { | ||
override fun onAudioUpdate(isEnabled: Boolean) { | ||
// your code here to handle participant audio toggle update | ||
} | ||
} | ||
``` | ||
|
||
## Pinned & Unpinned participant | ||
|
||
if (score < 5) { | ||
console.log(`Participant ${participantId}'s media quality is poor`); | ||
Trigger an event when the participant is pinned / unpinned. | ||
|
||
```kotlin | ||
private val participantUpdateListener = object : DyteParticipantUpdateListener { | ||
override fun onPinned() { | ||
// your code here to show pinned participant | ||
} | ||
|
||
override fun onUnpinned() { | ||
// your code here to remove pinned participant | ||
} | ||
} | ||
} | ||
); | ||
``` | ||
|
||
## Events for specific participant | ||
## Screen share started & ended | ||
|
||
Trigger an event when the participant starts / stops screen sharing. | ||
|
||
If you want to subscribe to above events but for a specific participant only, | ||
you can do so by binding event to `meeting.participants.joined.get(peerId).on()` | ||
method. where the `peerId` is the id of the participant that you want to watch. | ||
```kotlin | ||
private val participantUpdateListener = object : DyteParticipantUpdateListener { | ||
override fun onScreenShareStarted() { | ||
// your code here to handle screen share started | ||
} | ||
|
||
override fun onScreenShareEnded() { | ||
// your code here to handle screen share ended | ||
} | ||
} | ||
``` | ||
|
||
<head> | ||
<title>Web Core Participant Events</title> | ||
</head> |
Oops, something went wrong.