With the increase in remote work and lectures in the past two years, there has been an increase in the need for live streaming applications for online meetings, classes, and webinars. While general-purpose live-streaming applications are available, organisations prefer the use of their own internal live-streaming applications that meet their specific needs.
Creating a live-streaming application entirely from scratch can take up a lot of resources and effort. This is where Twilio Live, which provides pre-built libraries and SDKs, proves really helpful. With the help of these libraries, we can quickly deploy applications as per our needs.
Before we start writing the actual application, we need to set our environment up.
Make sure Node.js and npm are installed on the machine.
To use Twilio Live, we need to create a Twilio account. You can create a free trial account here: Try Twilio Free.
Creating a Twilio account gives us our ACCOUNT_SID. It also lets us generate the API key required in our live-streaming application.
We need to download ngrok to be able to generate a link that we can use to access the live stream on multiple devices. You can download it here: ngrok - download.
Now let’s create a folder that will be used as the project directory and run the following command to create our package.json file
Then let’s install our dependencies with:
npm install dotenv express twilio @twilio/live-player-sdk
Now let’s create our
.env file with the following environment variables:
You can find the first variable here in your Twilio account: Twilio console
The other two need to be generated by going to For Twilio and clicking on the “Create API key.”
Inside your project directory, create a folder named public. Our client-side files will go here.
Inside the public folder, create a folder named livePlayer. Copy the following files from node_modules/@twilio/live-player-sdk/dist/build into this folder.
Now that we have set our environment up, we are ready to build our live-streaming application with the help of Twilio Live. To create our application, we need the following building blocks:
- A server that can generate access tokens for the streamer and audience, create endpoints to control the live stream, and create and update rooms.
- A streamer to generate the live stream.
- An audience to view the live stream.
Create a file named
server.js inside the project directory with the following code
This server serves our static pages, creates endpoints to start and end the live stream, and gets access tokens for the participants. We listen to the server on port 3333.
First, create a file named
index.html inside the public folder and add the following code to it
This file will be the homepage for our live-streaming application. It can be opened in the browser using localhost:3333.
Now we need to create our streamer end of the application. We will need two files for this purpose. One is
streamer.html and the other
streamer.js. Create both files inside the public folder using the code below:
Our Express server will serve this page at the “/stream” endpoint. You can access it at localhost:3333/stream.
We will now create the audience page for our application. This will again need two files, namely,
audience.js. Create both of the files inside the public directory. The code for the audience page is available below
Our Express server will serve this page at the “/watch” endpoint. You can access it at localhost:3333/watch.
npm start and open localhost:3333 in the browser to view your webpage. Once
npm start is running open terminal and run:
ngrok http 3333
This will create a temporary URL that we can use to access our webpage on another machine. This helps us use one device as a streamer and another as the audience.
This is just a demo, but you can modify it and make it your own!
When you are ready to show off your live-streaming application to the world, you can build, deploy, and host it on Codesphere, the all-in-one development platform that supercharges your development!