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
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-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 (
clientTwo) to connect to two channels.
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
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.
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).
We define the helper function that we used to manipulate the DOM before:
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.
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.