Learn Azure Communication Services Day 9 – Muting and Unmuting

In this blog post, we’re going to explore the capabilities of the Azure Communication Services SDK a little bit by seeing how easy it is to add call functionality, using muting and un-muting as an example. We’re going to use our Day 5 sample of making a P2P call as an example, although this code will work with any of the other samples.

I’m going to assume that you have already followed all of the steps in Day 5 to get the sample code up and running. Replace the contents of index.html and client.js with these versions. We’ll talk about how they are different once everything is up and running. Don’t forget: on Line 18, replace the placeholder text with the full URL of your Azure Function created in Day 3, including the code parameter:

index.html

client.js

Testing it out

To really test this out, you could implement the Day 6 sample to receive a call, or use the Day 8 sample to join a Teams Meeting and add this additional functionality in. Failing either of those options, you can examine the network traffic being sent to know that your mute/unmute calls are being correctly managed.

As before, use a command-line to run this command then browse to the sample application in your browser (usually http://localhost:8080):

npx webpack-dev-server --entry ./client.js --output bundle.js --debug --devtool inline-source-map

Connect to either another ACS endpoint (or a Teams meeting if you’re using that code), or the test service:

Once the call has connected, play with the mute/unmute buttons to make sure they are working.

If you look at a network trace, you’ll also see that each time you press one of the buttons a new message is posted to the Azure Communication Services service, with a UpdateEndpointState call. In the body you’ll also see the new endpointState with the updated isMuted value:

What’s the code doing?

If you look at the code behind the two new buttons, you’ll see that it’s really minimal – just a simple call to mute and unmute, with no additional parameters needed. In some ways, this simplicity doesn’t justify a whole day to itself – but I wanted to highlight how easy the Azure Communication Services SDK makes dealing with call functions.

There is also a property on the Call object called isMicrophoneMuted which returns a boolean for the current mute state of the local participant. This can be useful in building up toggle buttons or displaying mute state. Be aware though, that the mute() and unmute() methods used above both return promises so make sure you wait for them before you read the property again, otherwise you’ll get an old value. There isn’t an event fired when the local isMicrophoneMuted property changes.

Today, we took our existing ACS code and quickly added mute/unmute buttons. Tomorrow we’re going to look at adding video. 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.

---

Buy the book: Building and Developing Apps & Bots for Microsoft Teams. Now available to purchase online with free updates.

Related posts:

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 Learn Azure Communication Services Day 3 – Let’s Code! Creating a back-end Token Issuing Function in Azure Functions Learn Azure Communication Services Day 2 – How does ACS Work? (high-level) Learn Azure Communication Services Day 7 – Joining a Group Call