Microsoft 365 Community Community Demos, 14 Feb 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Create an Azure Communication Services Resource

Description

In this 20-minute developer focused demo, Dan Wahlin kicks off part 2 in the series - create an ACS resource, then select CallComposute template (from ACS UI Library) to Join Existing (Teams) Call. Set up Teams call, paste meeting link into template. In Azure, generate a User Access token and Identity and paste into template. Start call – make camera and sound selections. Try this no code (controls abstract the API surface) solution. Next week – custom React apps.

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

Demo Presenter
• Dan Wahlin (Microsoft) | @DanWahlin

Supporting materials
• Documentation - What is Azure Communication Services? | https://learn.microsoft.com/azure/communication-services/overview
• 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
• Repo - Microsoft Cloud Integrations (code samples, videos, documentation) | https://github.com/microsoft/microsoftcloud
• App Camp - Microsoft Cloud Integration Scenarios | aka.ms/microsoft-cloud
• Demo #1 – Getting Started with Azure Communication Services, Microsoft Graph, and Microsoft Teams – Dan Wahlin (Microsoft) | @DanWahlin

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

Foreign I'm excited to be back folks, we're going to talk more about Microsoft cloud and Azure communication services, and this is a series, as Vasa just mentioned, that we started last week. So even if you can't catch all these, there's going to be eight total I. Think sessions which I'll go through momentarily uh you'll still be able to get to the recordings, and you know they're only what each demo is like: 15 10 15 minutes. So it's a great way to quickly learn about things.

A

You could do that you might not have jumped into before and I think there's a ton of applicability in many scenarios to what we're going to talk about here. So my name is Dan walline I'm with the cloud advocacy group and what we're going to be talking about throughout this series. I've been working with my colleague who she will be joining us I'll, be here next week and then week after that, she'll join and she'll be doing a couple sessions as well. So as mentioned, this is kind of a multi-part series.

A

um We started off by talking about audio video calling from a custom app into a teams meeting and just really ran a demo I'm going to show you that again. So if you missed it no worries, but today we're going to focus more on the ACs side and how we can actually use that to get started.

A

And so, if you haven't heard of ACS Azure Communications services, this is literally using the same infrastructure that we're using right now with teams um and so we'll talk about how you can actually embed this type of functionality into your own apps and some of the scenarios um that you can do with that now, just as a quick review of what's coming um so I'll, be here next week as well for good or for bad again, um but I'm going to talk next week about you know we this week we're going to focus on how do you get started with it next week, we'll actually switch to an app it's going to be react app, but these are web components that we're going to be talking about later and you could use them anywhere.

A

The web runs um so we'll talk about that. Aicha will join us to talk about Azure functions and how we can dynamically use Microsoft graph there to set up a meeting for this type of scenario.

A

She'll also talk about Azure functions and giving tokens to ACS, because there is some user identity and a token you need and you're going to see that today actually and then I'll be back to wrap up on some deployment options to Azure.

A

So the nice thing with this series is, while we're going to have some Microsoft 365 we're going to have some Azure we're going to put it all together, though, and I'll give you a link at the end of the session on a tutorial that you can go through that's Hands-On, and so it's a great way to learn if you're interested all right. So in part, two today I'm Really Gonna, mostly jump into the Azure portal and then I'm gonna show you something called UI components and uh a nice little web page.

A

We have set up where you can actually try out what I'm going to demo today without any code. Actually, I'll show you what I mean here all right, so this is actually what we're going to look at building.

A

um So this app allows a customer to actually make a face-to-face call audio video call with uh customer service or some other scenario. uh Last time, I joked that I had an AC guy over and he needed to call back to headquarters, and this would work. So what will happen is you could have like a customer service rep? Who could join a call we're going to do that here? This is aicha and aicha now joined and then it'll go back to me, she's, going to admit me into the lobby notice.

A

