Microsoft 365 Community Microsoft Graph, 7 Feb 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting Started with Azure Communication Services, Microsoft Graph, and Microsoft Teams

Description

In this 14-minute developer focused demo, Dan Wahlin kicks off a 6-session series (aligned to a 6-chapter tutorial) focused on Integrating services across the Microsoft Cloud to enhance user collaboration and specifically adding audio/video capabilities into your custom apps. Series overview, technologies used in series - React (front-end), Azure Communication Services, Azure functions, Microsoft Graph, Azure AD and Microsoft Teams (Microsoft 365 products). Quick live demo (run locally) and architectural representation of functionality.

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

Demo Presenter
• Dan Wahlin (Microsoft) | @DanWahlin

Supporting materials
• App Camp - Microsoft Cloud Integration Scenarios | aka.ms/microsoft-cloud
• Tutorial - Audio/Video Calling from a Custom App into a Teams Meeting | aka.ms/mscloud-acs-teams-tutorial
• Repo - Microsoft Cloud Integrations (code samples, videos, documentation) | https://github.com/microsoft/microsoftcloud
• Demo - Introduction to Azure Communication Services – Tomas Chladek (Microsoft) | @tomaschladek2

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

A

Foreign, so let me go ahead and dive on in here um we're going to talk about, as you can see here, integrating services on the Microsoft Cloud and specifically adding audio video capabilities into your apps and I'll talk more about that and what I mean by that coming up, but in essence, we're going to be talking we're going to have several sessions coming up on building across the Microsoft cloud.

A

So we're going to be talking in these sessions about Azure and Microsoft graph, so my name is Dan walline, I'm, A, Cloud, developer Advocate and my colleague, I chabash is also going to be doing some of the sessions coming up later. So definitely stay tuned come every week because we're going to have some great stuff for you here.

A

So let me dive on in and let's talk about kind of the the purpose and focus of today we're going to be talking about real-time audio video calling now you might say we already have that I have teams, for example, or I, use another tool. Well we're talking about in custom maps.

A

So, let's say just as a simple example that we have someone on the left here who would like to go to my website, maybe they're a customer and call in to get help setting up my new I, don't know uh bookshelf or something like that now to do that, we'd like to add more of a personal touch, though so we like the audio video but I, also want the customer to be able to share their their backside camera so that they could show where they're stuck and now, if I'm customer service I can help them out.

A

Now, I just had a real life situation with this on Friday no joke. So we had uh one of our area: I live in Arizona out in the west of the U.S and we get hot in the summer. So it's currently winter here, but it is the time of year to make sure the AC is working and we had a problem.

A

It turns out so they came out and they needed to call back to your headquarters and they they all have these tablets, but they what they do is they'll take some pictures and then they'll make a call back and talk to someone there about the different parts and what's available well I realize this is a perfect use case because they already have these tablets.

A

Why not just make the call from that show everything live and not have to juggle two devices, so you could think of a lot of field scenarios where this would come up as well. Now. What we're going to be talking about, though, is going to be built up over a series that we're going to be doing over the next six weeks.

A

Actually, today is going to be about audio video, calling and kind of setting the foundation for what's possible, I'm going to show you a demo and then we're going to talk through the different technologies that are available that we're going to be using across Azure and Microsoft 365..

A

Now next week, I'll be back for good or for bad folks uh to talk about Azure communication services with regard to not only setting up audio video, but what if we could make it where your custom map could actually call into teams, we can do that through ACS teams interop. Now there was a previous talk. If you didn't catch it, you can go to the recordings of these on YouTube and uh Thomas who's, a PM from ACS introduced ACS, but I'm going to go into a very focused area as we do this now.

A

The next session we're going to do is going to be on integrating ACS into a front-end app. Now we're going to be talking about react throughout these uh series of sessions, but it could be any front-end app. It could be just pure JavaScript. If you want, then we're going to go into the backend side, we're going to talk about Azure functions and how we could use Microsoft graph to dynamically set up a teams meeting an event.

A

