Meeting Metadata

All metadata pertaining to a meeting is stored in meeting.meta. This includes important information about the meeting state, type, and connections.

Available metadata

Web Components

The meeting.meta object contains the following properties:

• viewType - Indicates the type of the meeting. Possible values are WEBINAR, GROUP_CALL
• roomType - Indicates whether the meeting is a group-call or a webinar
• meetingTitle - The title of the meeting
• meetingStartedTimestamp - The timestamp when the meeting started
• mediaState - Media connection state
• socketState - Socket connection state

React

The meeting.meta object contains the following properties:

• viewType - Indicates the type of the meeting. Possible values are WEBINAR, GROUP_CALL
• roomType - Indicates whether the meeting is a group-call or a webinar
• meetingTitle - The title of the meeting
• meetingStartedTimestamp - The timestamp when the meeting started
• mediaState - Media connection state
• socketState - Socket connection state

Android

The meeting.meta object contains the following properties:

• meetingId - The unique identifier of the meeting
• meetingTitle - The title of the meeting
• meetingStartedTimestamp - The timestamp when the meeting started
• meetingType - Indicates the meeting type, which can be one of GROUP_CALL, WEBINAR, AUDIO_ROOM, or LIVESTREAM from the RtkMeetingType enum
• meetingConfig - The configuration of the meeting containing audio and video settings
• meetingState - The state of the meeting of type RtkMeetingState
• authToken - User's authentication token for the meeting
• selfActiveTab - Information about the currently active tab for the local participant
• mediaConnectionState - The current state of the media connection
• socketConnectionState - The current state of the socket connection

iOS

The meeting.meta object contains the following properties:

• meetingId - The unique identifier of the meeting
• meetingTitle - The title of the meeting
• meetingStartedTimestamp - The timestamp when the meeting started
• meetingType - Indicates the meeting type, which can be one of .groupCall, .webinar, .audioRoom, or .livestream from the RtkMeetingType enum
• meetingConfig - The configuration of the meeting containing audio and video settings
• meetingState - The state of the meeting of type RtkMeetingState
• authToken - User's authentication token for the meeting
• selfActiveTab - Information about the currently active tab for the local participant
• mediaConnectionState - The current state of the media connection
• socketConnectionState - The current state of the socket connection

Flutter

The meeting.meta object contains the following properties:

• meetingId - The unique identifier of the meeting
• meetingTitle - The title of the meeting
• meetingStartedTimestamp - The timestamp when the meeting started
• meetingType - Indicates the meeting type, which can be one of groupCall, webinar, or livestream from the RtkMeetingType enum
• activeTab - Information about the currently active tab for the local participant

React Native

The meeting.meta object contains the following properties:

• viewType - Indicates the type of the meeting. Possible values are WEBINAR, GROUP_CALL
• roomType - Indicates whether the meeting is a group-call or a webinar
• meetingTitle - The title of the meeting
• meetingStartedTimestamp - The timestamp when the meeting started
• mediaState - Media connection state
• socketState - Socket connection state

Access meeting metadata

To access meeting metadata, use the meeting.meta object.

Web Components

JavaScript

// Destructure the metadata to get meetingTitle
const { meetingTitle } = meeting.meta;

if (meeting.self.roomJoined) {
  console.log(
    `The local user has joined a meeting with title ${meetingTitle}.`,
  );
}

React

import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react";
import { useEffect } from "react";

function MeetingInfo() {
  const [meetingTitle, roomJoined] = useRealtimeKitSelector((m) => [
    m.meta.meetingTitle,
    m.self.roomJoined,
  ]);

  useEffect(() => {
    if (roomJoined) {
      console.log(
        `The local user has joined a meeting with title ${meetingTitle}.`,
      );
    }
  }, [roomJoined, meetingTitle]);

  return null;
}

Android

Kotlin

val meetingTitle = meeting.meta.meetingTitle

iOS

Swift

let meetingTitle = meeting.meta.meetingTitle

Flutter

Dart

final meetingTitle = meeting.meta.meetingTitle;
print("The local user has joined ${meetingTitle}.");

React Native

import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react-native";
import { useEffect } from "react";

const [meetingTitle, roomJoined] = useRealtimeKitSelector((m) => [
  m.meta.meetingTitle,
  m.self.roomJoined,
]);

useEffect(() => {
  if (roomJoined) {
    console.log(
      `The local user has joined a meeting with title ${meetingTitle}.`,
    );
  }
}, [roomJoined, meetingTitle]);

Connection events

The meta object also emits events for indicating changes in the connection state of the meeting.

Media connection updates

Web Components

Updates to the media connection (WebRTC connection used for the transfer of actual media) are sent via the mediaConnectionUpdate event.

JavaScript

meeting.meta.on("mediaConnectionUpdate", ({ transport, state }) => {
  // transport - 'consuming' | 'producing'
  // state - 'new' | 'connecting' | 'connected' | 'disconnected' | 'reconnecting' | 'failed'

  console.log(`Media connection ${transport} is now ${state}`);
});

The mediaConnectionUpdate event provides:

• transport - Either 'consuming' (receiving media) or 'producing' (sending media)
• state - Connection state: 'new', 'connecting', 'connected', 'disconnected', 'reconnecting', or 'failed'

React

Updates to the media connection (WebRTC connection used for the transfer of actual media) are sent via the mediaConnectionUpdate event.

import { useRealtimeKitClient } from "@cloudflare/realtimekit-react";
import { useEffect } from "react";

