Add Messaging, Voice, and Authentication to your apps with Vonage Communications APIs
Visit the Vonage API Developer Portal
The React Native SDK provides calls to access real-time network and media statistics in a video session. These calls report detailed stream quality metrics—such as packet loss, data received, and bandwidth—and can be used on any publisher or subscribed stream.
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.
This guide includes the following sections:
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.
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);
},
}}
/>
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);
},
}}
/>
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.
Provides statistics about a publisher.
PublisherAudioNetworkStats)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.PublisherVideoNetworkStats)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.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.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).See the sender-side statistics overview.
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.
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.
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);
}
}
}}
/>
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 for more information.
<OTSubscriber
eventHandlers={{
rtcStatsReport: event => {
console.log('subscriber rtcStatsReport event', event);
}
}}