JavaScript Room Monitor

You can install the Video Room Monitor directly from npm.

npm install @twilio/video-room-monitor --save

After installing, you can import @twilio/video-room-monitor and open the Monitor like so:

1
import Video from 'twilio-video';
2
import { VideoRoomMonitor } from '@twilio/video-room-monitor';
3

4
Video.connect('token').then((room) => {
5
  VideoRoomMonitor.registerVideoRoom(room);
6
  VideoRoomMonitor.openMonitor();
7
});

You can also copy twilio-video-room-monitor.min.js from the dist/browser folder after npm installing it and include it directly in your web app using a <script> tag.

<script src="https://my-server-path/twilio-video-room-monitor.min.js"></script>

Using this method, you can register a room and open the Monitor like so:

1
window.Twilio.VideoRoomMonitor.registerVideoRoom(room);
2
window.Twilio.VideoRoomMonitor.openMonitor();

To quickly use the Video Room Monitor in any Twilio Video JavaScript application, you can run the following snippet in the browser console to load and open the Monitor. Note that the Room object must be exposed as a global variable (the sample below assumes the global variable is called twilioRoom) so that it can be registered with the Monitor.

1
(() => {
2
  const script = document.createElement('script');
3
  script.src = 'https://cdn.jsdelivr.net/npm/@twilio/video-room-monitor/dist/browser/twilio-video-room-monitor.min.js';
4
  script.onload = () => {
5
    // Register your Twilio Video Room here
6
    window.Twilio.VideoRoomMonitor.registerVideoRoom(twilioRoom);
7
    window.Twilio.VideoRoomMonitor.openMonitor();
8
  };
9
  document.body.appendChild(script);
10
})();

The script above opens the Monitor. You can then interact with the Monitor in your browser's console like so:

VideoRoomMonitor.toggleMonitor(); // toggle the monitor open or closed

We do not recommend this method for production use, because we do not control the availability of the jsDelivr CDN.

Below are the methods that are available on the Video Room Monitor. You can use these in your application's code, or call them in the browser's console to interact with the Monitor while your application is running.

This is a required step to be able to use the Video Room Monitor. This registers a Twilio Video Room with the Monitor.

To register a Room, you can run the following line of code, passing in the Room object that's returned when you connect to a Video Room with the Twilio Video JavaScript SDK.

VideoRoomMonitor.registerVideoRoom(newRoom);

To open the Room Monitor after you have registered it, you can use the openMonitor method.

VideoRoomMonitor.openMonitor();

Opening the Video Room Monitor emits an opened event. You can listen for this opened event with the following code:

VideoRoomMonitor.on('opened', () => console.log('the monitor has been opened'));

You can close the Monitor with the closeMonitor method:

VideoRoomMonitor.closeMonitor();

Closing the Monitor emits a closed event. You can listen for the closed event with the following code:

VideoRoomMonitor.on('closed', () => console.log('the monitor has been closed'));

You can use the toggleMonitor method to toggle the Monitor open or closed. If the Monitor is closed when you call this method, the Monitor will open and emit the opened event. If the Monitor is open when you call toggleMonitor, it will close the Monitor and emit the closed event.

VideoRoomMonitor.toggleMonitor();

The Monitor has an isOpen property, which is a Boolean indicating whether or not the Monitor is open.

VideoRoomMonitor.isOpen;

The Room Monitor has two tabs: Info and Stats. Under the Info tab, you will find information about the Room and all of its Participants and their tracks. 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 and jitter. 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.

Displays information about the Room object.

The Room information will also display the Room's ConnectOptions that were configured when connecting to the Room.

Displays information about remote and local Participants, as well as the Participants' tracks.

Displays information about a Participant's published data tracks.

Displays information about a Participant's published audio tracks.

Displays information about a Participant's published video tracks.

Displays information about the Media Stream Tracks attached to either a video or audio track.

The Stats tab displays a graph of the sent and received bitrate summed across all tracks (audio, video, and data) during the video chat, reported in kbps. The x-axis displays the local time.