Add Video Calling in your Web App using Agora.io 🖥
Integrating video streaming features within your application can be very tedious and time-consuming. Maintaining a low-latency video server, load balancing, listening to end-user events (screen off, reload etc.) are some of the really painful hassles… not to mention having cross-platform compatibility.
Feeling dizzy already? Dread not! Agora’s Video SDK allows you to embed video calling features into your application, within a matter of minutes. In addition, all the video server details are abstracted away.
Let’s start by signing up with Agora.
Go ahead to https://dashboard.agora.io/en/signup to create an account and login to the dashboard.
Navigate to the project list tab under projects and create a new project by clicking the green button as shown in the below image.
Create a new project and retrieve the App ID. This will be to authenticate your requests while coding the application.
This would be the structure of the application that we are developing
│ ├── AgoraRTCSDK-2.4.0.js
│ └── script.js
The application’s structure is very straightforward.
You can download the latest version of the Web SDK from Agora’s Downloads page and integrate it like it has been done the tutorial or use the CDN version by using this instead
There is a container with id
me which is supposed to contain the video stream of the local user (you).
There is a container with id
remote-container to render the video feeds of the other remote users in the channel.
Now, let’s add some basic styling to our app.
First, let’s spring up some helper functions to handle errors and trivial DOM operations.
The architecture of an Agora Video Call via Web:
So what’s the diagram all about? Let’s break it down a bit.
Channels are something similar to chat rooms and every App ID can spawn multiple channels.
Users are able to join and leave a channel at will.
We’ll be implementing the methods mentioned in the diagram inside
First, we need to create a client object by calling the
AgoraRTC.createClient constructor. Pass in the parameters to set the video encoding and decoding format (h264) and the channel mode (live).
Next, we initialize the method with the App ID which we obtained previously.
Now we’re ready to join a channel by using the
This demo app will not require extra security to join a channel so pass
null for the Dynamic Key value. We will allow Agora to dynamically assign a user ID for each user that joins in this demo so pass in
null for the UID parameter.
Now it’s time to publish our video feed into the channel. First, create a stream object by calling the
AgoraRTC.createStream constructor and pass in the appropriate parameters. Afterwards, we will publish the stream to the channel as shown below:
Now, we need to display the remote users in the channel and handle the view appropriately if somebody enters/exits the video call. To achieve this, we use a series of event listeners and handlers.
Shazam! Now, we can conduct a successful video call inside our application.
Note: When you try to deploy this web app (or any other which uses Agora SDK), make sure the server has an SSL certificate (HTTPS connection).
The code base for this tutorial is available on GitHub.