Events

What are events? #

You can set listeners to certain events within the meeting. A listener gets called when the corresponding event occurs.

xxxxxxxxxx
13
1
/** The eventName parameter is a String with the name of the event. 
2
  * The listener parameter is a Function object that will be notified
3
  * when the event occurs, with data related to the event.
4
  **/
5

6
// Triggers every time an event is emitted
7
meeting.on(eventName, listener);
8

9
// Triggers only once even if the event occurs multiple times
10
meeting.once(eventName, listener);
11

12
// Remove the listener
13
meeting.off(eventName, listener);

Example Usage – 1 (Single Event) #

xxxxxxxxxx
19
1
const meeting = new ClanMeeting(domain, consumerId, optionalProperties);
2

3
window.onload = function () {
4
  meeting.start();
5

6
  const meetingJoinedLsnr = function meetingJoinedLsnr(eventData) {
7
    console.log('My participant ID:', eventData.id);
8

9
    // Example tasks once meeting is joined
10
    console.log(meeting.get('allParticipants'));
11
    meeting.set('displayName', 'ChangedName');
12
  };
13

14
  meeting.once('meetingJoined', meetingJoinedLsnr);
15
};
16

17
window.onunload = function () {
18
  meeting.end();
19
};

Example Usage – 2 (Single Event) #

xxxxxxxxxx
13
1
const meeting = new ClanMeeting(domain, consumerId, optionalProperties);
2

3
window.onload = function () {
4
  meeting.start();
5

6
  meeting.once('meetingLeft', function (eventData) {
7
    // route to another page when user leaves the conference
8
  });
9
};
10

11
window.onunload = function () {
12
  meeting.end();
13
};

Example Usage – 3 (Multiple Events) #

xxxxxxxxxx
32
1
const meeting = new ClanMeeting(domain, consumerId, optionalProperties);
2

3
window.onload = function() {
4
  meeting.start();
5

6
  const meetingJoinedLsnr = function meetingJoinedLsnr(participant) {
7
    console.log('My participant ID:', participant.id);
8

9
    const roleChangedLsnr = function roleChangedLsnr(event) {
10
      if (event.role === 'moderator') {
11
        meeting.exec('enableLobby', true);
12
      }
13
    };
14

15
    // event 2
16
    meeting.once('roleChanged', roleChangedLsnr);
17

18
    // event 3
19
    meeting.on('someoneKnocked', function (data) {
20
      if (data.participant.name === 'Jane Doe') { 
21
          meeting.exec('answerKnockingParticipant', data.participant.id, true);
22
      }
23
    });
24
  };
25

26
  // event 1
27
  meeting.once('meetingJoined', meetingJoinedLsnr);
28
};
29

30
window.onunload = function() {
31
  meeting.end();
32
};

All Events #

meetingJoined #

Joined the conference.

eventData: Object

xxxxxxxxxx
6
1
{
2
  roomName: string, // roomName of the conference joined
3
  id: string, // the id of local participant
4
  displayName: string, // display name of the user
5
  avatarURL: string, // avatar URL of the user
6
}

meetingLeft #

Left the conference.

eventData: Object

xxxxxxxxxx
3
1
{
2
  roomName: string // roomName of the conference left
3
}

someoneJoined #

Someone (apart from the local user) joined the conference.

eventData: Object

xxxxxxxxxx
4
1
{
2
  id: string, // the id of the participant
3
  displayName: string // the display name of the participant
4
}

someoneLeft #

Someone (apart from the local user) left the conference.

eventData: Object

xxxxxxxxxx
3
1
{
2
  id: string // the id of the participant
3
}

audioAvailabilityChanged #

Audio availability status changed.

eventData: Object

xxxxxxxxxx
3
1
{
2
  available: boolean // new available status - boolean
3
}

audioMuteStatusChanged #

Audio mute status changed.

eventData: Object

xxxxxxxxxx
3
1
{
2
  muted: boolean // new muted status - boolean
3
}

browserSupported #

Current browser support event notification.

eventData: Object

xxxxxxxxxx
3
1
{
2
  supported: boolean
3
}

cameraError #

Failed to access camera.

eventData: Object

xxxxxxxxxx
4
1
{
2
  type: string, // A constant representing the overall type of the error.
3
  message: string // Additional information about the error.
4
}

chatUpdated #

eventData: Object

xxxxxxxxxx
4
1
{
2
  isOpen: boolean, // Whether the chat panel is open or not
3
  unreadCount: number // The unread messages counter
4
}

dataChannelOpened #

Indicates whether a channel is opened so that data can be sent to other participants.

dataReceived #

Data received from another participant. This is different from incomingMessage as that is triggered when a chat message is received. See example here.

