Add Video Calling in Your Web App Using the Agora Web NG SDK

Note: Updated for use with NG SDK (4.x)

Integrating video streaming features into your application can be very tedious and time-consuming. Maintaining a low-latency video server, load balancing, and 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? Fear not! The Agora Video SDK allows you to embed video calling features into your application within minutes. In addition, all the video server details are abstracted away.

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

You can test a live demo of this tutorial here.

Prerequisites

Google Chrome
You can get started with Agora by following this guide and retrieve the Appid.
Also, retrieve the temporary token if you have enabled the app certificate.

Project Setup

This is the structure of the application that we are developing:

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

view raw structure hosted with ❤ by GitHub

Building index.html

The structure of the application is very straightforward.

You can download the latest version of the Agora Web SDK from the Agora Downloads page. Or you can use the CDN version instead, as shown in the tutorial:

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Video Call Demo</title>
	<link rel="stylesheet" href="./styles/style.css">
	</head>

	<body>
	<h1>
	Video Call Demo<br><small style="font-size: 14pt">Powered by Agora.io</small>
	</h1>

	<p>App id : <input type="text" id="app-id" value=""></p>
	<p>Channel : <input type="text" id="channel" value=""></p>
	<p>Token : <input type="text" id="token" placeholder="(optional)" value=""></p>
	<button id="start">Start</button>
	<button id="stop" disabled>Stop</button>

	<h4>My Feed :</h4>
	<div id="me"></div>

	<h4>Remote Feeds :</h4>
	<div id="remote-container">

	</div>

	<script src="https://download.agora.io/sdk/release/AgoraRTC_N-4.3.0.js"></script>
	<script src="scripts/script.js"></script>
	</body>

	</html>

view raw index.html hosted with ❤ by GitHub

There is a container with an id me that is supposed to contain the video stream of the local user (you).

There is a container with an id remote-container to render the video feeds of the other remote users in the channel.

Building styles.css

Now, let’s add some basic styling to our app:

	*{
	font-family: sans-serif;
	}
	h1,h4,p{
	text-align: center;
	}
	button{
	display: block;
	margin: 5px auto;
	}
	#remote-container video{
	height: auto;
	position: relative !important;
	}
	#me{
	position: relative;
	width: 50%;
	margin: 0 auto;
	display: block;
	}
	#me video{
	position: relative !important;
	}
	#remote-container{
	display: flex;
	}

view raw styles.css hosted with ❤ by GitHub

Building the Video calling client

First, let’s make some helper functions to handle trivial DOM operations like adding and removing video containers:

	// JS reference to the container where the remote feeds belong
	let remoteContainer= document.getElementById("remote-container");

	/**
	* @name addVideoContainer
	* @param uid - uid of the user
	* @description Helper function to add the video stream to "remote-container".
	*/
	function addVideoContainer(uid){
	let streamDiv=document.createElement("div"); // Create a new div for every stream
	streamDiv.id=uid; // Assigning id to div
	streamDiv.style.transform="rotateY(180deg)"; // Takes care of lateral inversion (mirror image)
	remoteContainer.appendChild(streamDiv); // Add new div to container
	}
	/**
	* @name removeVideoContainer
	* @param uid - uid of the user
	* @description Helper function to remove the video stream from "remote-container".
	*/
	function removeVideoContainer (uid) {
	let remDiv=document.getElementById(uid);
	remDiv && remDiv.parentNode.removeChild(remDiv);
	}

view raw script.js hosted with ❤ by GitHub

The architecture of an Agora Video Call

Add Video Calling in Your Web App Using the Agora Web NG SDK - Screenshot #1

So what’s the diagram all about? Let’s break it down a bit.

Channels are similar to chat rooms, and every App ID can spawn multiple channels.

Users can join and leave a channel at will.

We’ll be implementing the methods mentioned in the diagram in script.js.

Creating a Client

First, we need to create a client object by calling the AgoraRTC.createClient method. Pass in the parameters to set the video encoding and decoding format (vp8) and the channel mode (rtc):

	// Client Setup
	// Defines a client for RTC
	const client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });

view raw script.js hosted with ❤ by GitHub

Creating Local Media Tracks and Initializing

Let’s create audio and video track objects for the local user by calling the AgoraRTC.createMicrophoneAndCameraTracks method. (Although optional, You can also pass in the appropriate parameters as per docs to tweak your tracks).

const [localAudioTrack, localVideoTrack] = await AgoraRTC.createMicrophoneAndCameraTracks();

