Build an Interactive Live Video Streaming Experience
We are no longer allowing new customers to onboard to Twilio Live. Effective November 30, 2023, Twilio Live will End of Life. We have created this Migration Guide to help you identify an alternative solution for your use case.
This guide describes how to set up an interactive live video streaming application where you can join a Room as a host, speaker, or audience member.
The application uses Twilio's Serverless functions to deploy a service that will allow you to create and join Twilio Video Rooms as a speaker and view the room as a live stream audience member. The application also uses Twilio Sync and Twilio Conversations to allow stream audience members to raise their hand and receive an invitation to join the stream as a speaker.
Set up the application
First, clone the Live Interactive Video GitHub repository.
Next, navigate into that cloned repository. Copy the .env.example file in the root twilio-live-interactive-video directory and create a new file called .env:
cp .env.example .envThen, fill in the values in the .env file:
ACCOUNT_SIDandAUTH_TOKEN: Find these values on the Twilio Console landing page.
Once you have collected and stored these values in the .env file, you can install the project's dependencies:
npm installDeploy the web application
After the install is done, deploy the application:
npm run serverless:deployWhen the deploy is complete, the output will include a public URL for the deployed application and a passcode. You can visit this URL in your browser and start streaming.
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. You can generate a new passcode with npm run serverless:deploy -- --override.
Note that the passcode is for demo purposes only and should not be used to secure a production application.
Use the web application
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.
Run the iOS application
To run the iOS application, first open the iOS project in Xcode.
After opening the project, you should replace the BACKEND_URL in the iOS app source with the URL that the app was deployed to in the step above
class API: ObservableObject {
private let session = Session()
private let jsonEncoder = JSONEncoder()
private let jsonDecoder = JSONDecoder()
private let backendURL = <#BACKEND_URL#>
Once you have updated the backend URL, run the application in Xcode.
When the app is running, you will see a screen where you can enter any unique name in the Full name field. Then, tap Continue.
Tap Create Event to host a new stream or Join Event to join an existing stream as a viewer or a speaker.
Need some help?
We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.
