In a previous blog post, we discussed how we can use the Agora Media Push service to publish our livestream to a third-party service like YouTube, Facebook, or Twitch. In this blog post, we’ll build on top of that project to stream a cloud video to all users in a video call or livestream using the Agora Cloud Player service.
You can find the completed project on the cloudplayer branch. We’ll start from the project we built in the last blog post. If you’re coding along, you can clone what we have so far from GitHub.
git clone https://github.com/EkaanshArora/Agora-Web-UIKit-RTMP.git
cd Agora-Web-UIKit-RTMP
Install the dependencies: npm i
In the Agora console, go to the Usage tab and select your project from the drop-down menu. Click the RTMP Converter submenu and enable by clicking the button:
Go to the RESTful API page and click the Add Secret button. Copy the Customer ID and the Customer Secret to a text file. We’ll use these credentials to call the Agora Cloud Player endpoints from the back-end service. While you’re in the console, you can grab the App ID from the project management tab.
The back end will listen to requests from the React front end. Let’s start with adding a button to make this request to the website.
To enable the Agora Cloud Player service for your project, you need to make a request through Agora Support by providing your App ID.
You can execute npm start
to start the web server on localhost. We’ll start with the ./src/App.tsx
& file. We’ll replace the <RTMP>
component to add a new component called CloudPlayer
.
We’ll define the CloudPlayer
component by creating a new file.
It’s a simple component that renders a button to stream the video from the cloud. We define the serverUrl
that we’ll build in the next step. We’ll also define the playVideo
function that sends a request to the back-end endpoint with the requestBody
, where we can define the channel name, the UID for the Agora Cloud Player service, the RTC token, and the URL for the video we want to play.
Note: The video URL should be publicly accessible.
We’ll use Express to build a back-end service that will listen for requests from the website front end and call the Agora Cloud Player endpoints with the required credentials. You can find the code on GitHub with a button to quickly deploy it to Heroku in the readme.
We’ll import the libraries. Fetch
is used to make an HTTP request, Express
manages the server, dotenv
lets you use .env files for storing your credentials, bodyParser
parses the JSON payload from incoming requests, and cors
is a middleware for dealing with . . . well, cors.
We’ll define the Express app object and use the required middlewares. We’ll initialize dotenv and define our constants. You’ll need the customer credentials from the setup for your .env
file. We’ll encode the credentials to generate a basic auth header. You can rename the .env.example
file and add your details.
APP_ID=30a6bc899.............
REST_KEY=58cb3034............
REST_SECRET=93803f1..........
PORT=8080
We’ll define a play
function that takes in the request and the response. We’ll add the access-control-allow-origin header to the response object. We’ll get the channelName
, uid
, url
, and token
from the request. If they’re missing from the request, we send a 500
error response.
We’ll then define the headers
and data
for the request that we’ll make to the Agora Cloud Player endpoint as described here. We’ll use fetch
to await the response, log it to the console. and return it to the front end.
We’ll define a ping
function just to make sure the back-end server is configured correctly. Next, we’ll define the routes for our service. We’ll use the play
function for the /play
POST route and the ping
function for the /ping
GET route. We’ll use the listen
method to listen for requests on the defined port.
That’s all the code we need. You can run the service locally by executing node index.js
. Or you can host it on Heroku using this link.
If there are features you think would be good to add to the back-end service, feel free to fork the repository and add a pull request. All contributions are appreciated!
If you have questions while using the project, I invite you to join the Agora Developer Slack community, where you can ask them in the #web-help-me
channel. Feel free to open issues for feature requests or to report bugs on the UIKit Repo, the project repo, or the back-end repo.