Microsoft 365 Community Microsoft Teams, 4 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: What is Azure Communication Services and how to get started?

Description

In this 12-minute video, Dan Wahlin explains what Azure Communication Services is and how you can use it in your application to extend it with real-time multimedia voice, video, and telephony-over-IP communication features.

Demo Presenter: Dan Wahlin (Microsoft) | @DanWahlin

More information:
• Azure Communication Service Docs - https://docs.microsoft.com/en-us/azure/communication-services/overview/?WT.mc_id=m365-0000-dwahlin
• Communication Services Web Calling Hero Demo - https://github.com/Azure-Samples/communication-services-web-calling-hero/?WT.mc_id=m365-0000-dwahlin
• Communication Services Chat Hero Demo - https://github.com/Azure-Samples/communication-services-web-chat-hero/?WT.mc_id=m365-0000-dwahlin
• Using Voice and Video - https://docs.microsoft.com/en-us/azure/communication-services/quickstarts/voice-video-calling/getting-started-with-calling?pivots=platform-web&WT.mc_id=m365-0000-dwahlin
• Using Chat - https://docs.microsoft.com/en-us/azure/communication-services/quickstarts/chat/get-started?pivots=programming-language-javascript&WT.mc_id=m365-0000-dwahlin
• Using SMS - https://docs.microsoft.com/en-us/azure/communication-services/quickstarts/telephony-sms/send?pivots=programming-language-javascript&WT.mc_id=m365-0000-dwahlin
• Azure Communication Services Pricing - https://azure.microsoft.com/en-us/pricing/details/communication-services/?WT.mc_id=m365-0000-dwahlin

Learn more:
• Learn more about the Microsoft 365 Community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Community YouTube channel: https://aka.ms/m365pnp-videos

A

In this tech talk video we're going to talk about azure communication services, what it is and how you can use it in your.

A

Application, so what is azure communication services? You may not have heard of it, because it's very new it caught my eye early on when it was in preview because, as the definition says here from the docs, it allows you to build real-time multimedia capabilities into your app, and that means audio visual type things you could do chat. You could do sms and more as we'll talk about momentarily, you can go to the docs link here.

A

If you want to get more information right away, but let me walk you through kind of what it's for and why you'd use it. What scenarios things like that, so, first off, if you're building a web app a mobile app a desktop app, and you want to add something like audio video, whether it's one-to-one calls or one-to-many calls, then you could use acs as your communication services.

A

This would allow you to do what teams does and microsoft teams the infrastructure behind it is what actually acs is built on top of, as of today, there's over 115 million active users using teams. So it's pretty robust infrastructure that you can build on top of if you'd, like that's just one feature, if you'd also like to add real-time chat, you could also use acs for that. It has all the back-end infrastructure to make that happen, and it could scale again from 1 to 10 to many and then you can even do phone type capabilities.

A

You can do calls you can do sms. You can even integrate these different features here with bots, so you can automate different processes intelligently, a lot of different scenarios where you could use this. So if you were building an educational app. Obviously the audio video capability, and probably the chat, would be very interesting.

A

If you're building a sales app, you might have some sms functionality where a customer can send something in and get back details and we could go on and on and on with different scenarios here, but it's exciting because you only have to worry about the code. You don't have to worry about all the infrastructure, the servers, the encoding, all those types of things that are a lot more challenging to deal with.

A

So let me walk you through really quickly kind of how it works from a 10, 000 foot level view and then we'll jump into a quick demo, that's available on github that you can go through yourself if you'd like so, if you're building an app- let's say it's a web app in this case, but again it could be mobile. It could be desktop as well.

A

The first thing you're going to have to do is build in some server side functionality, because you're going to need to connect to acs to get a token and the way we're going to do that is through a call.

A

Acs will be registered using the azure portal which, by the way, I'm going to show in a later video, but it's a very simple process, probably take you less than two minutes to set that up and you're going to get a connection string back that connection string can be used, then, in the server side to make a call to acs, and what you would do, then, is your client whether it's mobile web or desktop can then make a call to your back-end code.

A

It can then issue a token and then that token can be used to actually generate the audio, the video, the chat, the sms, whatever it is, and so that's kind of the general flow from at least a high level of how you would use acs and get started with it now. To kind of illustrate all of this, let me walk you through a demonstration. Here's a screenshot from the first page of it where you can set up your devices, such as your video and your microphone, and things like that.

A

Now this demo is provided by the acs team. It's a calling hero demo. So it's pretty robust and it's literally like embedding some of the different uh conference apps. You have out there for audio visual conferencing, and you can do that right here in the web browser. It's super cool. What you can do, so you can go to this link below and clone the repo if you'd like, and with that.

A

Let me go ahead and jump over to vs code and I'll show you this demo, okay, so jumping on over to the code here, I've already cloned the project that I mentioned in the previous link and there's going to be a few basic steps to get this going. First off, you'll have to go through the readme they'll have some details on what you need to set up in the azure portal.

A

What the sample does things like that and they'll also have the steps I'm going to walk you through here for how to get this up and running on your machine if you'd like to now. This is a calling type of application now. The first thing I would have to do is create a azure communications resource up in azure, so you can use the azure portal. You can use the azure, cli and I'll have some more details on that in a different video, but very simple to do once.

A

