Learn Azure Communication Services Day 7 – Joining a Group Call
This blog post is part of a series called “Learn ACS“, all about Microsoft Azure Communication Services. The series covers a high-level overview of capabilities and considerations, then dives into the development detail of using ACS in your application. Find the rest of the posts in the series at learnACS.dev.
So far we’ve looked at making and receiving calls between ACS clients. However, this is has been done purely in a 1-2-1 (or peer-to-peer) manner. Today, however, we’re going to look at Group Calling.
Joining a group call is technically very similar to joining a peer-to-peer call and uses all the same library objects (such as CallAgent and Call). However, the destination is different because instead of specifying the ID of an individual ACS user we need to specify a meeting place.
Groups in Azure Communication Services are identified with Guids. These are 128-bit (32 characters) long unique strings. To join a Group, specify its Guid when using the CallAgent.join method.
But how do you get the Guid, and make the Group? Here’s the thing… you don’t need to. If you specify a Group ID that doesn’t exist, ACS will create the Group for you. Anyone else who then uses that same Guid to join will end up in the same group space. This makes it much simpler to manage set up and management of group spaces because the ID can either be deferred until the first person joined, or handled through an existing system, or even calculated independently by each client.
We’re going to use a similar code sample to previous days and change it so that it joins group calls. If you’re reading this and haven’t previously read any of the previous blog posts then you might want to review how we create and setup the Node application.
A quick note on the sample code: Azure Communication Services uses React components to abstract functionality. However, you’ll see in these samples that although my samples are React apps, I’m not laying them out as true React apps or including any of the other artefacts you would normally associate with a React application.
That’s intentional so that anyone who is not yet familiar with React applications but who does understand JavaScript can understand and copy what’s happening. Remember: this is sample code and when building out your own application you should follow all the usual guidance and best practice: these samples are deliberately minimal in order to showcase the ACS content.
Adding our code
Follow the Day 5 steps to create a new Node application in a new folder, then add the following code. Similar to the previous posts, I’ll provide the complete code sample first so that you can get it running, and then talk through how it works.
Add this to your index.html file:
Add this to your client.js file. Remember to set the Azure Function URL to issue your token:
Remember to click Save to ensure this change takes effect.
Let’s test it out!
Make sure both index.html and client.js files are saved, then use this command-line command to build and run your application.
npx webpack-dev-server --entry ./client.js --output bundle.js --debug --devtool inline-source-map
If there are any compile errors then you’ll see them in the command line, otherwise, open a web browser to localhost:8080 and you should see the sample code, ready for you to specify the Guid of a Group Room to join (or create if it doesn’t already exist).
If you need to generate a Guid then you can use an online generator to make one for you.
If you don’t specify a valid Guid then the call won’t connect, and you’ll see the following errors shown in the Console:
- Call end reason=BadRequest, code=400, subCode=0
- [CallClient] Failed to start the call
If you see this, make sure you are definitely providing a valid Guid object as the groupId value.
What’s the code doing?
If you’ve already been through the Day 5 code then this will look familiar. The key difference is lines 28 and 29. Notice how the property name of the context array is different for group calls compared to peer-to-peer calls. Other than that though the only changes are around the UI. All the same methods and events surrounding the call remain the same for group calling as they are for peer-to-peer.
As the name suggests, group calling offers the possibility of multiple people all in the same group space together. When this happens, knowing which participants are in the room, who is leaving and joining, and who is speaking all become a lot more important than for peer-to-peer calls. We’ll cover all these in future blog posts.
Today we joined a new or existing Group Call via WebRTC. Links for all blog posts can be found at learnACS.dev. You can also subscribe to my YouTube channel for videos about ACS (and much more!).
Written by Tom Morgan
Tom is a Microsoft Teams Platform developer and Microsoft MVP who has been blogging for over a decade. Find out more.
Related posts:
Learn Azure Communication Services Day 4 – ACS vs Microsoft Teams: the discussion
With Teams Interop for Azure Communication Services, developers can finally create native Web and Mobile experiences
Learn Azure Communication Services Day 5 – Making a peer-to-peer VoIP WebRTC call
Learn Azure Communication Services Day 6 – Receiving a peer-to-peer VoIP WebRTC call
Learn Azure Communication Services Day 1 – What is Azure Communication Services (ACS), an Introduction
Would love to see something on Recording group calls. I’m at wits end. Trying to start a recording and it requires a backURI, whatever the heck that is. If I throw just any url in it, it fails.