Angular Video Conferencing with Agora.io

Get up and running in less than 10 minutes with the ngx-agora library.

Drew Thompson
Jun 7 · 6 min read

ngx-agorathe open source Angular library for Agora.io.

Agora.io docsCross platform WebRTC with an easy-to-use API

Create an Angular App

Let’s start off by creating, with the Angular CLI, a new Angular application that we’ll then integrate the Agora SDK into.

If you haven’t used the Angular CLI, it’s a powerful tool for generating everything Angular. You can install it globally using npm with the command npm i -g @angular/cli .

We’re going to call our new application angular-video by running the command ng new angular-video. Run through the awesome terminal prompts, setting up the project the way you like — for this example I’m going to say no to routing and set the default project stylesheet format to scss (because who wants vanilla css anymore, right?).

This should generate all the files needed to run the typical Angular demo, and running ng serve -o in the new project folder should open up everyone’s favorite app.

Default Angular App

Now that we have a blank project, let’s step back and get our Agora.io account ready for testing! Our current goal is to create a project and copy its unique APP ID, to be used in our app.

Create an Agora.io Project

Head over to their signup page and create a free account — heads up, they currently require account verification via a text message, so get your phone out. Once you’re past this step and into their dashboard UI, here are the steps you need to do:

UI is subject to change

3. Copy the project’s APP ID (not shown) to your clipboard, you’ll be needing this shortly. Alright, now that you have a unique project ID, let’s head back to our Angular project and to the terminal.

Integrate the ngx-agora Library

Let’s enter the command ng add ngx-agora, which will run the library’s Angular schematics and help integrate it into your project.

Let’s make this easy

At the prompt, paste and submit the APP ID from the previous step — this will be used during the automatic integration.

Let’s go with the latest version!

At the time of publication, version 2.6.1 is the latest Agora SDK release for the web, but feel free to select a different version if it fits your use case. I’m going to select the latest release here.

At this point, your project should have been updated by the schematics, using the APP ID you provided to set an environment variable and add an import of NgxAgoraModule to your app.module.

Now we’re ready for development!

Start Using Agora.io’s API

Now we’re all set to start using Agora.io’s SDK and get video chat working! Head to your app.component.ts and inject the NgxAgoraService into your component constructor. Let’s also implement OnInit and create a public list to keep track of remote user IDs.

DIY DI — now we can use the Agora API

The next step is to create the client object that provides functions to connect your computer to the Agora servers and, ultimately, other peoples’ computers.

At this stage, you can provide the type of conference call that you’ll be connecting. Agora currently supports two types:

We’re going to focus on rtc in this case, so use the createClient method provided by the NgxAgoraService to set a local AgoraClient object that we’ll use to interact with the Agora.io SDK. Next, assign to the client the event handlers necessary to respond to important events in the WebRTC lifecycle.

It’s important to assign these handlers immediately after the client is created, otherwise events may fire off before you’re listening for them.

Initialized the client and its event handlers

The NgxAgoraService automatically initializes the client, using the AppId provided in the app.module.ts import of the library, the client after creation, but the createClient method provides the ability to override this init call with your own.

Set Up the Template

We need to create a local A/V stream to send to a remote user and, if we want to display that stream on our screen, we need to connect it to our HTML template.

We’ll add some light styling just to be fancy 💖

Agora.io’s SDK looks for an HTMLElement with a specified id to play the stream in, so let’s place a <div> inside our template, binding its id to a variable, localCallId, in our component.

While you typically only have one local A/V stream, you can interact with multiple remote streams, each of which you can perform the same process on to get it displayed in the client.

Now that we have the template ready, let’s go about creating our local stream and publishing it to a server channel.

Create and Connect Your Local Stream

Back in app.component.ts, create an A/V stream with a call to NgxAgoraService’s createStream function. This is where you tell Agora.io’s SDK what kind of stream you want to create, whether it has audio, video, screen, and what you want to name it. As mentioned in the documentation, make sure not to include video and screen as true at the same time.

Create a local stream and play it in the browser.

After you create the stream, assigning it to the private localStream variable, you’ll want to assign event handlers (like we did for the client) and initialize it—this is where the Agora.io SDK will ask for device access permissions.

The SDK provides callbacks here, in the stream’s init function, as well as separate events that can be listened to, where you can respond to users denying media access. Once the local stream has initialized successfully, we direct the SDK, via the play function, to connect our stream’s output to the div whose id we bound to localCallId. At this point, you should be able to see the output of your camera in your running app.

Join a Call and Publish Your Stream

We’re at the point where we have:

It’s time to join a chat room and publish our stream. Before we publish our local A/V stream to a call, we need to wait for it to initialize. The easiest way to guarantee we’re ready to publish is to invoke our calls to the join and publish methods inside the success callback for localStream.init.

Let’s join an arbitrary chat room, foo-bar, which will automatically initialize under our Agora.io project when the first user joins.

Agora.io has some guidelines on the join method, so pay attention that each streamID is a string or number consistently, for all members in your call.

Initialize your local stream, join a call, then publish to it.

Start a Call with Yourself

At this point, we’re ready to open localhost:4200 in two tabs, one in incognito mode, and see the results. We should expect the local video to appear, smaller, in the lower-right and the remote video to be a full-page background behind it.

It’s you! Looking healthy! 😄

You can see how the local and remote images mirror each other — this should be expected in calls with yourself.

In tests like this (with two local tabs), sometimes the Agora.io SDK will not mirror video streams. If this happens refresh the page and things should work properly.


You can view the entire source for this demo at its repository on Github.

The Startup

Medium's largest active publication, followed by +538K people. Follow to join our community.

Drew Thompson

Written by

Learning everything I can about Angular.

The Startup

Medium's largest active publication, followed by +538K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade