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.

In today’s tutorial, we’re going to build a live streaming application using Twilio Live, Node.js and Express(to build the server), and vanilla JavaScript(for the client-side). We will also use ngrok to stream it across multiple devices.

The Setup

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

npm init

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:

TWILIO_ACCOUNT_SID=XXXXX
TWILIO_API_KEY_SID=XXXXX

TWILIO_API_KEY_SECRET=XXXXX

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.

• twilio-live-player.min.js
• twilio-live-player-wasmworker-1-5-0.min.js
• twilio-live-player-wasmworker-1-5-0.min.wasm
  

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:

1. A server that can generate access tokens for the streamer and audience, create endpoints to control the live stream, and create and update rooms.
2. A streamer to generate the live stream.
3. An audience to view the live stream.

The Server

Create a file named server.js inside the project directory with the following code

https://gist.github.com/RanjanSushant/2ce97591994db8e053a37229e994d07b.

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.

The Client-Side

First, create a file named index.html inside the public folder and add the following code to it

https://gist.github.com/RanjanSushant/9d530192be923ba5f23d936abaa515a1

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:

https://gist.github.com/RanjanSushant/9cb6523af510ebc2b6bce53ce722de16

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.html and audience.js. Create both of the files inside the public directory. The code for the audience page is available below

https://gist.github.com/RanjanSushant/23ec1c1ae4018497bdaa9debd89fc6c0

Our Express server will serve this page at the “/watch” endpoint. You can access it at localhost:3333/watch.

There you have it. We have created a live-streaming application using Node.js, Express, Vanilla Javascript, and Twilio Live. Run 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!

Happy Coding!