Build a Video conferencing tool using Angular and agora

In this blog, I will talk about how to make a real-time communication app within 1 hour using agora packages. It can be implemented using two packages. One is used to send/receive the messages and the other is to send/receive audio or video of the user. I will walk you through all the things step by step. For sending messages we use the RTM package and for audio/video we use the rtc-sdk-ng agora package.

This topic is important because as we know people are preferring an online meeting rather than a physical meeting. With this tutorial, companies can make their portal to handle meetings. I have implemented this using an angular framework which is one of the top front end frameworks.

I have implemented the basic call in this tutorial. Used many functions and events of agora to connect to the server. From token generation to connecting remote users. I have used the rtc SDK ng package.

The feature we are going to add to this app are-

Users can join the call with its audio/video.

Users can enter the name before entering the call.

On the start call, button click the User can join the call.

Prerequisites

Angular 2+ knowledge

Typescript

Node.js command

Agora webrtc SDK ng package

agora tokens

Agora RTM package

agora account- You need to add your project AppID from the Agora console and for that, you need to create an Agora account.

How to get started with Agora

Project Setup

Install Node and run the below commands after that

>npm install -g @angular/cli

>ng new agora-app

>cd agora-app

>ng serve

Now you need to install agora dependencies and for that run, the below commands in your terminal.

>npm i agora-rtc-sdk-ng

>npm i agora-rtm-sdk

Before deep-diving into how to Build a video app., we have to learn more about the agora packages.

agora-rtm-sdk package-

With this library, we can implement RTM(real-time messaging). It is used for communication or instant messaging. For signalling requirements we use RTM. With this, we can also find out the number of audience members on a broadcast channel. agora RTM SDK is used to send signals.

agora web sdk Ng package-

Agora Web-SDK-NG is a full-featured SDK to implement streaming. It is also an updated version of agora rtc sdk. ng package is completely different from agora-rtc-sdk. If you migrate from rtc sdk to sdk ng, you need to put lots of effort to achieve this. agora rtc sdk library is not preferable to use.

The main update in the new version is that they replaced the Stream object with the LocalTrack and RemoteTrack objects for controlling the media stream.

ngx-agora

It is an enhanced implementation of the angular-agora-rtc package. These are the libraries that are not in much use nowadays.

Setup-

You can easily set up these packages in your project. For real-time communication, agora is best to fulfil your requirements. It provides full customization. As we know virtual event is a trendy market right now. Agora SDK is best to create a virtual event platform. Agora is good at live engagement and interaction. They specialize in live video, audio, and broadcasting. Built using SD-RTN. They own the network and can provide the flexibility and support that no other provider gives.

Now let’s see what files, UI, and code we need to implement this using angular.

File structure-

To create a video call app The core things that we require are 3 services and 1 component.

services name-

API service (HTTP request)

stream service (rtc)

messaging service (rtm)

The component is to display the UI of joined users.

I will give you all code in the end for your reference.

UI Part-

create an input field so that the user can enter the name before joining the call and it is also used to show the name to another user.

Create four buttons Join, Leave, send messages in the channel, send 1–1 message.

containers to show videos of users.

Functionality Part

The first thing is to Create routes so that multiple users can join the call. As we know to join a call we need a link so that users can join the call.

create a route like that below so that you can open links in two tabs.

http://localhost:4200/user/1

http://localhost:4200/user/2

Agora rtc sdk usage to handle audio or video –

To start a call, you need to create a client that provides functions to connect your system to agora servers. After this call join method, you have to create an instance of local tracks or a media stream. A media stream consists of an audio and video track. This package controls the stream by operating the tracks. It is built using webRTC.

With this, you need to create a local audio-video stream to send to the remote user. If we want to display the stream on our screen then pass the DOM element id where you want to show the video in the HTML template in the play method.

Here we have to maintain a remote user ids list so that we can track easily who has joined the channel. AgoraRTCClient object is the main utility/service that provides various functions to join a call, publish local audio and video tracks etc.

LocalTrack and RemoteTrack objects- provides methods for controlling audio, video, basically playback control.

In this library, two types of client roles are present- host and audience.

All users are hosted by default. When the user publishes a stream then events start work. It is important to declare a role if you are doing live broadcasting. call the setClientRole method to set the user role as host before calling publish method.

If the user role is the audience it does not mean that it publishes the data.

The package does not automatically set the user role as host before calling publish method. you need to set the client role host before calling this method.

Note: If the stream is published, they automatically become hosts, if it is unpublished, they automatically become an audience.

Code files walkthrough-

We use it to stream and message services files for storing variables, and creating rtc and RTM clients of the library. make sure to import packages in your stream and message service so that you will do the channel initialization or other kinds of stuff. In the streaming service, we are going to handle how we can play the video and audio of users. In the message service, we handle how to send messages and set user names.

In-stream service, import agora-rtc-sdk-ng

import AgoraRTC from “agora-rtc-sdk-ng”;

In component what we need to do-

First of all, you need to ensure that the channel input field is not empty.

After this check, you need to create a client using create client (it is to create a local client object with your appID).

rtc.client = AgoraRTC.createClient({ mode: “rtc”, codec: “h264” });

you can refer more to AgoraRTC basic processes and objects in the bottom link, I will be posting a reference link for you.

After all this, publish the local audio and video tracks to the channel using

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

Here, I have used the async-await method to handle the Join and Leave button event.

Now, you have successfully created audio and video tracks and joined the channel. Now when a remote user publishes media tracks, the SDK triggers client.on(“user-published”), in which you can get an AgoraRTCRemoteUser object. you need to listen for this event with client.on and call AgoraRTCClient.subscribe in the callback to subscribe to this remote user.

To automatically subscribe to the remote user who publishes media tracks, and plays the media tracks, we add the following code to listen for the client.on(“user-published”).

When the remote user unpublished a media track or leaves the channel, the SDK triggers client.on(“user-unpublished”).

You have handled when someone leaves the channel. For that, you had created a Leave button earlier and also on this we added a Click event and called the rtmclientChannelLogout method.

we have successfully created a simple video calling. you can feel free to change the styles and add more features like Image enhancement, etc.

Check the Github repo for complete code.

Testing Video App-

Run the app

Open these links-

http://localhost:4200/user/1

http://localhost:4200/user/2

enter name

Click on the join now button to connect the call

check my GitHub repository for the source code.

Other important Resources

How to build a Video App using Angular and Agora RTC – LD Talent Blog
In this blog, I will talk about how to make a real-time communication app using the agora package. It can be…blog.learningdollars.com

Please clap it, share it and follow me for more updates. Leave a comment below, and let me know what you think!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s