Twilio Live Interactive Video
This project demonstrates an interactive live video streaming app that uses Twilio Live, Twilio Video, and Twilio Sync. Check out this blog post for more details about the app's features and how it was built. The project is setup as a monorepo that contains the frontend reference applications for the Web and iOS (Android coming soon).
- Deploy the application to Twilio Serverless in just a few minutes.
- Create or join a stream as a speaker and collaborate with other users.
- Join a stream as a viewer to see the Twilio Video Room participants composed as a high quality media stream.
This section describes the steps required for all developers to get started with their respective platform.
- Node.js v14+
- NPM v7+ (upgrade from NPM 6 with
npm install --global npm)
.env.example file to
.env and perform the following one-time steps before deploying your application.
Set your Account Sid and Auth Token
Update the ACCOUNT_SID and AUTH_TOKEN
.env entries with the Account SID and Auth Token found on the Twilio Console home page.
NOTE: the use of Twilio Conversations is optional. If you wish to opt out, set the
DISABLE_CHAT environment variable to
Once you have setup all your environment variables, run
npm install to install all dependencies from NPM.
Deploy the app to Twilio
Once the application environment has been configured and dependencies have been installed, you can deploy the app backend and web app using the following command.
npm run serverless:deploy App deployed to: https://twilio-live-interactive-video-1234-5678-dev.twil.io?passcode=12345612345678 Passcode: 123 456 1234 5678 This URL is for demo purposes only. It will expire on Tue Oct 19 2021 14:58:20 GMT-0600 (Mountain Daylight Time)
If you make any changes to this application, you can run
npm run serverless:remove followed by
npm run serverless:deploy to deploy the new changes to your application.
NOTE: The Twilio Function that provides access tokens via a passcode should NOT be used in a production environment. This token server supports seamlessly getting started with the collaboration app, and while convenient, the passcode is not secure enough for production environments. You should use an authentication provider to securely provide access tokens to your client applications. You can find more information about Programmable Video access tokens in this tutorial.
The passcode will expire after one week. To generate a new passcode, run
npm run serverless:deploy -- --override. Additionally, you may run
npm run serverless:list to see your deployed app's URL and passcode, or you can run
npm run serverless:remove to delete the Serverless app from Twilio.
Max Stream Duration
The app is configured to automatically end a stream after it has been running for 30 minutes. This limitation is in place to limit the charges applied to your Twilio account during early testing.
Max duration is specified when the reference backend creates a
MediaProcessor. To change the max duration, edit this source code before deploying the app.
Use the web app
When you visit the URL for your deployed live streaming application, you'll first see a screen where you can enter your name. Then, you'll be prompted to either create a new streaming event and join the stream's Video Room as the event host, or join an existing event as either a speaker in the stream's Video Room or a stream audience member.
The first person to enter the Video Room as a speaker will be the event's host. This person can invite audience members into the stream and can end the stream when it is finished.
If you join a stream as an audience member, you can raise your hand to request to join the stream as a speaker. The host can then send you an invitation to join the stream, and send you back to the audience when you are done.
The application uses the
video-composer-v1 Media Extension, which formats the Video Room contents in a responsive grid for streaming to audience members. People viewing the live stream will see all of the Video Room participants, and the grid will change as participants enter or exit.
Web app local development
To run the web app locally, you must first deploy the backend functions to Twilio Serverless. First, run
npm run serverless:deploy, and then copy the URL of the deployed app to your
.env file as the
WEB_PROXY_URL variable (see .env.example for an example). Then, run
npm run develop:web to start the local development server. Any API requests made by the locally running app will be proxied to the URL provided as the
If you want to edit the functions that have been deployed to Twilio Serverless, you can do so in the Twilio Console Functions Editor.
Run the iOS App
Open the Project in Xcode
- Open the iOS project in Xcode.
- Run the app.
- Enter any unique name in the
Full namefield and tap
- Enter passcode from the backend deploy and tap
Create Eventto host a new stream or
Join Eventto join a stream as a viewer or a speaker.
The API for the reference backend used by the clients is specified here.
This application uses Twilio Functions, Twilio Conversations, and Twilio Sync in addition to Twilio Video Rooms and Twilio Live resources. Note that by deploying and using this application, your will be incurring usage for these services and will be billed for usage.