uh She was in teams by the way or she is in teams right here and then I am just in a regular custom map. In fact, that's what I would see from the customer Viewpoint so very much like what we're doing right now again with teams, but you can actually do this yourself in any custom map that runs the web. So the general building blocks of this are the following: you'll notice that we have uh react there in the middle and again it could be any front-end app.

A

It could be uh JavaScript typescript, whatever you want to do, but we have Azure communication services and we're going to talk about that part today. It calls in Azure functions to integrate with setting up meetings and there's a couple ways. You can actually do that that we'll talk about later and then, of course we're calling into teams now with ACS you don't have to call into teams, you could actually have an app call another app.

A

So if you know Michelle was in the custom map and I'm in the custom map, we could actually talk one to one or you can even do one-to-many very neat type of setup, so that's kind of where we're at and then today I'm going to then Focus right in here. Let me go to the next slide here right there to the Azure communication, Services side and that'll get us to what we're going to do.

A

So with that. Let me show you how you would get started with this. So I'm left you'll see I, have the Azure portal no surprises there and then on the right. uh I have my Microsoft 365 developer, tenant going and I'm just logged in as a fake, a fake me actually up here, you'll see apparently I'm available, even though I'm presenting because it's in a different antenna, but what I'm going to do is show you like.

A

How would you get started with this and how could you actually try it with zero code on your part um and what I'll show you at the end of this is I. Think it's pretty compelling pretty neat to work with and I'll show you some other things you can do outside of just audio video calling um so let's Jump On In.

A

So the first thing is: you would need to create an Azure communication, Services resource all right now, I've done it enough that it just shows up, but obviously we can come on up communication and then communication Services shows up. So let's go ahead and do that. I already have one I'm going to create one from scratch if it takes too long to set up I'll just use this one for the demo, but we're going to try to do it from scratch here and see how it goes now.

A

Let me switch real quick to a different, Resource, Group kind of my bucket, where I want to put this if you're new to it and I'm going to give it a name and, let's just call it ACS M365 call now data location. This is uh you can actually get information about the calls and other features of ACS that are made, and so data location isn't so much about like where the calls are going to be made. So much as where is the data from that uh going to be made.

A

So if you want to get like metrics information, where do you want that stored, um so I'm just going to leave where I am and let's go ahead, and that all looks pretty good? So, let's review and create it should validate here in just a moment and then once it validates and there we go, it should create, and normally it takes. I don't know 45 seconds, maybe something like that.

A

It depends on the day but we'll let it we'll let it do its thing now, while this is setting up I want to show you how you can get started with this, so you'll notice on this page I'm, just in our normal learn.microsoft.com, and if you just go search for Azure communication Services, it's really easy to find, and then we have some common scenarios in here. We have samples those type of things, in fact, there's a video on how to get started from a really high level overview, even higher than I'm going to go today.

A

But what I want to mention, while this is kind of uh creating the resource over here, is that, while we're going to focus on voice and video calling, you can set up chat, in fact, you could even have voice and video calling with chat. Just like teams chat by the way uh you can send SMS text messages or you could send uh email so pretty much any communication functionality. You could do once you set up this resource, I'm Now, setting up in the Azure portal.

A

In fact, uh it's not mentioned right here, quite as much but you'll notice down here you can actually acquire phone numbers, and not only can you do SMS texting, but you can even make phone to phone type calls. So I could have an app. They actually calls someone's phone. You can do telephony with this. So a lot of really cool scenarios here that in the past would have been super hard to do now.

A

The thing I wanted to point out, though, is if we come on down you're, going to notice a link here to UI Library I mentioned earlier that once you get this set up, you can actually get started with zero code. Of course, some of you are going, I mean come on Dan, what's the fun in that we got to have code and we will next week we'll get into that. But you know sometimes you just want to try something out before you invest all that time.

A

To start your app well, this UI Library will let you do that and that's what we're going to use here in just a moment. I already have it open, but this is a if you've heard of storybook I love storybook. By the way, um it's a way to do things like UI testing scenarios, but you can also use it uh for just demoing components and you'll notice. Here on the left, we have these things called composites.

