Twilio Video Demo

This is the code written during the live Twilio Video demo during Twilio's November 2021 Superclass.

It creates a simple Video application that displays a virtual knitting circle and populates each yarn ball with an HTML video element when a participant enters the Room.

The main branch contains the base code where we began our live demo. Check out the superclass-demo branch to see the completed code that we wrote during the session.

Running the application

You'll need Python3 to get this running. To install the required dependencies:

python3 -m venv venv  # create a virtual environment
source venv/bin/activate
pip install -r requirements.txt

Next, create a .env file. You'll put your account credentials in that file, so that the Flask server can connect to Twilio.

touch .env

In the .env file, you'll want these credentials:

TWILIO_ACCOUNT_SID=<your account SID>
TWILIO_API_KEY=<your api key SID>
TWILIO_API_SECRET=<your api key secret>

You can find your account SID in the Twilio Console Dashboard.

You can create a new API key and get the secret through the Twilio Console.

To run the Flask server:

source venv/bin/activate
python server.py

This will start a server that you can access on your local machine at port 5000 (localhost:5000). You can view the application at http://localhost:5000.

Note: If you are running MacOS Monterey, port 5000 might be in use, in which case the Flask server won't be able to run on port 5000. You can either change the port that the server uses or turn off the AirPlay Receiver, which will free up port 5000.

To change the port that the server runs on, edit this line of code in the server to specify the new port you would like to use (ex: app.run(host="0.0.0.0", port=3000, debug=True)).

Can't wait to see what you build with Twilio Video!

Other branches

• superclass-demo: The code we wrote in this class (to be committed after the demo is over)
• blurred-backgrounds: Uses Twilio's Video Processors to blur a participant's background
• livestream: Uses Twilio Live to livestream the video room
• full-commented-code: A full version of the application we're building during the Superclass, with comments on each aspect

Other Resources

2021 Signal Talks

• Twilio WebRTC Go
• Twilio Video 101: Create a video application in minutes
• Introducing Twilio Video Insights: Video usage and quality data at your fingertips
• Twilio Live: Deliver next generation customer engagement with live interactive streaming

Quick Deploy Application

• Full-featured Twilio Video React app

Troubleshooting and Diagnostics

• Video Insights
• Preflight check API
• Video Diagnostics App
• Video Monitor
• Network Quality API

Virtual Backgrounds and Custom Video Filters

• Demo
• General information
• Custom filters
• Virtual background
• Custom Video Processors demo

Twilio Live

• Twilio Live overview
• Live video demo application
• Build a video livestreaming application with Twilio Live and Express
• Live stream your screen
• Billing and resource management best practices

Other

• Ad-hoc room creation: Create a Room from the browser, without a server
• Dominant Speaker Detection: Detect the currently active speaker in a Room
• Track Subscription API: Fine-tune which tracks participants will subscribe to in a Room
• Recordings and compositions: Record group rooms and lay them out in a specific format with compositions.
• Simulcast: Use simulcast to enhance the quality of group rooms for participants with different connectivity options
• Network Bandwidth Profile API: Specify how tracks will be prioritized based on participant bandwidth