If you will we're also going to be talking about how we could use Microsoft graph to return some security information, some tokens that ACS would need for that user to be able to call into teams and even other aspects of video calling, then, finally, we're going to put it all together. I'll be back for this last one aicha will do the two previous ones and we're going to talk about how we can deploy uh the app itself different uh application opportunities for deployment to Azure, uh specifically we're going to focus on Azure static web apps.

A

If you haven't seen that before so a lot of good stuff uh that we're going to be doing- but today is all about this setting the foundation of. Why would I care? Why would I do this, so uh the Technologies we're going to be covering throughout this series and the demo I'm going to show in just a second to you are going to use the following, so we're going to be using react on the front end, but again everything I'm going to be doing is web components.

A

So technically you could use whatever you want as long as it runs. Javascript, you could do it, we're also going to be using Azure communication services and again this is going to be more of an audio video Focus, but you can use this for SMS. You can use it for email. You could use it for actually calling phone numbers. um You literally can do telephony with this. You could do it for chat, so there's all kinds of great stuff. You can do anything communication oriented this pretty much.

A

Has you covered but again we'll focus on audio video, we're going to talk about Azure functions and then how Microsoft graph can be used with that to dynamically set up the teams meeting, but also return some information that Azure communication Services would need, uh of course, because we're going to use Microsoft graph here, we'll have Azure active directory as well. That'll, be part of this and we'll have Microsoft teams, that'll be the the big players here and then the last session, as I mentioned, we'll go into a couple deployment options uh Azure static.

A

Web apps is one of my favorite services, but if you use something like containers, Azure container apps might be an opportunity there, all right. So with that, let's move on to a demo and I actually have a video that aicha and I recorded, but I'm gonna attempt fate uh because, with audio video live demos, it's always fun on what happens, but we'll see uh it'll keep everybody on the edge of your seat.

A

Going is Dan going to fail, is Dan gonna fail, no we'll hope, not I I sacrificed, whatever I needed to the demo, Gods, so I'm going to hop on over here um to another screen. Let me go ahead and stop this real, quick and what we want to do is I want to walk you through first off kind of the the sample itself and then we'll jump into the demo.

A

So you'll notice here that I have an ACS to teams. Meeting and I'll. Give you a link to this repo at the end here so bear with me and you'll have that momentarily. But it's pretty straightforward in this demo notice. I have a client which is react in this case and we have a server which happens to be node.js typescript in this case. We're actually going to do it going to be doing some other options as well such as.net and a few others in the near future.

A

Now what I've done is you'll notice two command prompts here. This is my Azure functions, so I'm running this locally right now, that's what's kind of nice about this demo is you can actually try it out right on your machine once you've set up the resources and then over here, you'll notice that I have uh in in essence my webpack my react that I've started up my server now, let me run off to the demo, and- and this is all going to be based on a tutorial that you can get to today.

A

So all these sessions you'll see here on the left are part of this tutorial, but what I'm going to do is actually show you it. So, let's go to localhost 3000 in this case. Now. What this is going to do is load the react app, but you'll notice up top it's showing a few things and it just made a request to Azure functions that called Microsoft graph and that hopefully, set up a an event in teams that we can get to in the calendar.

A

Now this is azure communication, Services right here in action, so this is what's called an ACS UI component and in one of the upcoming sessions, I'm going to walk you through how to actually use that component. But today is more about setting the stage for what's possible now: I I, don't want this camera because uh that one happens to be the one I'm using right now so I'm going to pick one that's way over here, but just to kind of show you this is hopefully working here.

A

Let me turn on my camera and in just a moment there we go that should be working. You can see my uh behind the scenes setup, my shotgun mic and all that fun stuff, but there we go so it is working. You can see. So what that? What happened, then? Is you know the the boss at the headquarters, the customer service rep, whatever they would get notified?

A

They can now come into teams and I'm gonna make sure I mute, my mic, because we don't want feedback loop here and I'm not going to start my camera on this one. But I'm gonna go ahead and join this meeting and then over here I'm going to say yeah, let's go ahead and let's start the call, and what should happen is because this user is not in my tenant, they're a guest, so I'm going to go ahead and admit them. You'll notice, I've logged in as icha over here.