A

Now, a composite is really just like it's kind of like a Lego set with a bunch of Legos that have already been put together for you, they've been composed. If you will into a web component that you can just kind of drop into your app and you get all this functionality. So if you think about making a call like look at this screenshot right here, you know you have the video stream.

A

You have the ability to pick the camera. You have the toolbar to hang up and you know enable camera and all that stuff we're used to in teams. For example, uh you could have chat up here, you'll notice, some of that you might have the people in the call. So anyway, there's a lot of you know, pieces and all of those are down here in the UI components, but sometimes you're, just like I just want to make a call. I, don't want to worry about putting all the pieces together.

A

Just give me a Lego set that I could just drop in my app and I can just use it. Well, that's what we're going to learn about today. In fact we're going to go into this one called the call composite and we're going to do the join existing call because I'm going to try to join into a teams call just like you saw in the the video demo there all right. So, let's see where we're at looks like it's complete. That is good news.

A

uh This thing is totally overtaking my screen, but let's go to Resource, because I'm kind of zoomed in here all right. So this is my ACS resource. That's how easy it is to set up now if I want to demo this, though back here, my goal is I want to go to this join existing call preview, but notice that it requires some properties down here. We need a user identifier for the person making the call.

A

We need a token uh display, a name now that one I'll change to me and then in this case, because I'm going to call into teams, we need a way to do the teams meeting link now you'll notice, there's some other options. You can even call into a room that already has a meeting set up and you can call into a group with ACS. So there's all kinds of stuff. You can do we're going to do this, one, the team's meeting link.

A

So what I'm going to do is come on over to teams here and I'm just going to set up a really quick call, we'll call it test call because I'm so creative, um for you know today, let's go ahead and save that it's really all we need to do and then, if we click on it, we know that we can come on in and oh I must not have done. uh Well. Actually, that's interesting! Let me edit this because it apparently did not set up. Let me try that again.

A

It did not set up my uh teams for some reason. Interesting. Let's try that again, I might just have to join it and then get it from there. um Okay, it might be because I'm so used to doing the dog food version that I'm I switched last night to this version. So let me make sure I'm not missing something here that I'm not used to seeing and I think we're good all right.

A

Let's, let's try that again and okay I think it's just because let me move it up, I think it's just because of the time. It's not I still have like five minutes until that all right, let's try that I think that's probably what it is.

A

So, let's do test call keep capitalizing that, let's save it and yeah interesting, it is not letting me do it right now: okay, well, I I might have to do it a different way like do a new meeting. I'll still be able to show you so that's, okay, yeah, normally I'm used to you click on it. You can get the link right here and I. Don't know why it's not letting me uh do that right now. So that's!

A

Okay, though, what we're going to do is I want to call into a median I might just do a new meeting on my own and grab the link since I'm, apparently failing at this approach. um But what I want to do is I need an access token and a user ID. We already have the display name.

A

So here's what you can do in ACS. If I come on over you're, going to notice first off, there's keys, we don't need it for this demo, but once you get to the application part, you would need the connection string here.

A

Okay, so I just want to point that out we're not going to use that today, but we would use it later in a more realistic scenario now coming on down to here notice: I have identities and user tokens, and this is a great feature because, instead of me having to go, build an app somehow call into ACS to get a token get a user identity so that this can work. I can actually just do this.

A

I could say: hey I'm, going to do voice and video calling these generate a short-term token and user identity, and then, if I want to do chat, we can do that too I'm not going to do chat today, but we could do that so I'm going to hit generate, and what this gives me is a user identity and a token. So let me go ahead and copy these real, quick, we're going to come on back and here's the user identity, here's the user token and by the way notice these expire.

A

You basically get 24 hours, so you can use these temporarily, but then they're going to expire all right. There's the token now. The last thing I need is the call locator all right notice. This hasn't lit up yet I. Don't have a UI at this point now again for some reason, this one's not cooperating for me. So all right. Let me try just new meeting here um and let's do a meet now.