view raw script.js hosted with ❤ by GitHub

We can now initialize the stop button and play the local video feedback in the browser (“me” container) to provide feedback:

	// Initialize the stop button
	initStop(client, localAudioTrack, localVideoTrack);

	// Play the local track
	localVideoTrack.play('me');

view raw script.js hosted with ❤ by GitHub

initStop is defined at the end of the code as a cleanup function:

	function initStop(client, localAudioTrack, localVideoTrack){
	const stopBtn = document.getElementById('stop');
	stopBtn.disabled = false; // Enable the stop button
	stopBtn.onclick = null; // Remove any previous event listener
	stopBtn.onclick = function () {
	client.unpublish(); // stops sending audio & video to agora
	localVideoTrack.stop(); // stops video track and removes the player from DOM
	localVideoTrack.close(); // Releases the resource
	localAudioTrack.stop(); // stops audio track
	localAudioTrack.close(); // Releases the resource
	client.remoteUsers.forEach(user => {
	if (user.hasVideo) {
	removeVideoContainer(user.uid) // Clean up DOM
	}
	client.unsubscribe(user); // unsubscribe from the user
	});
	client.removeAllListeners(); // Clean up the client object to avoid memory leaks
	stopBtn.disabled = true;
	}
	}

view raw script.js hosted with ❤ by GitHub

Adding Event Listeners

To display the remote users in the channel and to handle the view appropriately when somebody enters and exits the video call, we’ll set up event listeners and handlers:

	// Set up event listeners for remote users publishing or unpublishing tracks
	client.on("user-published", async (user, mediaType) => {
	await client.subscribe(user, mediaType); // subscribe when a user publishes
	if (mediaType === "video") {
	addVideoContainer(String(user.uid)) // uses helper method to add a container for the videoTrack
	user.videoTrack.play(String(user.uid));
	}
	if (mediaType === "audio") {
	user.audioTrack.play(); // audio does not need a DOM element
	}
	});
	client.on("user-unpublished", async (user, mediaType) => {
	if (mediaType === "video") {
	removeVideoContainer(user.uid) // removes the injected container
	}
	});

view raw script.js hosted with ❤ by GitHub

Joining a Channel

Now we’re ready to join a channel by using the client.join method:

const _uid = await client.join(appId, channelId, token, null);

view raw script.js hosted with ❤ by GitHub

If you have the app certificate enabled in your project, you have to generate a temporary token and pass it into the HTML form. If the app certificate is disabled, you can leave the token field blank.

For production environments:

Note:This guide does not implement token authentication, which is recommended for all RTE apps running in production environments. For more information about token-based authentication in the Agora platform, see this guide: https://bit.ly/3sNiFRs

We will allow Agora to dynamically assign a user ID for each user who joins in this demo, so pass in null for the UID parameter.

Publishing Local Tracks into the Channel

Now it’s time to publish our video feed on the channel:

await client.publish([localAudioTrack, localVideoTrack]);

view raw script.js hosted with ❤ by GitHub

Testing the project

Run the project by double-clicking the index.html. Make sure you have the latest version of chrome for testing the project.

Conclusion

Shazam! Now we can conduct a successful video call in our application.

Note: When you try to deploy this web app (or any other that uses the Agora SDK), make sure the server has an SSL certificate (HTTPS connection).

The codebase for this tutorial is available on GitHub.

Other Resources

For more information about building applications using Agora SDKs, take a look at Agora Video Call Quickstart Guide and Agora API Reference.

I also invite you to join the Agora Developer Slack community.

Learn more about Agora's video and voice solutions

Ready to chat through your real-time video and voice needs? We're here to help! Current Twilio customers get up to 2 months FREE.

Complete the form, and one of our experts will be in touch.

FIRST NAME:*

LAST NAME:*

EMAIL ADDRESS:*

COMPANY:*

COUNTRY:*

Try Agora for Free

Try for Free

App Builder

유연한 강의실

SDK 다운로드

지원 계획 및 가격

Add Video Calling in Your Web App Using the Agora Web NG SDK

Prerequisites

Project Setup

Building index.html

Building styles.css

Building the Video calling client

The architecture of an Agora Video Call

Creating a Client

Creating Local Media Tracks and Initializing

Adding Event Listeners

Joining a Channel

Publishing Local Tracks into the Channel

Testing the project

Conclusion

Other Resources

Learn more about Agora's video and voice solutions

Try Agora for Free