Event data

You can register event handler functions with the eventHandlers property of the OTSession, OTPublisher, and OTSubscriber components:

class App extends Component {
  constructor(props) {
    super(props);

    this.sessionEventHandlers = {
      streamCreated: event => {
        console.log('Stream created!', event);
      },
      streamDestroyed: event => {
        console.log('Stream destroyed!', event);
      },
      sessionConnected: event => {
        console.log('Connected to the session!');
      },
      sessionDisconnected: event => {
        console.log('Disconnected from the session!');
      }
    };

    this.subscriberEventHandlers = {
      connected: event => {
        console.log('Subscriber connected!', event);
      },
      disconnected: event => {
        console.log('Subscriber disconnected!', event);
      }
    };

    this.publisherEventHandlers = {
      streamCreated: event => {
        console.log('Stream created!', event);
      },
      streamDestroyed: event => {
        console.log('Stream destroyed!', event);
      }
    };
  }

  render() {
    return (
      <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token" eventHandlers={this.sesssionEventHandlers}>
        <OTPublisher eventHandlers={this.publisherEventHandlers}/>
        <OTSubscriber eventHandlers={this.suscriberEventHandlers} />
      </OTSession>
    );
  }
}

The following sections define the structure of different event objects.

ArchiveEvent

The OTSession object dispatches archiveStarted and archiveStopped events when an archive starts and stops for a session. The event object has the following properties:

  archive = {
    archiveId: string, // The archive ID.
    name: string, // The archive name.
    sessionId: string, // The session ID.
  };

AudioNetworkStats

To get audio data for a subscriber, register an event listener for the audioNetworkStats event. The event object has the following properties:

  event = {
    audioBytesReceived: number,
    audioPacketsLost: number,
    audioPacketsReceived: number,
    timeStamp: number,
  };

SubscriberCaptionEvent

To get captions for a subscriber, register an event listener for the captionReceived event. The event object has the following properties:

  event = {
    text: string,
    isFinal: boolean,
  };

ConnectionCreatedEvent

You can find the structure of the object below:

  event = {
    sessionId: string;
    connection = {
      connectionId: string
      creationTime: string,
      data: string,
    }
  }

ConnectionDestroyedEvent

You can find the structure of the object below:

  event = {
    sessionId: string;
    connection = {
      connectionId: string
      creationTime: string,
      data: string,
    }
  }

ErrorEvent

You can find the structure of the object below:

  event = {
    code: string,
    message: string,
  };

MuteForcedEvent

event = {
  active: boolean;
}

PublisherVideoNetworkStatsEvent

To get video data for a publisher, register an event listener for the OTPublisher videoNetworkStats event. The object has the following structure:

  event = [
      {
      connectionId: string,
      subscriberId: string,
      videoPacketsLost: number,
      videoBytesSent: number,
      videoPacketsSent: number,
      timestamp: number,
    }
  ];

Note that this event object is an array of objects. See the docs for the OTPublisher videoNetworkStats event.

PublisherAudioNetworkStatsEvent

To get audio data for a publisher, register an event listener for the OTPublisher audioNetworkStats event. The object has the following structure:

  event = [
      {
      connectionId: string,
      subscriberId: string,
      audioPacketsLost: number,
      audioPacketsSent: number,
      audioBytesSent: number,
      timeStamp: number,
    }
  ];

Note that this event object is an array of objects. See the docs for the OTPublisher audioNetworkStats event.

RtcStatsReportEvent

You can find the structure of the object below:

  event = {
    connectionId: string,
    jsonArrayOfReports: string,
  };

SessionConnectEvent

event = {
  sessionId: string;
  connection: {
    connectionId: string,
    creationTime: string,
    data: string,
  },
}

SessionDisconnectEvent

event = {
  sessionId: string;
}

SignalEvent

The OTSession object dispatches a signal event when a signal is received. See the signaling developer guide. The event object has the following properties:

  event = {
    type: string, // Either 'signal' or 'signal:type'.
    data: string, // The data.
    connectionId: string, // The connection ID of the client that sent the signal.
  };

StreamCreatedEvent

You can find the structure of the object below:

  stream = {
    streamId: string;
    name: string;
    connectionId: string, // This will be removed after v0.11.0 because it's exposed via the connection object
    connection: {
      connectionId: string,
      creationTime: string,
      data: string,
    },
    hasAudio: boolean,
    hasVideo: boolean,
    sessionId: string,
    creationTime: number,
    height: number,
    width: number,
    videoType: string, // 'camera' or 'screen'
  };

StreamDestroyedEvent

  event = {
    streamId: string;
    name: string;
    connectionId: string;
    connection: {
      connectionId: string,
      creationTime: string,
      data: string,
    },
    hasAudio: boolean,
    hasVideo: boolean,
    sessionId: string,
    creationTime: number,
    height: number,
    width: number,
    videoType: string, // 'camera' or 'screen'
  };

StreamPropertyChangedEvent

  event = {
    stream: {
      streamId: string,
      name: string,
      connectionId: string, // This will be removed after v0.11.0 because it's exposed via the connection object
      connection: {
        connectionId: string,
        creationTime: number,
        data: string,
      },
      hasAudio: boolean,
      hasVideo: boolean,
      sessionId: string,
      creationTime: number,
      height: number,
      width: number,
      videoType: string, // 'camera' or 'screen'
    },
    oldValue: any,
    newValue: any,
    changedProperty: string,
  };

SubscriberAudioLevelEvent

  event = {
    audioLevel: number;
    stream: {
      streamId: string,
      name: string,
      connectionId: string, // This will be removed after v0.11.0 because it's exposed via the connection object
      connection: {
        connectionId: string,
        creationTime: number,
        data: string,
      },
      hasAudio: boolean,
      hasVideo: boolean,
      sessionId: string,
      creationTime: number,
      height: number,
      width: number,
      videoType: string, // 'camera' or 'screen'
    },
  };

VideoNetworkStatsEvent

You can find the structure of the object below:

  event = {
    senderStats: {
      connectionMaxAllocatedBitrate: number,
      connectionEstimatedBandwidth: number
    },
    videoPacketsLost: number,
    videoBytesReceived: number,
    videoPacketsReceived: number,
    timestamp: number
  };

SubscriberRtcStatsReportEvent

  event = {
    stream: {
      streamId: string;
      name: string;
      connectionId: string;
      connection: {
        connectionId: string,
        creationTime: string,
        data: string,
      },
      hasAudio: boolean,
      hasVideo: boolean,
      sessionId: string,
      creationTime: number,
      height: number,
      width: number,
      videoType: string, // 'camera' or 'screen'
    },
    jsonArrayOfReports: string
  };

PublisherRtcStatsReportEvent

  event = [
    connectionId: string,
    jsonArrayOfReports: string
  ];