function MediaConnectionMonitor() {
  const [meeting] = useRealtimeKitClient();

  useEffect(() => {
    if (meeting) {
      const handleMediaConnection = ({ transport, state }) => {
        // transport - 'consuming' | 'producing'
        // state - 'new' | 'connecting' | 'connected' | 'disconnected' | 'reconnecting' | 'failed'

        console.log(`Media connection ${transport} is now ${state}`);
      };

      meeting.meta.on("mediaConnectionUpdate", handleMediaConnection);

      return () => {
        meeting.meta.off("mediaConnectionUpdate", handleMediaConnection);
      };
    }
  }, [meeting]);

  return null;
}

The mediaConnectionUpdate event provides:

• transport - Either 'consuming' (receiving media) or 'producing' (sending media)
• state - Connection state: 'new', 'connecting', 'connected', 'disconnected', 'reconnecting', or 'failed'

Android

You can access the current media connection state directly from the metadata.

Kotlin

val mediaConnectionState = meeting.meta.mediaConnectionState

iOS

You can access the current media connection state directly from the metadata.

Swift

let mediaConnectionState = meeting.meta.mediaConnectionState

Flutter

Media connection events are not available in Flutter. Monitor the connection state through the meeting state changes.

React Native

Updates to the media connection (WebRTC connection used for the transfer of actual media) are sent via the mediaConnectionUpdate event.

meeting.meta.on("mediaConnectionUpdate", ({ transport, state }) => {
  // transport - 'consuming' | 'producing'
  // state - 'new' | 'connecting' | 'connected' | 'disconnected' | 'reconnecting' | 'failed'

  console.log(`Media connection ${transport} is now ${state}`);
});

The mediaConnectionUpdate event provides:

• transport - Either 'consuming' (receiving media) or 'producing' (sending media)
• state - Connection state: 'new', 'connecting', 'connected', 'disconnected', 'reconnecting', or 'failed'

Socket connection updates

Web Components

Updates to the WebSocket connection (used for chat, polls, and other basic signaling) are sent via the socketConnectionUpdate event.

JavaScript

meeting.meta.on(
  "socketConnectionUpdate",
  ({ state, reconnectionAttempt, reconnected }) => {
    // state - 'connected' | 'disconnected' | 'reconnecting' | 'failed'

    console.log(`Socket connection is now ${state}`);

    if (reconnectionAttempt) {
      console.log(`Reconnection attempt: ${reconnectionAttempt}`);
    }

    if (reconnected) {
      console.log("Successfully reconnected");
    }
  },
);

The socketConnectionUpdate event provides:

• state - Connection state: 'connected', 'disconnected', 'reconnecting', or 'failed'
• reconnectionAttempt - The number of reconnection attempts made (if reconnecting)
• reconnected - Boolean indicating if the connection was successfully reestablished

React

Updates to the WebSocket connection (used for chat, polls, and other basic signaling) are sent via the socketConnectionUpdate event.

import { useRealtimeKitClient } from "@cloudflare/realtimekit-react";
import { useEffect } from "react";

function SocketConnectionMonitor() {
  const [meeting] = useRealtimeKitClient();

  useEffect(() => {
    if (meeting) {
      const handleSocketConnection = ({
        state,
        reconnectionAttempt,
        reconnected,
      }) => {
        // state - 'connected' | 'disconnected' | 'reconnecting' | 'failed'

        console.log(`Socket connection is now ${state}`);

        if (reconnectionAttempt) {
          console.log(`Reconnection attempt: ${reconnectionAttempt}`);
        }

        if (reconnected) {
          console.log("Successfully reconnected");
        }
      };

      meeting.meta.on("socketConnectionUpdate", handleSocketConnection);

      return () => {
        meeting.meta.off("socketConnectionUpdate", handleSocketConnection);
      };
    }
  }, [meeting]);

  return null;
}

The socketConnectionUpdate event provides:

• state - Connection state: 'connected', 'disconnected', 'reconnecting', or 'failed'
• reconnectionAttempt - The number of reconnection attempts made (if reconnecting)
• reconnected - Boolean indicating if the connection was successfully reestablished

Android

You can access the current socket connection state directly from the metadata.

Kotlin

val socketConnectionState = meeting.meta.socketConnectionState

iOS

You can access the current socket connection state directly from the metadata.

Swift

let socketConnectionState = meeting.meta.socketConnectionState

Flutter

Socket connection events are not available in Flutter. Monitor the connection state through the meeting state changes.

React Native

Updates to the WebSocket connection (used for chat, polls, and other basic signaling) are sent via the socketConnectionUpdate event.

meeting.meta.on(
  "socketConnectionUpdate",
  ({ state, reconnectionAttempt, reconnected }) => {
    // state - 'connected' | 'disconnected' | 'reconnecting' | 'failed'

    console.log(`Socket connection is now ${state}`);

    if (reconnectionAttempt) {
      console.log(`Reconnection attempt: ${reconnectionAttempt}`);
    }

    if (reconnected) {
      console.log("Successfully reconnected");
    }
  },
);

The socketConnectionUpdate event provides:

• state - Connection state: 'connected', 'disconnected', 'reconnecting', or 'failed'
• reconnectionAttempt - The number of reconnection attempts made (if reconnecting)
• reconnected - Boolean indicating if the connection was successfully reestablished

Next steps

Explore related topics:

• Meeting Object Explained - Comprehensive meeting object reference
• Session Lifecycle - Understanding meeting states and transitions