Socket
Socket
Sign inDemoInstall

@twilio/video-room-monitor

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@twilio/video-room-monitor

Twilio Video Room Monitor Javascript Library


Version published
Maintainers
1
Created
Source

Twilio Video Room Monitor

CircleCI

We want your feedback! Please feel free to open a GitHub issue for suggested improvements or feature requests.

What is it

A browser-based tool that provides Twilio Video JavaScript developers visibility into the inner workings of their video application. It displays near real-time information and metrics from the Room object and can be added to any Twilio Video JavaScript application with a few lines of code.

Room Monitor gif

The Twilio Video Room Monitor can be used as a tool during all phases of development or can be forked, customized, and provided to end-users as an in-call troubleshooting view.

To learn more, visit the Video Room Monitor Documentation.

Changelog

View Changelog.md for details about our releases.

Browser Support

ChromeEdge (Chromium)FirefoxSafari
Android--
iOS--
Linux--
macOS
Windows-

Getting Started

NPM

You can install directly from npm.

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

Using this method, you can import @twilio/video-room-monitor and open the monitor like so:

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

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

Script Tag

You can also copy twilio-video-room-monitor.min.js from the dist/browser folder 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 room monitor like so:

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

Console Script Quickstart (not for production use)

As a way to quickly use the Video Room Monitor in any Twilio Video JavaScript application, you can also run the following snippet in the browser console to open the Monitor:

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

Note that the Room object must be exposed as a global variable (twilioRoom as seen in the above example) so that it can be registered with the Monitor.

Using this method, you can then close or toggle the monitor like so:

Twilio.VideoRoomMonitor.closeMonitor();
Twilio.VideoRoomMonitor.toggleMonitor();

NOTE: This method is not recommended for production use due to the CDN, as we don't have control of the availability of cdn.jsdelivr.net.

Usage

registerVideoRoom()

This is a required step to be able to use the Video Room Monitor. This registers a Twilio Video Room. To register a room, you can run the following line of code:

VideoRoomMonitor.registerVideoRoom(newRoom);
openMonitor()

This opens the monitor and emits the opened event. To open the monitor, you can run this line of code in the console:

VideoRoomMonitor.openMonitor();

To listen for the opened event, you can run the following line of code:

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

This closes the monitor and emits the closed event. To close the monitor, you can run this line of code in the console:

VideoRoomMonitor.closeMonitor();

To listen for the closed event, you can run the following line of code:

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

This toggles the monitor to be either open or closed. If the monitor is currently closed, then it will open the monitor (and emit the opened event) and vice versa. To toggle the monitor, you can run this line of code in the console:

VideoRoomMonitor.toggleMonitor();
isOpen

This is a boolean value that indicates whether or not the monitor is currently open.

VideoRoomMonitor.isOpen;

Local Development

Prerequisites

You must have the following installed:

  • Node.js v14+
  • NPM v7+ (comes installed with newer Node versions)

Install dependencies

Fork and clone the repository, then install all dependencies with

npm install

Scripts

npm start

Compile the app (in watch mode) into a directory (dist/node) that will allow users to install the Monitor locally with NPM.

npm install -S <path_to_monitor>

NPM will install the Monitor as a symlink, so as files are edited, saved, and re-compiled, they will automatically be reflected in the application that has installed the Monitor locally.

Any TypeScript errors that are found will be displayed in the console.

npm run build

This will build both Node.js and browser versions of the Monitor in the dist/ directory.

npm run ts

Run this command to check the types in the app.

npm test

Runs all unit tests.

npm run lint

Runs the linter.

npm run parcel:watch

This will host the app on a local server. This server can then be used to run the tool in the browser by using a script tag:

<script src="http://localhost:1234/twilio-video-room-monitor.js></script>

Or by running this code snippet in the console of your browser:

(() => {
  const script = document.createElement('script');
  script.src = 'http://localhost:1234/twilio-video-room-monitor.js';
  script.onload = () => {
    // Register your Twilio Video Room here
    window.Twilio.VideoRoomMonitor.registerVideoRoom(twilioRoom);
    window.Twilio.VideoRoomMonitor.openMonitor();
  };
  document.body.appendChild(script);
})();

After this has finished running, you can run commands to open and close the monitor within the console.

License

See LICENSE.

Keywords

FAQs

Package last updated on 05 Aug 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc