Learn Azure Communication Services Day 12 – Showing Screen Share Content

I don’t make any apologies for the fact that today’s sample is really straightforward! It’s straightforward thanks to the abstraction that Azure Communication Services gives you when performing complex tasks like screen sharing in WebRTC. Previously this would have required plenty of work and maybe also a plugin to work properly. Now it’s all built into the browser and you can add it to your solution with just a single line of code!

I’ve taken the Day 8 sample for joining a Teams meeting and added two buttons to it. Each of those buttons has a single line of code associated with the click handler. And, just like that, screen sharing is enabled!

Here’s the code: 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

Similar to previous days, this one is relatively straightforward to test out. 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

Join a Teams meeting with the Teams client, then take the meeting join URL and join via the sample code. Once there, click the start screensharing button. You will see that the browser will pop up an in-built sharing selection that lets the user choose what to share. You don’t have any control over what this looks like – it’s part of the browser:

That’s it. From the Teams client, you should now be able to see that the ACS user is sharing screen content.

What’s the code doing?

There’s almost no need for this section today. The important lines to be aware of are lines 54 and 58 – this where the two methods on the Call object are to start and stop screen sharing.

Today, we took our existing ACS code and really easily added the ability to add screen sharing. Tomorrow we’re going to look at managing the participant list. 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 8 – Microsoft Teams Meeting Interop Learn Azure Communication Services Day 11 – Changing Audio & Video Devices Learn Azure Communication Services Day 10 – Showing and Hiding Video 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