{"id":12776,"date":"2023-01-31T09:32:01","date_gmt":"2023-01-31T17:32:01","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=12776"},"modified":"2023-02-08T16:37:19","modified_gmt":"2023-02-09T00:37:19","slug":"build-a-meetings-app-with-azure-communication-services-and-microsoft-teams-part-1","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/build-a-meetings-app-with-azure-communication-services-and-microsoft-teams-part-1\/","title":{"rendered":"From zero to hero: Build a meetings app with Azure Communication Services and Microsoft Teams &#8211; Part 1"},"content":{"rendered":"<p>Communication is key in today\u2019s connected world. Whether a user needs support for a credit card issue, assistance for a software problem, help with a sales or support agent, or requires assistance from a medical professional, providing efficient ways for users to communicate is a win-win for them and for your business.<\/p>\n<p>In our previous blog, &#8220;<a href=\"https:\/\/aka.ms\/ignite-teams-acs-blog\">Want to embed Microsoft Teams in your app?<\/a>&#8221; we introduced the building blocks for adding Teams capabilities to custom applications through Azure Communication Services, Microsoft Teams, and Microsoft Graph. In this blog series, we show you how to implement such scenarios.<\/p>\n<p>Our first example is a customer service meetings app that allows your customers to receive support from your organization. This app can be used in various industries, such as banking, healthcare, and retail. We use Azure Communication Services interoperability with Microsoft Teams and the Microsoft Graph API to enable communication between users on your custom application and users on Microsoft Teams.<\/p>\n<p style=\"text-align: left;\">This scenario allows your company&#8217;s support agents to connect with customers through Teams while customers can join from your custom application. By leveraging the capabilities of Azure Communication Services and Microsoft Teams, we can provide a seamless support experience for users.<\/p>\n<p style=\"text-align: center;\"><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/5-Na9fgpVM8\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p style=\"text-align: left;\">The article is based on a step-by-step tutorial that you can <a href=\"https:\/\/aka.ms\/mscloud-acs-teams-tutorial\">access here<\/a>. Additional articles in the series will walk you through integrating services across the Microsoft Cloud to enable the full audio\/video calling solution.<\/p>\n<p>Let&#8217;s get started!<\/p>\n<h2>Audio\/video calling into a Teams meeting: Solution overview<\/h2>\n<p>The solution to enable a custom application to call into a Microsoft Teams meeting is shown below.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-1.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12777 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-1-1024x597.png\" alt=\"The solution to enable a custom application to call into a Microsoft Teams meeting\" width=\"640\" height=\"373\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-1-1024x597.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-1-300x175.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-1-768x448.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-1.png 1327w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Here is an overview of the technologies used and how they interact with each other:<\/p>\n<ul>\n<li>The front-end application is written using React and TypeScript.<\/li>\n<li>The React application makes a call into Azure Functions to create the Microsoft Teams meeting and retrieve an Azure Communication Service security token.<\/li>\n<li>Microsoft Graph is used by the Azure Function to dynamically create the Microsoft Teams meeting and send the join URL back to the React app for the Azure Communication Services call.<\/li>\n<li>The React application can be deployed to several different types of Azure services. In this series we\u2019ll focus on using Azure Static Web Apps or Azure Container Apps.<\/li>\n<li>Once the application is deployed and the Microsoft Teams meeting is created, a company representative, admit the user to the meeting, and begin assisting the user.<\/li>\n<\/ul>\n<p>In this article, you\u2019ll learn more about the front-end app and how it can be used to join a Teams meeting that is manually scheduled. In the second article, you&#8217;ll learn how to dynamically create the Teams meeting and request Azure Communication Service access tokens.<\/p>\n<h2>Creating an Azure Communication Services resource<\/h2>\n<p>To begin the process of implementing the audio\/video calling into Microsoft Teams solution, you willl first need to create an Azure Communication Services resource. This can be done using the <a href=\"https:\/\/portal.azure.com\">Azure Portal<\/a> or the <a href=\"https:\/\/learn.microsoft.com\/cli\/azure\/install-azure-cli\">Azure CLI<\/a>. When using the Azure Portal, you can type \u201ccommunication services\u201d into the search box and select Communication Services from the available options.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-2.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12778 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-2.png\" alt=\"Creating an Azure Communication Services resource\" width=\"591\" height=\"203\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-2.png 591w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-2-300x103.png 300w\" sizes=\"(max-width: 591px) 100vw, 591px\" \/><\/a><\/p>\n<p>From there you can enter information about your Azure subscription, resource group, resource name, and <a href=\"https:\/\/learn.microsoft.com\/en-us\/azure\/communication-services\/concepts\/privacy#data-residency\">data location<\/a>. Once the Azure Communication Service resource is created, you must go to the of the portal and generate a user identity and token. of the portal and generate a user identity and token.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-3.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12779 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-3.png\" alt=\"Generate a user identity and token. of the portal and generate a user identity and token.\" width=\"220\" height=\"90\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>An example of creating those values is shown next. They\u2019re useful when you want to begin testing Azure Communication Services audio\/video calling (or other) capabilities such as chat.<\/p>\n<h2><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-4.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12780 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-4.png\" alt=\"An example of creating values when you begin testing Azure Communication Services audio\/video calling capabilities.\" width=\"592\" height=\"155\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-4.png 592w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-4-300x79.png 300w\" sizes=\"(max-width: 592px) 100vw, 592px\" \/><\/a><\/h2>\n<h2>Adding Azure Communication Services features into a React application<\/h2>\n<p>Once the Azure Communication Services resource is created in Azure, it can be used in the React app to render an audio\/video calling interface. The interface allows the user to select their camera and microphone and handles the audio\/video features of the call.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-5.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12781 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-5.png\" alt=\"Interface showing how the user can select their camera and microphone and handles the audio\/video features of the call.\" width=\"583\" height=\"273\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-5.png 583w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-5-300x140.png 300w\" sizes=\"(max-width: 583px) 100vw, 583px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Before exploring the code, you will need to setup a meeting in Microsoft Teams that the user can join. This can be accomplished by going to <a href=\"https:\/\/teams.microsoft.com\">Teams<\/a> and selecting the <em>Calendar <\/em>option in the left toolbar.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-6.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12782 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-6.png\" alt=\"Button options for chat, activity and calendar in Microsoft Teams\" width=\"49\" height=\"181\" \/><\/a><\/p>\n<p>Select a date\/time in the calendar, enter your meeting title, and save it. Once the meeting is setup, select it in the calendar, copy the join URL as shown next, and store it in your clipboard or in a local file. We will show how it is used in the React code in a moment.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-7.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12783 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-7.png\" alt=\"Example of how to copy the join URL and store it in your clipboard or in a local file.\" width=\"384\" height=\"265\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-7.png 384w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-7-300x207.png 300w\" sizes=\"(max-width: 384px) 100vw, 384px\" \/><\/a><\/p>\n<p><strong><em>Note:<\/em><\/strong><em> Although manually creating a Teams meeting works for this example, the next article in the series will show you how to dynamically create a meeting so that the process is automated.<\/em><\/p>\n<p>To render the calling interface shown earlier, you need to add an <a href=\"https:\/\/azure.github.io\/communication-ui-library\/?path=\/story\/overview--page\">ACS UI Calling Composite component<\/a> into the React app. To do that, open a command window and run the following:<\/p>\n<p>https:\/\/gist.github.com\/MilanKaur-01\/2ec3ff8748b174f065446a15daab9762<\/p>\n<p>The <em>@azure\/communication-common<\/em> package provides security functionality. The <em>@azure\/communication-react<\/em> package provides a component named CallComposite and React hooks such as <em>useAzureCommunicationCallAdapter <\/em>that can minimize the amount of code you write to add audio\/video calling into the app. The <a href=\"https:\/\/aka.ms\/mscloud-acs-teams-tutorial\">full tutorial<\/a> walks you through the entire process and explains the different code sections along the way. From a high-level, here\u2019s how the audio\/video UI calling component can be used:<\/p>\n<p>https:\/\/gist.github.com\/MilanKaur-01\/099a23a15cbd113ecebf7a9ade01b50b<\/p>\n<p>Once the <em>CallComposite <\/em>component and associated props are defined, the Teams meeting URL, Azure Communication Services user identity, and token information (from the Azure Portal discussed earlier) can be added to the component\u2019s state to try.<\/p>\n<p>https:\/\/gist.github.com\/MilanKaur-01\/169e4081109e73093ab494bb2a5009f7<\/p>\n<p>The application can then be started by running in your command window.<\/p>\n<p>A user can select their camera and microphone in the React app and then select the <strong>Start call<\/strong> button to join the meeting. A doctor, clerk or agent, can go to the Teams application and select the Teams meeting used for this example. They can admit the user into the meeting and begin talking and even sharing video or a desktop screen.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-8.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12785 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-8-1024x540.png\" alt=\"A user can select their camera and microphone in the React app and then select the Start call button to join the meeting.\" width=\"640\" height=\"338\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-8-1024x540.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-8-300x158.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-8-768x405.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/ACS-blog-part-1_image-8.png 1476w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<h2>Summary<\/h2>\n<p>In this article you learned how to create a basic customer service meetings app that uses Azure Communication Services to call into and join a Microsoft Teams meeting. You also learned how to setup an Azure Communication Service resource using the Azure Portal, and how Azure Communication Services packages and components can be used in the React application to get started quickly.<\/p>\n<p>Although this is a great start, there\u2019s much more to the story! For example, how do you dynamically create a Microsoft Teams meeting? How do you dynamically get the ACS user identity and token? How do you host the React app? To get additional details about these topics and more, check out the other articles in this series.<\/p>\n<p><strong>Learn more about Azure Communication Services and Microsoft Teams Interoperability from the following resources:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/aka.ms\/mscloud-acs-teams-tutorial\">Tutorial: Audio\/Video Calling from a Custom App into a Teams Meeting<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/microsoft\/MicrosoftCloud\">GitHub repository for the ACS calling sample application<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/azure\/communication-services\/overview\">Azure Communication Services Overview<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/azure\/communication-services\/concepts\/teams-interop\">Teams Interoperability Overview<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/graph\/overview\">Microsoft Graph Overview<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/azure\/azure-functions\/functions-overview\">Introduction to Azure Functions<\/a><\/li>\n<li><a href=\"https:\/\/developer.microsoft.com\/microsoft-365\/dev-program\">Setup a free Microsoft 365 developer tenant<\/a><\/li>\n<\/ul>\n<p>Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn about scenarios that use the building blocks for adding Teams capabilities to custom applications through Azure Communication Services, Microsoft Teams, and Microsoft Graph.<\/p>\n","protected":false},"author":73383,"featured_media":12796,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,128],"tags":[119],"class_list":["post-12776","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-graph","category-microsoft-teams","tag-azure-communication-services"],"acf":[],"blog_post_summary":"<p>Learn about scenarios that use the building blocks for adding Teams capabilities to custom applications through Azure Communication Services, Microsoft Teams, and Microsoft Graph.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/12776","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/73383"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=12776"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/12776\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/12796"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=12776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=12776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=12776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}