Adding Video Calling in Your Web App Using the Agora Web SDK

Note: This guide uses v3.x of the Agora Web SDK.

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 3.x SDK.

Prerequisites

A recent version of Google Chrome
You can get started with Agora by following this guide and retrieving the App ID
Also retrieve the temporary token if you have enabled the app certificate
Agora Web SDK, which you can download here

Project Setup

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

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

Building index.html

The structure of the application is very straightforward.

You can download the latest version of the Agora Web SDK from Agora's Downloads page and integrate as has been done in this tutorial. Or you can use the CDN version by using this <script> tag instead:

<script src=”https://cdn.agora.io/sdk/release/AgoraRTCSDK-3.1.1.js></script>

	<!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>
	<button id="start">Start</button>

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

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

	</div>

	<script src="https://cdn.agora.io/sdk/release/AgoraRTCSDK-3.0.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: 0 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 style.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 in script.js:

	**
	* @name handleFail
	* @param err - error thrown by any function
	* @description Helper function to handle errors
	*/
	let handleFail = function(err){
	console.log("Error : ", err);
	};

	// Queries the container in which the remote feeds belong
	let remoteContainer= document.getElementById("remote-container");

	/**
	* @name addVideoStream
	* @param streamId
	* @description Helper function to add the video stream to "remote-container"
	*/
	function addVideoStream(streamId){
	let streamDiv=document.createElement("div"); // Create a new div for every stream
	streamDiv.id=streamId; // 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 removeVideoStream
	* @param evt - Remove event
	* @description Helper function to remove the video stream from "remote-container"
	*/
	function removeVideoStream (evt) {
	let stream = evt.stream;
	stream.stop();
	let remDiv=document.getElementById(stream.getId());
	remDiv.parentNode.removeChild(remDiv);

	console.log("Remote stream is removed " + stream.getId());
	}
	...

view raw script.js hosted with ❤ by GitHub

Architecture of an Agora Video Call

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

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

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

Users can join and leave a channel at will.

We’ll be implementing the methods listed in the diagram in 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 (vp8) and the channel mode (rtc):

let client = AgoraRTC.createClient({ mode: 'rtc', codec: 'vp8'});

Next, we initialize the method with the App ID that we obtained earlier:

client.init("<---Your AppId here--->",() => console.log("AgoraRTC client initialized") ,handleFail);

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

client.join(null, "any-channel", null, (uid)=>{
    // publish the video
}, handleFail);

This demo app will not require extra security to join a channel, so pass null for the Dynamic Key value.

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 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:

	...
	document.getElementById("start").onclick = function () {

	// Client Setup
	// Defines a client for RTC
	let client = AgoraRTC.createClient({
	mode: 'live',
	codec: "h264"
	});

	// Client Setup
	let appid = document.getElementById("app-id").value;
	let channelid="any-channel";
	let userid;

	// Defines a client for Real Time Communication
	client.init(appid,() => console.log("AgoraRTC client initialized") ,handleFail);

	// The client joins the channel
	client.join(null,channelid,String(Date.now()).substr(7), (uid)=>{

	var localStream = AgoraRTC.createStream({
	video: true,
	audio: false,
	});
	localStream.init(function(){
	localStream.play('me');
	client.publish(localStream); // Publish it to the channel
	});
	console.log(`App id : ${appid}\nChannel id : ${channelid}\nUser id : ${uid}`);

	},handleFail);
	...

view raw script.js hosted with ❤ by GitHub

Testing the Project

Run the project by double-clicking the index.html file. 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 web app 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.

And I 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

TEN

App Builder

Aula flexible

Descargar SDKs

Planes de soporte y precios