Client Observability: React Native

The React Native SDK exposes detailed stream-quality metrics through a high-level statistics API—recommended for most use cases—which provides audio, video, network, and sender-side statistics in a unified, session-aware form that remains stable across peer-connection transitions. For advanced debugging, the SDK also offers access to the raw WebRTC stats report, which reflects unprocessed peer-connection data.

Audio and Video Statistics API

The React Native SDK sends periodic audio and video network statistics for both publishers and subscribers. These include packet counts, bitrates, frame rate data, pause/freeze metrics, codec information, and optional sender-side network estimation.

Getting Statistics for a Publisher

The PublisherAudioNetworkStatsEvent and PublisherVideoNetworkStatsEvent events provide you with an array of objects defining the current audio-video statistics for the publisher. For a publisher in a routed session (one that uses the OpenTok Media Router), this array includes one object, defining the statistics for the single audio-video stream that is sent to the Vonage Video Media Router. In a relayed session, the array includes an object for each subscriber to the published stream.

The following code logs some metrics for the publisher's stream:

<OTPublisher
  eventHandlers={{
    audioNetworkStats: event => {
      console.log('publisher audioNetworkStats event', event);
    },
    videoNetworkStats: event => {
      console.log('publisher videoNetworkStats event', event);
    },
  }}
/>

Getting Statistics for a Subscriber

The AudioNetworkStats and VideoNetworkStatsEvent events provide you with information about the subscriber's stream.

The following code logs several metrics for subscriber's stream:

<OTSubscriber
  eventHandlers={{
    audioNetworkStats: event => {
      console.log('subscriber audioNetworkStats event', event);
    },
    videoNetworkStats: event => {
      console.log('subscriber videoNetworkStats event', event);
    },
  }}
/>

Statistics Data Structures

This section outlines the objects and properties provided by the audio and video statistics API. While all Video SDK platforms expose the same set statistics, there may be minor differences in how each platform structures or names individual fields. These variations reflect platform-specific SDK design conventions rather than differences in the underlying metrics.

For a platform-independent explanation of the available statistics and what they represent, refer to client observability overview.

Publisher Statistics

Provides statistics about a publisher.

Publisher Audio Statistics (PublisherAudioNetworkStatsEvent)

Provides statistics about a publisher’s audio track.

  • connectionId — The unique ID of the client's connection, which matches the id property of the connection property of the connectionCreated event that the Session object dispatched for the remote client (only available in relayed sessions).
  • subscriberId — The unique ID of the subscriber, which matches the id property of the Subscriber object in the subscribing client's app (only available in relayed sessions).
  • audioBytesSent — Total audio bytes sent.
  • audioPacketsLost — Total audio packets that did not reach the subscriber or Media Router.
  • audioPacketsSent — Total audio packets sent.
  • timeStamp — Unix timestamp (ms) when the stats were gathered.

Publisher Video Statistics (PublisherVideoNetworkStatsEvent)

These fields represent the publisher's current video performance:

  • connectionId — The unique ID of the client's connection, which matches the id property of the connection property of the connectionCreated event that the Session object dispatched for the remote client (only available in relayed sessions).
  • subscriberId — The unique ID of the subscriber, which matches the id property of the Subscriber object in the subscribing client's app (only available in relayed sessions).
  • videoBytesSent — Total video bytes sent.
  • videoPacketsLost — Total video packets that did not reach the subscriber or Media Router.
  • videoPacketsSent — Total video packets sent.
  • timestamp — Unix timestamp (ms) when the stats were gathered.

Subscriber Audio Statistics (AudioNetworkStats)

Provides statistics about a subscriber’s audio track.

  • audioBytesReceived — Total audio bytes received.
  • audioPacketsLost — Total audio packets that did not reach the subscriber.
  • audioPacketsReceived — Total audio packets successfully received.
  • timeStamp — Unix timestamp (ms) when these stats were gathered.

Subscriber Video Statistics (VideoNetworkStatsEvent)

These fields describe the subscriber’s real-time video reception and decoding performance:

  • videoBytesReceived — Total video bytes received.
  • videoPacketsLost — Total video packets that did not reach the subscriber.
  • videoPacketsReceived — Total video packets received.
  • timestamp — Unix timestamp (ms) when the stats were gathered.

These following metrics provide bandwidth estimates reported for the sender’s outbound connection:

  • senderStats.connectionMaxAllocatedBitrate — Maximum allocated bitrate estimated for the sender (bps).
  • senderStats.connectionEstimatedBandwidth — Current estimated uplink bandwidth for the sender (bps).

Sender-Side Statistics

See the sender-side statistics overview.

Enabling Sender-Side Statistics

Sender-side statistics are received on the subscribers. To receive sender-side statistics, enable them for the stream’s publisher by passing the publishSenderStats property set to true in the publisher properties:

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

    this.publisherProperties = {
      publishSenderStats: true
    };

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

  render() {
    return (
      <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token">
        <OTPublisher
          properties={this.publisherProperties}
          eventHandlers={this.publisherEventHandlers}
          style={{ height: 100, width: 100 }}
        />
      </OTSession>
    );
  }
}

If publishSenderStats is not enabled, no sender statistics channel will be published for this publisher. The default value is false.

Subscribing to Sender-Side Statistics

Subscribers automatically receive sender statistics only if the publisher has enabled them.

No additional events or methods are required; the sender statistics are included in the existing VideoNetworkStatsEvent event object.

Receiving Statistics Events

Sender-side statistics are included as an optional senderStats object inside the object passed to the videoNetworkStats callback. The senderStats object contains two properties:

  • connectionMaxAllocatedBitrate — The maximum bitrate that can be estimated for the connection (in bits per second)
  • connectionEstimatedBandwidth — The current estimated bandwidth for the connection (in bits per second)
<OTSubscriber
  eventHandlers={{
    videoNetworkStats: event => {
      if (event.senderStats) {
        console.log('subscriber videoNetworkStats event', event.senderStats.connectionMaxAllocatedBitrate);
        console.log('subscriber videoNetworkStats event', event.senderStats.connectionEstimatedBandwidth);
      }
    }
  }}
/>

RTC Stats Report

To get low-level peer connection statistics for a publisher, use the OTPublisher.getRtcStatsReport() method. In response to calling the OTPublisher.getRtcStatsReport() method the publisher rtcStatsReport event handler is invoked. See the PublisherRtcStatsReportEvent event for more information.

<OTPublisher
  eventHandlers={{
    rtcStatsReport: event => {
      console.log('publisher rtcStatsReport event', event);
    }
  }}

To get low-level peer connection statistics for a subscriber, use the OTSubscriber.getRtcStatsReport() method. In response to calling the OTSubscriber.getRtcStatsReport() method the subscriber rtcStatsReport event handler is invoked. See the SubscriberRTCStatsReportEvent event for more information.

<OTSubscriber
  eventHandlers={{
    rtcStatsReport: event => {
      console.log('subscriber rtcStatsReport event', event);
    }
  }}