Microsoft 365 Community Microsoft Teams, 10 Apr 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Integrate Azure Communication Services Calling into a React App

Description

In this 17-minute developer focused demo, Dan Wahlin focuses viewers on the front-end and on web components. Start by installing front-end app packages - azure/communication-common and azure/communication-react. Define an ACS user identity, and token and Teams meeting link. Create an ACS credential, callAadapterArgs. and the ACS callAdapter that’s passed to the CallComposite component – the wrapper around various functionality that enables audio/video calling to happen. This is part 3 in a 6-part series.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on February 21 2023.

Demo Presenter
• Dan Wahlin (Microsoft) | @DanWahlin

Supporting materials
• Repo - Microsoft Cloud Integrations (code samples, videos, documentation) | https://github.com/microsoft/microsoftcloud
• Tutorial - Audio/Video Calling from a Custom App into a Teams Meeting | aka.ms/mscloud-acs-teams-tutorial
• Tools – Azure Communication Services UI Library | aka.ms/acs-ui-library
• Documentation - What is Azure Communication Services? | https://learn.microsoft.com/azure/communication-services/overview

ACS Series Demos
• Demo 2 – Create an Azure Communication Services Resource – Dan Wahlin (Microsoft) | @DanWahlin (2/14)
• Demo 1 – Getting Started with Azure Communication Services, Microsoft Graph, and Microsoft Teams – Dan Wahlin (Microsoft) | @DanWahlin (2/7)
• Demo 0 – Introduction to Azure Communication Services – Tomas Chladek (Microsoft) | @tomaschladek2 (1/31)

A

A

For those that were here last two weeks, this is actually the third week in a row that bass hasn't kicked me out yet this maybe this will be the final one but uh I'm here to talk with you again about integrated Services across the Microsoft cloud and specifically how we can enhance user collaboration and what we've been doing is uh building up a series that we basically take 15 minutes and talk about specific topics and then uh today we're going to focus more on the front end side, so we'll get to that in just a moment.

A

So for those that don't know me, my name is Dan walline, I'm, A, Cloud Advocate at Microsoft, and what I'm going to be showing you I've, also been working with my colleague, aicha Bosch uh Aisha will actually be joining us next week to talk about the kind of next 15-minute chunk of what we're going to cover here.

A

So what we've done is uh two weeks ago I guess we introduced audio video calling and how that could be used to call into a team's uh meeting actually and then last week I showed how we could set up an ACS resource. Some of the things you can do there, such as getting a token and user identity.

A

If you weren't here, don't worry I'm going to review that again today, but today is finally, let's see some code Dan, because the last two sessions were all about showing the demo talking about the Technologies involved and those type of things, but today we're actually going to jump into the front end now I'm going to be covering react, but the technology we're going to be using with ACS Azure communication. Services is actually web components, so it runs anywhere. The web runs uh now next week.

A

Aicha is going to be joining us to talk about how we can dynamically create the teams meeting side of this, and so she'll be talking about Azure functions uh with Microsoft graph, and then she'll also be talking about how we can use Azure functions to dynamically.

A

Do some of the things I'm going to show you today, I'm actually going to hard code them today and then later she'll show you how we can make this dynamic and then I'll be back to wrap things up in a couple few weeks from now and we're going to talk about some deployment options, and so we have a lot of good stuff kind of an end-to-end view of this uh approach here, all right.

A

So let's talk about the front inside and how you would actually get started doing this so first off for those that haven't seen this here's kind of what we're talking about. We have a customer app and let's say the customer goes here and they would like to talk to a customer service agent or someone that's going to help them. You know put together Ikea furniture who knows so.

A

The customer service agent is using teams we're going to assume they can then join a meeting that would be dynamically set up and as they do, that here's aicha, who will be here with us next week and now she can admit the guest, which is the customer from the lobby and give the video a sec it'll uh sync up here, but there's mini me uh on camera.

A

Talking to aicha, and now you can see kind of from the customer Viewpoint what we would see now lots of good use cases for this uh I shared a story.

A

I think it was last week actually I had some air conditioning folks to fix a problem at our house and they were using a tablet for all their app stuff, but then, when they would call back to headquarters for parts and things like that, they would use the phone and that's like perfect use case I mean they may not even need the video, but also if they do need the video. They could actually show the AC unit and talk to headquarters while they're in the actual app where they have to input the information.

A

Instead of doing this, uh so lots of use cases here but I'll, let you kind of come up with those. What we're going to talk about, though, is how we can integrate this into the front inside again I'm going to focus on react, but this can run anywhere the web runs.

A

