Whether you are just starting to build with Twilio Programmable Video or are looking to optimize your application in production, access to the inner workings of your video application is essential to iterate fast and verify code changes to lead to the outcome you are looking for. You could dive into the Room object through the browser console, but the values are not updated in real-time, and it often takes many clicks to find the value you want. Furthermore, some of the metrics you need for optimizing your application aren’t easily consumable. For example, although you can get the total bytes sent for a given track after some number of clicks, what you probably want is the bitrate. And you probably want to see how it changes in real-time. As you go through the various stages of development, this process becomes cumbersome and the time it takes to access the information you need adds up.

To help provide easy access and visibility into the inner workings of Twilio Video rooms, we are excited to announce the Twilio Video Room Monitor, now available in public beta for WebRTC Go, P2P, and Group Room developers. The Twilio Video Room Monitor is a free, browser-based tool that displays real-time information and metrics about a Twilio Video room. It can be added to any Twilio Video JavaScript application with just a few lines of code and can be used as a tool during all stages of development. The code is also freely available and can be customized and provided to internal or external end-users as an in-call troubleshooting view.

The Video Room Monitor gathers and processes information from the Room object in real-time and then displays the information in a consumable way.

It has two main tabs: an Info tab and a Stats tab. Under the Info tab, you will find information about the room and all of its participants. The Stats tab contains graphs of the bitrate sent and received over the course of the video call for the local participant.

In the Info tab, you will find metrics for both the local and remote participants. For each participant and each track, you can view properties and metrics that are helpful for making optimizations or assessing media quality, such as packet loss percentage, jitter, and FPS. You can see a snapshot this data changing in real-time below:

The Info tab also includes relevant metadata about the room and its participants, such as the media region selected or the ConnectOptions of the local participant. Here’s an example of the connect options in the monitor:

Now, let’s add the Twilio Video Room Monitor tool to one of our applications. There are three different ways that you can install the tool, but this post will mainly focus on how to get started using NPM. Instructions for getting started using a script tag or the browser console can be found in the README. The tool is also open source so you can develop locally, customize the tool to your liking, and provide it to internal or external end-users as an in-call troubleshooting view.

The Twilio Video Room Monitor is available as an npm package, which can be downloaded and added to any Twilio Video JavaScript application.

To begin, install this package with npm as follows:

Then, you will need to import the package, register a room object, and open the Room monitor. To quickly see it in action, you can register the room and open the monitor when connecting to the room, as shown in the example below:

And that’s it! The Room Monitor will be opened upon joining the room and you can start exploring information and real-time metrics observed during your video call.

The Room Monitor provides developers with a peek under the hood of Twilio rooms to help accelerate development and optimize your video application during your journey with Twilio Video. If you have feedback or thoughts on this public beta release, we’d love to hear from you! Feel free to provide your feedback by opening a Github Issue. Additionally, you can refer to the repo’s CHANGELOG and the NPM page for updates.

And if you are looking for more ways to help your users have high quality calls with the Twilio platform, be sure to check out our new Twilio Video Diagnostics App and the associated Preflight API. You can learn more about these new tools in the blog post from a few weeks ago.

Happy building!