A

Let's do uh get link to share start meeting and do allow but I'm going to turn off uh all right. Let's make sure to turn off my mic because I'll get a feedback loop. So now what I'm going to do is I'm going to come and paste in that teams meeting link over here, that's kind of what I was trying to do with the calendar and notice. What happens this now lights up pretty cool now I'm. This is the camera I'm on right now.

A

So let me switch to maybe this camera, which is over here, and let me turn this on and in just a sec. There we go so you saw me do something like this last week for those that were here, but now we're just doing it again. It's like look Mom, no code, pretty awesome, so I'm not going to turn on my mic, because that could cause weird things but I'll leave this camera on and we'll pretend I'm talking this way.

A

You all get the idea, and now we can come on in and start the call from here.

A

What should happen is I should get a little uh admit into oh I gotta join hold on, let's join and we should get admit to Lobby there. We go in fact, I could copy the media link that way, of course, but let's admit- and we should be in now all right and there we go so now. You can see me I'm now in and I wrote no code to do this because I'm just able to use these web components in this UI Library uh kind of setup, pretty cool.

A

Now, there's a couple things I want to show you here, though, before we uh wrap up. So let me leave this leave this one all right so over here on the left. You'll notice that, in addition to what I just did, if I go to basic example and preview, we could do the same thing, but we could actually do it from like an ACS to ACS. In other words, I don't have to have teams in the mix or, if I want a one to many type.

A

There's an example of how we could do that. If you have one too many people like a webinar type setup, pretty neat and then I'll just show you a couple of the other things you can do. You can even do chat.

A

Here's an example of kind of what it looks like it's very teams looking actually and what this will allow us to do is we could actually set up a call and a chat or you could just have chat in fact, you'll notice right up top here, there's a call with chat composite and here now you're going whoa. That really looks like teams right, because you have the calling you have the people and then you have the chat and you don't have to write all that.

A

You just have to get the well I'll go to the preview here. You just have to get the user identifier the token, and then there is an end point. You'd have to get which, by the way, I can go back to keys, and we can get that from right here. Here's the end point right there. So, if you want to play around with this, that's all you'd have to do is just go to the Azure portal.

A

Even if you don't have a subscription currently just go, get the trial one, and you can now set up an ECS resource, very quick to do it and then from there for most of these demos, you would just go to the user tokens. If you want to do the chat, you would of course, check chat and you can check both by the way uh generate those and then just copy and paste those into the UI so to wrap up here.

A

uh That's kind of the the main demo I want to show for today so next week, what I'm going to be doing is saying: okay, that's nice, but you know that's not in my app Dan so next week we're going to take a look at what we can do with uh react in this case and again it could be anything that runs JavaScript and I'll. Show you how we can plug in this exact same type of functionality, but into a custom, react app, that's what we'll go into so in the meantime to wrap up here.

A

If you're interested in not only learning about this scenario but others, we have some resources I'll as soon as I'm done, I'll copy this into the chat for you, but you can go to this akms link, but the tutorial that I just went through, including setting up the resource, can be found in the second link here and then you can get to the code in this repo.

A

Now the Azure communication, Services UI Library, there's also a shortcut link for you there and, like I, said I'll I'll paste these in momentarily, so with that I'm going to turn it back over to get to our next demo here, but I hope that gives everybody a pretty good idea about what you can do with zero code and then come on back next week and we'll talk about how you can actually start getting uh get started with the code. So thank you we'll see you next.

B

Week awesome, thank you Don. So that's the zero code mean no code in this case. Just to ask the question: yeah yeah, really really cool I I by the way, I have to say all credits for the ACs team, so the Azure communication team as they provided those controls so of course, behind the scenes they're using Microsoft craft apis and all of that thing, but having those controls, subtracting the API surface, makes life super easy for Developers.

A