Angular Video Conferencing with Agora.io
Get up and running in less than 10 minutes with the ngx-agora library.
ngx-agora — the open source Angular library for Agora.io.
Agora.io docs — Cross 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.
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:
- Create a new project (I’ll call mine
- Navigate to the project management tab and locate your new project
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.
At the prompt, paste and submit the APP ID from the previous step — this will be used during the automatic integration.
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
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.
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:
rtc— free-for-all video call, where each participant can talk freely
live— broadcast format, where participants each have a set role of
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
clientis created, otherwise events may fire off before you’re listening for them.
NgxAgoraServiceautomatically initializes the
client, using the
AppIdprovided in the
app.module.tsimport of the library, the client after creation, but the
createClientmethod provides the ability to override this
initcall 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.
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
app.component.ts, create an A/V stream with a call to
createStream function. This is where you tell Agora.io’s SDK what kind of stream you want to create, whether it has
screen, and what you want to name it. As mentioned in the documentation, make sure not to include
true at the same time.
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
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:
- A local A/V stream, connected to our local video
clientobject with event listeners, ready to react to core events
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
publish methods inside the success callback for
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
joinmethod, so pay attention that each
numberconsistently, for all members in your call.
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.
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.