Get started with UI Library for Azure Communication Services

Key Takeaways

well welcome to the azure communication services video library my name is dan wallin i'm a cloud developer advocate at microsoft and in this video we're going to be talking about the ui library now this is something i personally find really exciting to work with because if you want to get something like chat or video calls integrated into your apps you can do that super quickly with something called composites now we're going to focus on composites throughout this video but i'm also going to mention another aspect of the ui library call components now both of these are part of an open source library and they provide a turnkey solution so that you can add things like chat and video into your web and your mobile apps so with that let's go ahead and jump right in and talk about some of the use cases well let's assume that you're building either a web app or a mobile app for ios or android first off azure communication services and what we're going to talk about in this video are going to be applicable for your solution now one thing you can take advantage of is teams interrupt so whether you want standalone calling or standalone chat or you actually want the video and chat to be integrated with microsoft teams azure communication services would satisfy both of those needs so when it comes to calling you can have voice over ip calling and even interrupt with microsoft teams as mentioned now the same thing for chat you could have group chats you can have teams interop where you can actually chat into teams meetings and that really opens up the possibilities if you're already using microsoft teams then that works out phenomenally well and if you're not and you just want standalone calling and standalone chat that would be an option as well so you basically get to choose what works best for your solution so the main scenarios we're going to talk about in this video then are calling in chat but what are some of the ui library features that we might have well first off there's a lot of functionality provided out of the box there's customization you can customize the ui library components so they match your branding and that would include things like colors and fonts and icons accessibility is supported out of the box and that way you have support for things like a narrator keyboard navigation and color contrast localization of course is very important for our applications and that's built in with multiple language support out of the box then we also have responsiveness that's something as a developer we often have to battle a little bit but this is something that's built in so that in different aspect ratios for phones or tablets or desktop the components and composites we're going to talk about are going to render appropriately and then finally there's fast feature adoption the ui library is continually updated with new and exciting features from azure communication services and you can adopt those just by updating your libraries that you're using now here's a quick look at what i mean by composites and this is going to be the focus of this particular video composites are a turnkey ui solution to add end-to-end calling and chat experiences into your apps and as mentioned earlier this is available for mobile ios and android as well as your web apps so here be an example of what a web app might look like you'll notice at the bottom we have multiple people involved in a call some of them are actually sharing their video we're sharing desktop and then over to the right you can see that we actually have a chat area now on the mobile side we can do the same thing here would be an example of what that would look like you'll notice we have a tile layout and it's responsive as mentioned earlier so that now everything renders as you would expect with the different aspect ratios available on phones and on tablets in addition to composites the ui library also has ui components these are composable controls to build calling and chat experiences and they're available for web applications here's an example of a video gallery component or if you'd like to work with chat you can use a message thread combined with a send box we also have a participant list you can have individual video tiles and then you can have things like a control bar for muting showing and hiding video sharing desktop and more and then you can even have an error bar to display different messages to your end users now moving forward i'll be focusing on composites and the first thing i'm going to do is show you a web-based demo that you can get to right away let's jump right in one of the easiest ways to get started using the azure communication services ui library is to go to aka dot ms slash acs storybook this will get you right into some online documentation and live demos that you can run right here in the browser now the first thing you'll notice is that we can read more about the ui library how to get it installed and get started with it but i want to point out that we have a section for composites which i'm going to focus on momentarily and then we have a section for the ui components or the building blocks if you want to compose your own solution now what we're going to do here is talk about composites again so if i click on getting started you'll notice that it breaks this down into some choices you have you could do ui components or you can do the composite components so the one i'm going to focus on is the call with chat composite and if we click on this we can go to a basic example now scrolling on down you'll notice that it has some code for us this happens to be a react app and you'll notice that right off the bat if we scroll on down it's pretty easy to get started with we have a call with chat composite and then we have to give it some various properties such as an adapter and a theme and some different options now those are all defined up here now while i'm not going to spend the time going through this particular code i do want to show you a preview of what you can do so i'm going to come up to the preview tab and you'll notice that it wants me to supply an access token user id endpoint url and display name now we talked about an access token and user id in a previous video on the azure communication services portal and how you can set up that acs resource to get all this started so check out that other video if you'd like more details what i'm going to do is just plug these values in to the values that we see down here so we have a valid token for user user identifier and we need an azure communication services endpoint url so let me go ahead and add these values from my azure portal setup now normally you'll be prompted to give access to your camera and your microphone here i've already done that before with this setup so i wasn't prompted but make sure that you accept that so that you can then pick your camera and your microphone now i'm going to go ahead and pick a camera here which is my webcam i'll go ahead and do the same for my microphone but notice everything is turned off right now you're probably used to this with some of the video conferencing software you use but i could go ahead and unmute if i'd like i can even turn on my camera go ahead and wave to the camera here um we'll turn that back off but now i can go ahead and start a call and from here i am now in the call i'm obviously not on on camera but we can fix that and then i can also mute and do all those types of things i could present but if i come on over here i can go to chat and i could say welcome to the meeting or whatever we're doing and then if we had other people in this meeting they can of course respond so we now have a group chat set up and we have audio video capabilities all through this call with chat composite so you can get this up and running very very quickly and then use this to actually create your own azure communication services setup for whatever solution you need at work well thanks for joining me for this azure communication services video on the ui library as a quick review we saw that composites provide a great way to get started adding things like chat and video into your web and mobile apps now there's a lot more you can do though so check out the link that you see here on your screen and stay tuned for additional videos that come out in this series thanks again