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.
- 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
- 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
- A Twilio account. Sign up for free here.
- Node.js v14+
- NPM v6+ (comes installed with newer Node versions)
Run npm install to install all the dependencies from NPM.
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.
To remove the Serverless app from Twilio, run the following command:
npm run serverless:remove
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.
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.
Build the app by running:
npm run build
This will build the static assets for the application in the build/ directory.
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.
See LICENSE.