Twilio Video Diagnostics App

[!WARNING]
We are no longer allowing new customers to onboard to Twilio Video. Effective December 5th, 2024, Twilio Video will End of Life (EOL) and will cease to function for all customers. Customers may transition to any video provider they choose, however, we are recommending customers migrate to the Zoom Video SDK and we have prepared a Migration Guide. Additional information on this EOL is available in our Help Center here.

What is it

This application demonstrates a diagnostics tool for testing a participant's ability to have a quality video call with the Twilio platform. It can be used as part of onboarding to ensure a successful first video call or for diagnosing issues that relate to the device, software, or network conditions of the end-user. It is built with Twilio's Programmable Video JS SDK and Twilio's RTC Diagnostics SDK.

A Twilio hosted version of this app can be found at https://video-diagnostics.twilio.com.

What it tests

Access and permissions to the camera and microphone
Local audio and video via interactive camera, microphone, and speaker tests
Operating system and browser support
Connectivity to the Twilio cloud
Network performance and expected call quality

Features

Stepwise tests for device and software setup, connectivity with Twilio, and network performance
Actionable user recommendations when tests fail
Approachable UX for non-technical users with access to network statistics for those who need it
Downloadable JSON report of the exhaustive test results
Customizable and ready for self hosting or embedding into other web applications
No costs associated with deploying the app to Twilio Serverless

Prerequisites

A Twilio account. Sign up for free here.
Node.js v14+
NPM v6+ (comes installed with newer Node versions)

Install Dependencies

Run npm install to install all the dependencies from NPM.

Deploy the App

Before deploying the app, add your Twilio Account SID and Auth Token to a .env file (see .env.example for an example). The app is deployed to Twilio with a single command:

npm run serverless:deploy

When deployment has finished, the Twilio Serverless URL for the application will be printed to the console. This URL can be used to access the application:

App deployed to: https://rtc-diagnostics-video-xxxxxxxx-xxxx-dev.twil.io

To view the app URL at any time, you can run the following command:

npm run serverless:list

A few things to note:

The serverless deployment will expire after one week and is not meant for production
When hosting this application, we recommend you use the same domain as your video service. This will ensure the end-user's device access and permissions for the diagnostics tests align with those of your video application.

Delete the App

To remove the Serverless app from Twilio, run the following command:

npm run serverless:remove

Local Development

Running a local token server

This application requires an access token to run the Preflight and Bitrate tests. The included local token server provides the application with access tokens and TURN credentials. This token server can be used to run the app locally, and it is the server that is used when this app is run in development mode with npm start. Perform the following steps to setup the local token server:

If you haven't done so already, create an account in the Twilio Console and take note of your Account SID.
Create a new API Key in the API Keys Section under Programmable Video Tools in the Twilio Console. Take note of the SID and Secret of the new API key.
Store your Account SID, API Key SID, and API Key Secret, in a new file called .env (see .env.example for an example).

Now the local token server (see server/index.ts) can dispense Access Tokens and TURN credentials to run the Preflight and Bitrate tests.

Running the App locally

Run the app locally with

npm start

This will start the local token server and run the app in the development mode. Open http://localhost:3000 to see the application in the browser.

The page will reload if you make changes to the source code in src/. You will also see any linting errors in the console. If you need to run only the server on its own, you can start the token server locally with

npm run server

The token server runs on port 8081.

The server provided with this application uses the same endpoints as the serverless endpoints that are used when the app is deployed to Twilio Serverless.

Building

Build the app by running:

npm run build

This will build the static assets for the application in the build/ directory.

Tests

Run npm test to run all unit tests.

Run npm run test:serverless to run all unit and E2E tests on the Serverless scripts. This requires that your Twilio account credentials are stored in the .env file.

License

See LICENSE.

twilio / twilio-video-diagnostics-react-app

readme