eventData: Object

xxxxxxxxxx
10
1
{
2
  senderInfo: {
3
    jid: string, // the jid of the sender
4
    id: string // the participant id of the sender
5
  },
6
  eventData: {
7
    name: string, // the name of the datachannel event over
8
    text: string // the received text from the sender
9
  }
10
}

deviceListChanged #

List of available audio/video devices changed.

eventData: Object

xxxxxxxxxx
3
1
{
2
  devices: Object // the new list of available devices.
3
}

emailChanged #

Provides event notifications about email changes.

eventData: Object

xxxxxxxxxx
4
1
{
2
  id: string // the id of the participant that changed his email
3
  email: string // the new email address
4
}

errorOccurred #

eventData: Object

xxxxxxxxxx
7
1
{
2
  details: Object?, // additional error details
3
  message: string?, // the error message
4
  name: string, // the coded name of the error
5
  type: string, // error type/source, one of : 'CONFIG', 'CONNECTION', 'CONFERENCE'
6
  isFatal: boolean // whether this is a fatal error which triggered a reconnect overlay or not
7
}

faceLandmarkDetected #

Provides event notifications when a face landmark is detected.

eventData: Object

xxxxxxxxxx
8
1
{
2
    faceBox: {
3
        left: number, // face bounding box distance as percentage from the left video edge
4
        right: number // face bounding box distance as percentage from the right video edge
5
        width: number // face bounding box width as percentage of the total video width
6
    }, // this might be undefined if config.faceLandmarks.faceCenteringThreshold is not passed
7
    faceExpression: string
8
}

filmstripDisplayChanged #

Filmstrip state updated.

eventData: Object

xxxxxxxxxx
3
1
{
2
  visible: boolean // Whether or not the filmstrip is displayed or hidden.
3
}

incomingMessage #

Incoming chat message.

eventData: Object

xxxxxxxxxx
6
1
{
2
  from: string, // The id of the user that sent the message
3
  nick: string, // the nickname of the user that sent the message
4
  privateMessage: boolean, // whether this is a private or group message
5
  message: string // the text of the message
6
}

micError #

Failed to access microphone.

eventData: Object

xxxxxxxxxx
4
1
{
2
  type: string, // A constant representing the overall type of the error.
3
  message: string // Additional information about the error.
4
}

moderationStatusChanged #

Audio/Video moderation status changed.

eventData: Object

xxxxxxxxxx
4
1
{
2
  mediaType: string, // The media type for which moderation changed.
3
  enabled: boolean // Whether or not moderation changed to enabled.
4
}

moderationParticipantApproved #

Audio video moderation approved for a participant.

eventData: Object

xxxxxxxxxx
4
1
{
2
  id: string, // The ID of the participant that got approved.
3
  mediaType: string // The media type for which the participant was approved.
4
}

moderationParticipantRejected #

Audio video moderation rejected for a participant.

eventData: Object

xxxxxxxxxx
4
1
{
2
  id: string, // The ID of the participant that got rejected.
3
  mediaType: string // The media type for which the participant was rejected.
4
}

notificationTriggered #

Provides event notifications when an application notification occurs.

eventData: Object

xxxxxxxxxx
4
1
{
2
  title: string, // The notification title.
3
  description: string // The notification description.
4
}

outgoingMessage #

Outgoing chat message.

eventData: Object

xxxxxxxxxx
4
1
{
2
  message: string, // the text of the message
3
  privateMessage: boolean // whether this is a private or group message
4
}

overriddenToolbarButtonClicked #

A toolbar button set with overriddenToolbarButtons property was clicked. See example implementation here.

eventData: Object

xxxxxxxxxx
4
1
{
2
  key: string, // the button name as defined in overriddenToolbarButtons property
3
  preventExecution: boolean // whether the click routine execution was prevented or not.
4
}

p2pStatusChanged #

Provides event notifications about changes to the connection type.

eventData: Object

xxxxxxxxxx
3
1
{
2
    isP2p: boolean|null // whether the new connection type is P2P
3
}

participantMenuButtonClicked #

Provides event notifications about a participant context menu button being clicked.

eventData: Object

xxxxxxxxxx
5
1
{
2
    key: string, // the pressed button's key.
3
    participantId: string, // the id of the participant for which the button was clicked,
4
    preventExecution: boolean // whether the execution of the button click was prevented or not
5
}

passwordRequired #

Participant encountered a password prompt.

eventData: null

readyToClose #

Conference is about to close. All hang up operations are completed.

eventData: null

recordingLinkAvailable #

Recording link became available

eventData: Object

xxxxxxxxxx
4
1
{
2
  link: string, // the recording link
3
  ttl: number // the time to live of the recording link
4
}

