Building a React Native Video Chat App with In-Call Statistics

When you’re building a real-time engagement application, there’s a ton of metrics that need to be monitored to deliver a smooth experience to the end user. There can be many challenges when debugging a suboptimal user experience, high CPU usage, low internet bandwidth, dropped frames, and so on. The in-call statistics can be used to monitor, maintain, and improve user experience.

In this tutorial, we’ll add in-call stats to the React Native quick-start app. If you’re new to the Agora SDK, you can learn how the demo works here. We’ll look at how to access and display these statistics for local video, remote videos, and other important call aspects, like bandwidth and CPU usage.

Prerequisites

• Node.js LTS release
• An Android or iOS device
• An Agora developer account (see How to Get Started with Agora)
• A basic understanding of React Native and Agora SDK

The quick-start app is a good place to start as it has the video calling already built out and it doesn’t contain features we won’t need. You can follow the instructions in the readme.md to get the app working on your device. If you just want the final app with in-call stats, you can find the app here.

Accessing In-Call Stats

Let’s start writing the code for in-call stats to our demo app.

Updating the State

We’ll add three objects (remoteStats, code>rtcStats, and localStats) to the state to store the three different types of statistics. The localStats and rtcStats will be objects containing the different stats directly. We’ll use the remoteStats object to store the remote user’s UID as the key and the stats for that user as its value in the key-value pair. We’ll add a Boolean showStats to hide and unhide our stats in our UI:

Listening for the Stats

We can access the in-call statistics by listening for the LocalVideoStats, RemoteVideoStats, and RtcStats events. Let’s add event listeners to access and store the stats in our state. Each event triggers once every two seconds. (If we have N users in a call, the RemoteVideoStats triggers N times every 2 seconds.)

Function to Toggle showStats

Let’s create a function that flips the showStats Boolean value when we press our toggle button:

Displaying the Stats

Now that we’ve got all our logic in place, let’s display these stats in our UI. We’ll use the Boolean showStats to conditionally render the stats.

Toggle Button

We’ll add a button to hide and unhide the stats alongside our start and end call buttons in the render method:

Local Video Stats and RTC Stats

We’ll define a function _renderLocalStats to render the local stats using a FlatList. We iterate over the keys of our object and display them in Text components with their values. (_localStatItem and _rtcStatItem are helper functions for our list.)

We add our _renderLocalStats function to our _renderVideos function like so:

Remote Video Stats

We’ll create a function to render the remote stats for a given remote user using their UID. We’ll use a FlatList to render Text components iterating over our remoteStats object with their UID; as the key:

We’ll render this component as an overlay to our RtcRemoteView component. You can find the style definitions here:

Conclusion

That is how we can listen, monitor, and display the in-call statistics for our video experience. You can even build functions to log or react to change in these values to deliver an exceptional user experience.

Other Resources

If you want to learn about how the demo app works, see this tutorial. And if you want to look at other features of the Agora SDK, see the API Reference. I also invite you to join the Agora Slack Community.

---