A

uh So let me go ahead and admit them and it'll take a sec for the video to catch up. But there we go. Here's the customer and, of course the uh customer service person is actually right here in in teams. You know how cool is that so I have a custom map and then I'm able to call into that custom map right here through uh teams. How neat is that lots and lots of scenarios where you could uh put this to use?

A

So let me go ahead and leave because it worked and I don't want to Temp fate here and then we'll talk about some other aspects of how this is all put together before we wrap up all right.

A

I want to go into now. Now is kind of the breakdown of what is happening then. So, let's, let's talk about this, so you just saw the react app on the left and then obviously teams was on the right and what was happening there is the following: well, first off we're using Azure communication services and what's called a UI calling component. Basically, it's just a web component right runs anywhere.

A

The web runs and that's being embedded in the react app now when that app loaded, it made an instant call off to Azure functions and Azure functions made a Microsoft graph call so we're using some delegated permissions there to actually set up a teams meeting their app permissions I should say to set up the teams meeting now. Obviously that then adds the calendar invite into Microsoft teams, but we could also use Microsoft graph to send like a chat into a team's channel so that people don't have to go look at the calendar.

A

They could be notified, actually that's all available with Microsoft graph, of course. Now, in addition to that, what ends up happening then is we also need to get an ACS token and user identity and that's going to come from Azure functions as well. So we have two Azure functions: we're going to be walking you through one sets up the meeting, the other handles the ACs functionality as far as the token and the user identity and then finally, what we're going to do is kind of put it all together, because I think a lot of times.

A

You learn about Technologies, but you never really see how do I use it for real, so I'm going to talk more about the Azure static web apps portion of this and that'll be the last session um in this series.

A

So with that, let me give you a couple links here: real, quick and I want to talk through these, so this first one is going to be a a landing page that has a bunch of Microsoft cloud scenarios and when I say Microsoft cloud. In this case, what I mean is well internally.

A

We call it a lot two plus cloud and by two plus Cloud I mean I, want to use Azure with Microsoft 365 or Power Platform with Azure or I want to use GitHub in the mix, um those type of things, and so this will have a lot of different scenarios.

A

So if you want to learn, for instance, how to build teams, apps we'll have links to how to do that in addition to some of the ones you've already seen this morning and then the tutorial that will actually walk you through everything, we're going to cover can be found here. The second link I'm going to go back to that in just a moment to wrap up here and then. Finally, if you want to get to the sample code, because you're just so excited about this, you got to use it today.

A

I did have that scenario by the way we put this tutorial together and literally the next week, a company was like that's exactly what we needed and they're building out a solution right now, so that was pretty neat to see, but the repo uh is going to have this sample and some others, and you can certainly get to that code if you'd like now to wrap up what I want to show you really quickly.

A

Here is: let me uh stop PowerPoint here and let's go back to here, real quick, so in this tutorial, you'll notice on the left here, in fact, let me make that just a tad bigger for you and I can make this full screen. Now this is going to have the breakdown of what we're going to do so next week, we're going to talk about the react side with ACS.

A

Then we're going to go into well. Actually, sorry we're going to talk about the ACs, uh getting it set up with teams and how that works. We'll talk about the react side and then we'll get into the Azure functions deploying and we have different options there. So all of what we're going to cover can be found in the step-by-step tutorials that you can get to and let me go ahead and put that up one more time and I'll turn it back over to Visa.

A

If I can find the slide there, we go go back to that and that's all I have folks so uh stick around come join us next week and I'll show you how to get started with all this. So I'll turn it back over to you. Folks.

B

Excellent thanks, Dan really really cool stuff, and it is such an amazing technology and and like Dan was saying, and probably you can figure out. We do use Azure communication Services behind of the sales running the Microsoft teams. So it's it's basically the same Tech which Microsoft uses on a day-to-day basis from Microsoft teams and it's available for you, which is really really cool foreign.