recordingStatusChanged #

Recording status changed.

eventData: Object

xxxxxxxxxx
5
1
{
2
  on: boolean // new recording status - boolean,
3
  mode: string // recording mode, `stream` or `file`,
4
  error: string | undefined // error type if recording fails, undefined otherwise
5
}

roleChanged #

Local user's role has changed (none, moderator, participant)

eventData: Object

xxxxxxxxxx
4
1
{
2
  id: string // the id of the participant
3
  role: string // the new role of the participant
4
}

participantsPaneToggled #

Provides event notifications that fire when the participants pane status changes.

eventData: Object

xxxxxxxxxx
3
1
{
2
  open: boolean // whether the pane is open or not
3
}

subjectChanged #

Meeting subject changed.

eventData: Object

xxxxxxxxxx
3
1
{
2
  subject: string // the new subject
3
}

screenSharingStatusChanged #

Screen sharing status changed.

eventData: Object

xxxxxxxxxx
4
1
{
2
    on: boolean, //whether screen sharing is on
3
    details: {} // about the source
4
}

someoneBecameDominantSpeaker #

Someone became the dominant speaker.

eventData: Object

xxxxxxxxxx
3
1
{
2
  id: string //participantId of the new dominant speaker
3
}

someoneChangedAvatar #

eventData: Object

xxxxxxxxxx
4
1
{
2
  id: string, // the id of the participant that changed avatar
3
  avatarURL: string // the new avatar URL
4
}

someoneChangedContentSharingStatus #

Someone switched on or turned off screen sharing. Listener receives a real-time list of all screen sharing participants.

eventData: Object

xxxxxxxxxx
3
1
{
2
  data: ["particId1", "particId2", ...]
3
}

someoneChangedDisplayName #

eventData: Object

xxxxxxxxxx
4
1
{
2
  id: string, // the id of the participant
3
  displayname: string // the new display name
4
}

someoneKnocked #

Someone is waiting in the lobby.

eventData: Object

xxxxxxxxxx
7
1
{
2
  // participant that is currently knocking in the lobby
3
  participant: {
4
    id: string,
5
    name: string
6
  }
7
}

someoneRaisedHand #

eventData: Object

xxxxxxxxxx
4
1
{
2
  id: string, // participantId of the user who raises/lowers the hand
3
  handRaised: number // 0 when hand is lowered and the hand raised timestamp when raised.
4
}

someoneTookStage #

Someone took the stage view (large video).

eventData: Object

xxxxxxxxxx
3
1
{
2
  id: string // participant id now on the large video in the stage view.
3
}

someoneWasKickedOut #

eventData: Object

xxxxxxxxxx
9
1
{
2
  kicked: {
3
    id: string, // the id of the participant removed from the room
4
    local: boolean // whether or not the participant is the local participant
5
  },
6
  kicker: {
7
    id: string // the id of the participant who kicked out the other participant
8
  }
9
}

suspendDetected #

Detected suspended events in the user's computer.

eventData: null

tileViewChanged #

Tile view entered or exited

eventData: Object

xxxxxxxxxx
3
1
{
2
    enabled: boolean, // whether tile view is not displayed or not
3
}

transcribingStatusChanged #

Provides event notifications about status changes in the transcribing process.

eventData: Object

xxxxxxxxxx
3
1
{
2
    on: boolean,
3
}

transcriptionChunkReceived #

Provides event notifications about new transcription chunks being available.

eventData: Object

xxxxxxxxxx
23
1
{
2
    // Transcription language
3
    language: string,
4

5
    // ID for this chunk.
6
    messageID: string,
7

8
    // participant info
9
    participant: {
10
        avatarUrl: string,
11
        id: string
12
        name: string,
13
    },
14

15
    // If the transcription is final, the text will be here.
16
    final: string,
17

18
    // If the transcription is not final but has high accuracy the text will be here.
19
    stable: string,
20

21
    // If the transcription is not final but has low accuracy the text will be here.
22
    unstable: string,
23
}

videoAvailabilityChanged #

Video availability status changed.

eventData: Object

xxxxxxxxxx
3
1
{
2
  available: boolean // new available status - boolean
3
}

videoMuteStatusChanged #

Video (camera) mute status changed.

eventData: Object

xxxxxxxxxx
3
1
{
2
  muted: boolean // new muted status - boolean
3
}

videoQualityChanged #

Meeting video quality changed.

eventData: Object

xxxxxxxxxx
3
1
{
2
  videoQuality: number // the height of the new changed (new) resolution
3
}

whiteboardStatusChanged #

Provides event notifications about changes to the whiteboard.

eventData: Object

xxxxxxxxxx
3
1
{
2
    status: string // new whiteboard status
3
}