So let me uh first kind of walk you through what are the major like Lego blocks? If you will I'm a big fan of Lego blocks, my kids used to do all the we still have a bunch of Star Wars sets set up. Actually um I, don't know when those are gonna come down. Maybe my wife's saving them for the you know, grandkids someday I, don't know but anyway. The first thing we're gonna have to do is install some packages all right, pretty normal.

A

We have a front-end app we're going to be using typescript in this case, so you'll notice. There's this Azure communication. Common and Azure communication react all right. That's actually what we're going to be using to uh do this now I'm going to talk through these symbols. We call them the main one that does the audio video calling capability is right here. It's called call composite and we'll talk about that in just a moment. Actually, so that's kind of Step One, pretty normal, just get the stuff. We need there's the Lego blocks.

A

Now we need to put the Lego blocks together to actually do something. So one of the first things we have to do is ACS requires us to have a token and a user identity. You're going to see both those here now, first off you'll notice that we have this use memo now, if you're not familiar with this, this does what's called memorization kind of a caching technique to ensure that we only create this Azure communication. Token credential right when the app loads just one time and then from there.

A

uh The token is only set once therefore, we just get one Azure communication, token credential. If you don't do that, you can get weird results. I might have gone through that myself and done it the wrong way, the first time. So what this will do, though, is it returns a credential, so that's kind of step one. We need to convert this token into a credential that we can actually use in ACS all right now. The next thing we need is think about a customer calling into a customer service agent.

A

We probably need the name for the customer or at least guest, which is what we're going to do. um We probably need their user identity which we're going to talk about. We probably need the teams URL. If we're going to call into a teams meeting. We need some way to know how to get into that meeting, and then we probably need the token as well.

A

So what we're going to do for that is create, what's called some call, adapter arcs now again we're going to do some memoization here, but all we're going to do is say all right. Once we have a user ID, a credential, a display name and the team's meeting link available, because some of this is going to be retrieved asynchronously, then we're going to return. This object, literal, just a basic JavaScript object and notice. It has the user ID the display name, the credential and then the locator notice.

A

That is the team's meeting link all right, and this is one of those things you do at once and then from then on. If you had different apps that needed it, you could either use like copilot, which is my preference. uh If you haven't tried copilot with vs code, it's amazing, but normally this is something I mean you do it once and you can reuse it in many places across apps. If you needed to so, we now have the token credential we've put that credential into an object. That also has some info about the user.

A

Now we need to package all this up into something that we can feed into the UI part and so what they provide and they being the ACs team. Is this use? Azure communication call adapter. This is a custom react hook. It's basically a custom function that you feed it. This call adapter arcs, it returns. This call adapter object and then we're going to use that, for now we can make the audio video call. We know about the user. We know about the token we know about the teams.

A

Meeting URL like we have everything we need, and this is the bulk of the code right here. It's not that much actually now, the last and probably most important piece is we want the UI.

A

Well, that's done through something called a call composite, and this is uh basically a set of web components that, if you think about putting together a video call, what would you need? Well, you need a way to start the call. So you need a button. You need a way to pick the camera. uh The mic things like that, if assuming it's audio video, all right so that'd be some drop downs. Probably you need something to render the the video all right.

A

So there's the video and then you probably have a toolbar, because you want to be able to hang up. uh You might want to share your screen. All those things we're used to in teams. You can actually do, and this call composite literally all it is- is a wrapper around these web components all right. So like streaming, the video it wraps that the button to start the call it has that as well, so think of it as kind of like uh you're. Putting all the Lego blocks together.

A

Call composite, is you know the I, don't know the add at from Star Wars, if you're not familiar with that, and now we can use that to render the UI okay now I wanted to go through that first because I'm, a big fan of let's kind of get people thinking and then we'll jump into the code and kind of review this and how it's actually used.

A

So with that, let me jump on over and what I have here is a single react file and you're going to notice. We have all those Imports right there right at the top, all right, so there's the call composite there's how we create the the token credential uh there's a type we're going to use and then some other helper functions here as well, so moving on down. If you break this down kind of into steps, the first steps are, we need an ACS user identity and token, and we need a teams meeting link.

A

Now you might notice. I have hard-coded those, and the reason is because iTunes starting next week is going to show how we can actually go in and dynamically get uh well so next week, she'll cover this part dynamically, getting the teams meeting URL with Microsoft graph, and then the following week will be about how to dynamically get the user identity and the token from ACS we're going to be using Azure functions for all that. Okay, so in this case, I've hard-coded it.

A

But you might wonder if you're new to this like, where did I get these things?

A

