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 APIThe 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 freelylive — broadcast format, where participants each have a set role of host or audienceWe’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 handlersThe 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 TemplateWe 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 StreamBack 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 StreamWe’re at the point where we have:A local A/V stream, connected to our local video <div>A client object with event listeners, ready to react to core eventsIt’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 YourselfAt 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.
.