-
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
10 changed files
with
310 additions
and
672 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,85 @@ | ||
| --- | ||
| 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 | ||
| - android-core | ||
| - participants | ||
| - self | ||
| --- | ||
|
|
||
| You can subscribe to events for all participants using | ||
| `meeting.participants.on()` method. Here are the supported events: | ||
| ## Participant Events | ||
|
|
||
| ### View mode change | ||
| You can also subscribe to events for a single participant by implementing `DyteParticipantUpdateListener` callback and then passing that object to `participant.addParticipantUpdateListener(dyteParticipantUpdateListener)` 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); | ||
| } | ||
| ); | ||
| ``` | ||
|
|
||
| ### Page change | ||
|
|
||
| ```ts | ||
| meeting.participants.on( | ||
| 'pageChanged', | ||
| ({ viewMode, currentPage, pageCount }) => { | ||
| console.log('page changed', currentPage); | ||
| } | ||
| ); | ||
| ``` | ||
|
|
||
| ### Active speaker | ||
|
|
||
| This event is triggered when a participant becomes `active` when they starts to | ||
| speak. | ||
|
|
||
| ```ts | ||
| meeting.participants.on('activeSpeaker', (participant) => { | ||
| console.log(`${participant.id} is currently speaking`); | ||
| }); | ||
| ``` | ||
|
|
||
| ## Events on all participants | ||
|
|
||
| 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. | ||
|
|
||
| If you want to subscribe to participants when they become `active`, you can do | ||
| so by subscribing to `meetings.participants.active.on('participantJoined')` | ||
|
|
||
| ### Participant joined | ||
|
|
||
| Trigger an event when any participant joins the meeting. | ||
|
|
||
| ```ts | ||
| meeting.participants.joined.on('participantJoined', (participant) => { | ||
| console.log(`A participant with id "${participant.id}" has joined`); | ||
| }); | ||
| ``` | ||
|
|
||
| ### Participant left | ||
| ### Participant update | ||
|
|
||
| Trigger an event when any participant leaves the meeting. | ||
| Triggers an event whenever there is any change in participant. | ||
|
|
||
| ```ts | ||
| meeting.participants.joined.on('participantLeft', (participant) => { | ||
| console.log(`A participant with id "${participant.id}" has left the meeting`); | ||
| }); | ||
| ```kotlin | ||
| private val participantUpdateListener = object : DyteParticipantUpdateListener { | ||
| override fun onUpdate() { | ||
| // your code here to handle participant update | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ### Participant pinned | ||
| ### Video update | ||
|
|
||
| Trigger an event when a participant is pinned. | ||
| Trigger an event when the participant starts / stops video. | ||
|
|
||
| ```ts | ||
| meeting.participants.joined.on('pinned', (participant) => { | ||
| console.log(`Participant with id "${participant.id}" was pinned`); | ||
| }); | ||
| ```kotlin | ||
| private val participantUpdateListener = object : DyteParticipantUpdateListener { | ||
| override fun onVideoUpdate(isEnabled: Boolean) { | ||
| // your code here to handle participant video toggle update | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ### Participant unpinned | ||
| ### Audio update | ||
|
|
||
| Trigger an event when a participant is unpinned. | ||
| Trigger an event when the participant starts / stops audio. | ||
|
|
||
| ```ts | ||
| meeting.participants.joined.on('unpinned', (participant) => { | ||
| console.log(`Participant with id "${participant.id}" was unpinned`); | ||
| }); | ||
| ```kotlin | ||
| private val participantUpdateListener = object : DyteParticipantUpdateListener { | ||
| override fun onAudioUpdate(isEnabled: Boolean) { | ||
| // your code here to handle participant audio toggle update | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ### Video update | ||
| ### Pinned & Unpinned participant | ||
|
|
||
| Trigger an event when any participant starts / stops video. | ||
|
|
||
| ```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 | ||
| } | ||
| }); | ||
| ``` | ||
| Trigger an event when the participant is pinned / unpinned. | ||
|
|
||
| ### Audio update | ||
| ```kotlin | ||
| private val participantUpdateListener = object : DyteParticipantUpdateListener { | ||
| override fun onPinned() { | ||
| // your code here to show pinned participant | ||
| } | ||
|
|
||
| Trigger an event when any participant starts / stops audio. | ||
|
|
||
| ```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 | ||
| } | ||
| }); | ||
| override fun onUnpinned() { | ||
| // your code here to remove pinned participant | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ### 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 | ||
| } | ||
| }); | ||
| ``` | ||
| ### Screen share started & ended | ||
|
|
||
| ## 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 | ||
| ); | ||
| } | ||
| Trigger an event when the participant starts / stops screen sharing. | ||
|
|
||
| if (kind === 'audio') { | ||
| console.log( | ||
| `Participant ${participantId}'s audio quality score is `, | ||
| score | ||
| ); | ||
| } | ||
| ```kotlin | ||
| private val participantUpdateListener = object : DyteParticipantUpdateListener { | ||
| override fun onScreenShareStarted() { | ||
| // your code here to handle screen share started | ||
| } | ||
|
|
||
| if (score < 5) { | ||
| console.log(`Participant ${participantId}'s media quality is poor`); | ||
| override fun onScreenShareEnded() { | ||
| // your code here to handle screen share ended | ||
| } | ||
| } | ||
| } | ||
| ); | ||
| ``` | ||
|
|
||
| ## Events for specific participant | ||
|
|
||
| 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. | ||
|
|
||
|
|
||
| <head> | ||
| <title>Web Core Participant Events</title> | ||
| </head> |
Oops, something went wrong.