Events

warning

Some events are only available if the website is authenticated. These are highlighted with the icon 🔐. See advanced mode for more information.

Event listeners

on(type, callback)

Register event listener with a callback.

const meeting = new EyesonIframe(...);
meeting.on('error', (error) => {
    console.error(error);
    meeting.close();
});

info

When defining event handlers in the constructor's options object, each event name must be prefixed with on followed by the event name in PascalCase format.

new EyesonIframe('#meeting', {
    accessKey: '...',
    events: {
        onReady: () => {...},
        onError: () => {...},
        onMeetingJoin: () => {...},
        onMeetingLeave: () => {...},
        /* etc. */
    },
});

off(type, callback)

Remove event listener.

meeting.off('ready', onReady); // remove the exact callback
meeting.off('ready'); // remove all callbacks for type "ready"
meeting.off(); // remove all callbacks

ready

Eyeson UI has been loaded, iframe connection channel handshake was successfull. Status will change to ready.

error

Errors that occur during the initialization phase. Status will change to error.

• TypeError 'Invalid access key'
• TypeError 'Invalid guest token'
• TimeoutError 'Loading timeout' (after 10s)
• NotFoundError 'Initialization failed'
• UnknownError 'The operation failed'

meeting.on('error', error => {
  if (error.name === 'TypeError') {
    // ...
  }
});

closed

EyesonIframe instance is destroyed and the injected iframe element is removed. Status will change to closed.

statusChange

Status can be:

• init
• ready
• error
• closed

You can also find the current status on the EyesonIframe instance.

const meeting = new EyesonIframe(...);
console.log(meeting.status);

meeting.on('statusChange', status => {
  console.log('status change', status);
});

authenticated 🔐

Authentication was successfull. Features like present, chat, and snapshot are available now.

meeting.on('authenticated', () => {
  console.log('available features', meeting.features);
});

fullscreen 🔐

Eyeson UI changed to fullscreen so the iframe itself is fullscreen. The parameter isFullscreen is a boolean to indicate the current state.

meeting.on('fullscreen', isFullscreen => {
  console.log('fullscreen', isFullscreen);
});

meetingJoin 🔐

Triggered when a user successfully joins a meeting after the initial preview stage. This event fires only when the user has completed the joining process and is actively connected to the meeting.

meetingLeave 🔐

Triggered when a user leaves a meeting that they have previously joined. This event can occur for various reasons, identified by the reason parameter, including:

• reload (UI web page reload)
• exit_room (user leaves meeting)
• end_meeting (meeting stopped)
• meeting_locked (user kicked)
• inactive (in meeting)
• offline

meeting.on('meetingLeave', reason => {
  showError(`User has left the meeting because of "${reason}"`);
});

meetingError

This event is triggered when a user encounters an error while attempting to join a meeting. Unlike some other events, meetingError is available to all users regardless of authentication status.

When a joining attempt fails, the event provides one of the following error reasons:

• reload (UI web page reload)
• access_denied (accessKey invalid, for example meeting gone)
• session_in_use (same user joins the same meeting 2 times)
• meeting_locked (meeting locked)
• inactive (in preview)

meeting.on('meetingError', reason => {
  showError(`User can't join the meeting because of "${reason}"`);
});

userChange 🔐

This event is only triggered when using the accessKey authentication method and not when using guest.token.

The event occurs when a user's identity changes during a session. This can happen in scenarios where a user attempts to join a meeting while their previous session wasn't properly terminated. In such cases, a "session_in_use" error is triggered, and the prebuilt UI provides an option to join as a guest instead.

When implemented, this event can be utilized to notify your backend systems about the user's updated identity information.

meeting.on('userChange', user => {
  const { accessKey, id, name } = user;
  console.log('new user', id, name);
  // meeting.accessKey has changed to user.accessKey
});

themeChange

When the theme within the Prebuilt-UI has changed, this event is triggered including its current state. Theme can be light or dark.

meeting.on('themeChange', theme => {
  console.log('new theme', theme);
});