Well, if I come back over to the Azure portal, I've already created uh just a phenomenal name here, test dual lean: this is my ACS resource for this uh demo and this literally I covered it last week, but it literally you're looking like 30 to 60 seconds to set this up super easy, just go up to the search, type, Azure communication or just communication and then pick it and create it done now for development purposes, and this is something that, for those that have seen this last week, I'll show it again, but those that didn't I'm going to click right here, voice and video calling and what this will generate is a user identity and a token now I've already done that they're good for 24 hours, and so mine are good and I'm not going to attempt fate here by creating another one.

A

I should be able to do that by the way, but I'm not going to, but that's where I got them I literally, it writes them out I copied and pasted them uh back into right here. That's it now, they're only for development purposes. You would never use this for production. You would never hard code this for production, that's a given okay! So moving on down now that we have that what about the team's link? Well, that's just normal on that I set up a meeting here.

A

I uh I have a Microsoft 365 developer, tenant, uh aicha, I, actually added to that tenant. This is a fake version of it, and uh I actually can now join and when we click join, we can go into here, but we can also go into the meeting and get the link right. There. You've all seen that with teams- and that's all I did for that piece.

A

Okay, so moving on down the rest of this is what we just covered I'm going to take that token, okay, which is right here this guy I'm, going to convert that into an ACS credential. We're then going to create our call adapter args, and this is again just a matter of making an object. That has something ACS expects. This is in the docks that you wouldn't even need to memorize this, um but I'm going to create a user identity from the user ID. They have a little helper function to help with that.

A

The display name I hard coded in this case to guest, but if we had a logged in user, obviously we could get that logged in user's name. uh Credential, we've already seen that that's the token and then the locator there's the teams meeting now I do want to point out that you don't have to call into teams. If you haven't heard this before, ACS can actually call in from a custom app to another custom map. That's running ACS.

A

You can even do one to many type of calls right now we're doing teams but just kind of know that that's not the only way. All right now. I also want to point out when I first did this piece, I didn't actually write it I'm going to show you real, quick, create an ACS uh token, uh let's say credential, because that's actually what it is um using the token- and this is copilot and so I'm just going to tab, tab, tab and you're going to notice. This looks really close.

A

It's slightly different than what I did they return undefined I just did return, but that's copilot in action. If you haven't seen it before it's pretty cool so anyway, there's an example of that. So the next thing is once we have our adapter args we're going to feed those into this custom react hook that ACS provides if I go back up top you'll see it right. There same communication react, and now we get to the important part right here. The call composite now I'm going to have a links for all this at the end.

A

uh But one thing I want to point out is ACS has a really nice demo page where you can try this stuff out without without writing any code uh for those that were here last week. This is something I talked about, but I wanted to show because I know everybody can't make it every week. So I want to show it again.

A

So I'll have a link at the end to get to this, but if I come down to call composite you'll notice, I can join existing call and if I scroll on down here they'll actually have some of the stuff you saw like call adapter. They have some other things as well, but if we go to the very bottom here, 's another example of uh using the call adapter with the call composite now going back to the code. What we're going to do here is the call adapter, which is this little piece right here.

A

Remember that has the the user ID, the display name, the credential, the teams link and if we come on down we're now going to bind that into this call composite and the call composite again is what renders the UI for the college. So now it has everything it needs and we can actually do a call from here. So let's do that. This is a kind of a live version. So let me just refresh this. This is my local react, app running now again: I've hard-coded, the IDS and the tokens and stuff like that.

A

But we'll we'll learn later how to fix that. uh Let me do this camera here. Let me turn it on all right and now we're actually using I haven't called yet obviously, but we're actually using the token and all that stuff. So let me go ahead and start the call and then we'll wrap up here, we'll imagine that the customer service agent got a notification that a customer has a call. They joined the meeting, they admit them from the lobby and we should be in here in just a sec. There we go.

A

It takes the video just a sec to catch up, but hey here's from the Logitech camera and then I didn't share itches. Obviously, because I only have so many cameras set up, but if we turned on our mics we could talk and we can notice down here we can switch devices. We can see the people in the call we can even share screens all this was done through the call composite really cool. So all right.

A

So let me hang up on that and wrap up here, because Gary has some really good stuff and I don't want to eat into his time. So let's go back. So all the links and I'll paste these in the chat as soon as I get done here uh can be found here. The tutorial that walks you through building everything we're talking about throughout these uh sessions, we're doing uh over six weeks. You can actually get that to that tutorial today.

A

If you want to try this out call into teams or whatever um we also have some other samples, and this keeps growing and then the library I just showed you where you can demo stuff live. That's the ACs UI Library! You can go to this link right here. So with that, uh let me turn it back over and I think Gary's up next yeah.

B

Thank you very much Dan. That is an amazing demo, I'm totally looking forward to see what is going to do next week. Take it the next step further. So thanks very much for um for demoing that for us and walking us through um the process.

A

Foreign foreign.