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.

In this tutorial, we’ll write a bare-bones web application with video calling features using vanilla JavaScript and the Agora Web SDK.

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.

Structure

This would be the structure of the application that we are developing

.
├── index.html
├── scripts
│ ├── AgoraRTCSDK-2.4.0.js
│ └── script.js
└── styles
└── style.css

index.html

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

<script src="http://cdn.agora.io/sdk/web/AgoraRTCSDK-2.4.1-latest.js"></script>
index.html

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.

styles.css

Script.js

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 script.js.

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 theclient.join method.

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.