You've done that you'll get a connection string, as I mentioned earlier, and that's going to go in this demo's app settings file now from there there's a back end piece and it's really small. That's this user! Token controller! That's going to issue the token! This is a net core backend, but it could be pretty much anything else, that's supported, and then this is the front end. This is the actual app that we're going to run, and this is written in react. You'll see, it has quite a few components.

A

The first component, you typically would start with, is called group call, and if I open that up you're going to see it has a media gallery child component media gallery. If you open that up, it allows for a local stream of video and then the remote streams of video. If you want to kind of play with this more now, once you are ready to run this, you can come on in open up the calling folder here or directory and then the first thing you'll.

A

Do I'm going to do it kind of step by step, even though we could jump ahead? Is a dot-net restore to get all your dependencies and this is going to load some acs assemblies as well as some other code? That's used just on the server side, and this is basically setting up a restful api on the server side.

A

Now. The next thing I'm going to do is a net build now, the first time I did this as a heads up, I actually got a build target error, never really figured out. Why? So? If you get that error, you could do a net clean. If you want what I did is went in and tried it again, but I deleted. If I go back in here, the bin and the object folders that you see so I kind of get rid of those and then I reran it, and then it was fun.

A

So hopefully you won't even have an issue, but if you do that's kind of what I ran into now, the next step is: we need to run it, so we need to launch our server and what this does, though, is not only launch the api, but it also launches and builds the react app. So you can kind of do it in one step: they've consolidated that into the build process, so we're going to do net run now, since we just built it and we'll go ahead and launch this now.

A

This will take a sec the first time to kind of fire everything up so we'll kind of through the magic of video speed this up a little bit.

A

So it looks like this is all done. I'm going to come on back up and just click on this localhost 5001.

A

Let me go ahead and open this up, and this is what you'll see this exceptionally simple video calling and then you can start the call. You can read a little bit more about it now as a heads up. If you get an ssl here, then you may need to run the dotnet cert type of command, and let me just show you that real, quick, let's open up another command prompt if we come on in, we can do dot net dash, dash help and then you'll see dev certs.

A

So we do net dev certs and then you can just keep adding help here. If you're unfamiliar with this command, we want to add https and then trusted support for it. So I can do https dash t. I think it is, but let's do dash help and yeah trust and then I'll do dash t and what that'll do is if you don't have a certificate, a developer certificate on your machine. This will kind of set that up for you.

A

Let me log into that, and there we go. So I already have one that's why mine worked, but just as a heads up, you might hit that so be aware of that particular step there. So let's go back to the browser and now I'm going to go ahead and start a call, and this is going to kick off the react components before it does that it's actually going to call and get an access token, and then I'll show you what it does. It's pretty neat.

A

So the first thing it's going to do is: let me pick a username I'll, go ahead and say dan and then camera. I can't use this one, so I'm going to pick my kind of cheaper cameras over here, so I have a logitech and we'll go ahead and pick that microphone, although I'm not going to turn that part on and then I'm going to enable it here all right, so you can see behind the scenes. It's totally fake. It's a fraud, the whole show's, a fraud.

A

Folks, it's a green screen, but uh anyway so we'll go ahead and start the call here on this one. Now I also have another camera which I'm going to have to simulate this. So I'll kind of look at this camera momentarily here and what I can do is, I can add, other people now I can come in and change my setup. Okay, that's pretty neat! If you've used microsoft, teams at all you'll recognize these icons and things, but I can you know disable video audio.

A

I can share screen, that's pretty neat, but let's go ahead and turn that on and then I'm going to add other people now I'm on localhost, so right now I can only test with me.

A

However, if you want, you could go to ngrok.com and you could it's a tunneling mechanism you can get and you could actually expose a url that you know you could give out to your mom or your friend or whoever, and they could try it out for you. So let's go ahead and copy that and we'll come on back we'll paste and now I'm going to pick a different camera. So we'll call this imposter dan and let me go ahead and pick this a really cheap one, no quality guaranteed on this one.

A

So all right! Well, there we go it works, but it's you know not phenomenal in this case, but it'll work. So let's go ahead and start the call and now we're going to have our local stream and what would be the remote stream right here you can see now it's not super good quality on this partially because of my camera, um but that'll give you an idea of what you can do and I'm not a real big fan of seeing myself on this. So you know what we're gonna leave all right.

A

So, let's stop that we'll shut it down, but that is what this demo does, and you know I don't know about you, but when I first saw this, I went okay, that's pretty cool. I could do some really fun uh stuff with this, so let me go ahead and go back over to the code, we'll go ahead and stop the server and just to give you a little more details, then to wrap up so we've already talked about there's an api.

A

The react client calls this to get the access token, and then we have the client app right here and if we go into source components, this is the bulk of it. The ones you'll probably want to start with, though, as are, as I mentioned group call, and then you have a local stream and there's a remote stream right here and that kind of controls the one to many type of uh thing. Now this doesn't have chat or sms or others.

A

If you uh go to the github site for acs in general, though, and I'll have some links again here at the end, you can actually get more info, though the docs are really good. You can walk through those and get started with a really basic example. That's not react by the way. If you want and there's a lot of other fun stuff, you can do so. I'm going to put some links down here.

A

I just did a blog post on this, so if you're interested in a kind of begin to end how to get this demo going, including registering your acs resource in the azure portal, then this would have all that info in the blog post and I'm going to do another video coming up. That's going to go into that. So thanks for giving me a listen here. Hopefully that helps you get a little bit excited about acs and what it can.

A

A