Meeting Connection State Events - React

Overview

The VideoSDK provides a feature to monitor the connection state of a meeting through the onMeetingStateChanged event. This event is triggered whenever the state of the meeting changes, allowing developers to handle different connection states appropriately.

Event: onMeetingStateChanged

Description

The onMeetingStateChanged event is fired when the connection state of the meeting changes. The event callback provides the current state of the meeting, which can be one of the following:

• CONNECTING
• CONNECTED
• RECONNECTING
• DISCONNECTED

Meeting States and Their Triggers

1. CONNECTING

• This state indicates that the SDK has sent a request to the VideoSDK server to join a meeting using the provided meetingId.
• Typically, you might show a “Connecting…” screen to the end user during this phase.

2. CONNECTED

• Signifies that the WebSocket and, if applicable, the media channels have successfully connected.
• In SIGNALLING_ONLY and RECV_ONLY modes, this event triggers after the WebSocket connection is established since those modes do not rely on full media channels.

3. RECONNECTING

• Occurs if the network connection is lost or temporarily unstable. The SDK automatically attempts to rejoin the meeting.
• Useful for displaying a “Reconnecting…” status to the user, letting them know the system is attempting to recover the session.

4. DISCONNECTED

• Indicates that the WebSocket connection has closed and the meeting is effectively ended for this participant.
• This can happen if the user or the application explicitly leaves the meeting, or due to a critical error like a complete network drop.

Subscription

The onMeetingStateChanged event can be subscribed using useMeeting hook.

Code Snippet

const {
  meetingId
  ...
} = useMeeting({
  onMeetingStateChanged,
  ...
});

function onMeetingStateChanged(data) {
  switch(state){
    case 'CONNECTING':
      console.log("Meeting is Connecting");
      break;
    case 'CONNECTED':
      console.log("Meeting is Connected");
      break;
    case 'DISCONNECTED':
      console.log("Meeting connection disconnected abruptly");
      break;
    case 'RECONNECTING':
      console.log("Meeting is Reconnecting");
      break;
    default:
      console.log("Unknown state:", state);
      break;
  }
}