Connecting to Multiple Channels with the Agora Web SDK

When building real-time engagement apps, you might find the need to separate users into groups while maintaining a communication channel with each of them. Using the Agora Web SDK, users can now join multiple channels at the same time.

This can be used for a multitude of use cases. For example, you can choose to host a live session to an audience using the first channel while being connected to a second channel serving as the back stage for information or updates during your session.

We’ll be using the Agora Web NG SDK for our example.

What We’re Building

• We’ll create a website with options to join two separate channels.
• The first channel will be used to join a video call where we’ll be streaming our video as well as receiving videos from other users on the channel.
• The second channel is used to receive video streams from all the users on that channel. We will not transmit our video to the second channel for now, but it’s easy to do so if you need to.
• The two channels are separate: users on channel 1 and channel 2 don’t see each other. We can extend this functionality to join as many channels as required.

Signing Up with Agora

Go to https://console.agora.io/ to create an account and log in to the dashboard. You can follow this guide for reference: https://www.agora.io/en/blog/how-to-get-started-with-agora

Create a project and retrieve the App ID. We use the App ID to authenticate our requests to the SDK while building the application. If you have enabled the app certificate, retrieve the temporary token for two channels. We’ll use them to test our app later.

Downloading the Source

If you want to try out the app, you can use this demo link. The code is open source and available on GitHub.

Note: Token authentication 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://docs.agora.io/en/Video/token?platform=All%20Platforms

Structure of the Demo

This is the structure of the website:

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

index.html

You can download the latest version of the Agora Web SDK from the Agora Downloads page. Or you can use the CDN version instead like we’re using for this demo.

There is a container with the ID me that is supposed to contain the video stream of the local user (you). There are two containers with the IDs remote-container1 and remote-container2 to render the video feeds of the other remote users in the first and second channels.

Architecture of an Agora Video Call

Channels are similar to rooms, and every App ID can create multiple channels. Each client can be connected to only one channel at a time, so we use two clients (clientOne and clientTwo) to connect to two channels.

script.js

Setting Up Our First Channel: Initializing a Client and Media Tracks

First, we need to create a client object by calling the AgoraRTC.createClient method. Pass in the parameters to set the codec (vp8) and the channel mode (live). We set the client role to host, which lets us both receive and transmit video streams.

We get the required inputs from the form. Next, we create audio and video track objects for the local user by calling the createMicrophoneAndCameraTracks method. We can now play the local video in the browser (the me container). We call the initStopOne function to initialize our stop button and do the cleanup when the call ends (defined below).

Adding Event Listeners and Joining the Channel

To display the videos from the remote users in the channel and to manage the view when users enter and exit the video call, we’ll set up event listeners and handlers. We use the addVideoContainer and removeVideoContainer helper functions to add and remove divs from the DOM (defined below).

Now we’re ready to join a channel by using the client.join method. We’ll let the SDK dynamically assign a user ID for each user, so we pass in null for the UID parameter. Once we’ve joined the channel, we can publish our video feed to the channel.

Setting Up Our Second Channel

We set up the code for our second channel just as we did in the first channel. The only difference is that we set the client role to audience (to only receive video feeds), and we don’t have to create or publish streams for our client.

Cleanup

For the first channel , on stopping the call we perform the cleanup for our video tracks to free up the hardware resource. We remove all the videos from the DOM, and we unsubscribe the remote feeds. We remove all the event listeners from the client to avoid any memory leaks. For the second channel, we do the same thing (leaving out the video cleanup).

Helper Functions

We define the helper function that we used to manipulate the DOM before:

style.css

Finally, let’s add some basic styling to our app:

Note: When you try to deploy this web app (or any other that uses the Agora SDK), make sure the server has an SSL certificate (HTTPS connection). If your Agora project is using secured mode (with an app certificate), generate a temporary token and pass it into the HTML form. If you’re using testing mode (just an App ID), you can leave the token blank.

Conclusion

That’s how we can build a video call app that can connect to two channels simultaneously. You can refer to the API Reference to see methods that can help you quickly add many features like muting the mic, setting audio profiles, and audio mixing or learn how to combine video streams using the Agora web SDK.