|
| 1 | +--- |
| 2 | +title: Extensibility of call for Microsoft Teams Virtual appointments |
| 3 | +description: Extend call experience of Microsoft Teams Virtual appointments with Azure Communication Services |
| 4 | +author: tchladek |
| 5 | +manager: chpalm |
| 6 | +services: azure-communication-services |
| 7 | + |
| 8 | +ms.author: tchladek |
| 9 | +ms.date: 05/22/2023 |
| 10 | +ms.topic: tutorial |
| 11 | +ms.service: azure-communication-services |
| 12 | +ms.subservice: teams-interop |
| 13 | +--- |
| 14 | + |
| 15 | +# Extend call experience |
| 16 | +You can use out-of-the-box Virtual appointments experience created via Microsoft Teams Virtual Appointment Booking or through Microsoft Graph Virtual appointment API to allow consumers to join a Microsoft hosted Virtual appointment experience of Virtual appointment. If you have Microsoft Teams Premium, you can further customize the experience via Meeting theme that allows you to choose images, logos, and colors used throughout the experience. |
| 17 | +Azure Communication Services can help developers who want to self-host the solution or customize the experience. |
| 18 | + |
| 19 | +Azure Communication Services provides three customization options: |
| 20 | +- Customize the user interface via ready-to-use user interface composites. |
| 21 | +- Build your own layout using the UI Library components & composites. |
| 22 | +- Build your own user interface with software development kits |
| 23 | + |
| 24 | +## Prerequisites |
| 25 | +The reader of this article is expected to have an understanding of the following topics: |
| 26 | +- [Azure Communication Services](https://learn.microsoft.com/azure/communication-services/) [Chat](https://learn.microsoft.com/azure/communication-services/concepts/chat/concepts), [Calling](https://learn.microsoft.com/azure/communication-services/concepts/voice-video-calling/calling-sdk-features) and [user interface library](https://learn.microsoft.com/azure/communication-services/concepts/ui-library/ui-library-overview) |
| 27 | + |
| 28 | +## Customizable ready-to-use user interface composites |
| 29 | +You can integrate ready-to-use meeting composites provided by the Azure Communication Service user interface library. This composite provides out-of-the-box React components that can be integrated into your Web application. You can find more details [here](https://azure.github.io/communication-ui-library/?path=/docs/use-composite-in-non-react-environment--page) about using this composite with different web frameworks. |
| 30 | +1. First, provide details about the application's user. To do that, create [Azure Communication Call Adapter Arguments](https://learn.microsoft.com/javascript/api/@azure/communication-react/azurecommunicationcalladapterargs) to hold information about user ID, access token, display name, and Teams meeting URL. |
| 31 | + |
| 32 | +```js |
| 33 | +const callAdapterArgs = { |
| 34 | + userId: new CommunicationUserIdentifier(<USER_ID>'), |
| 35 | + displayName: “Adele Vance”, |
| 36 | + credential: new AzureCommunicationTokenCredential('<TOKEN>'), |
| 37 | + locator: { meetingLink: '<TEAMS_MEETING_URL>'}, |
| 38 | + endpoint: '<AZURE_COMMUNICATION_SERVICE_ENDPOINT_URL>'; |
| 39 | +} |
| 40 | +``` |
| 41 | +2. Create a custom React hook with [useAzureCommunicationCallAdapter](https://learn.microsoft.com/javascript/api/@azure/communication-react/#@azure-communication-react-useazurecommunicationcalladapter) to create a Call Adapter. |
| 42 | +```js |
| 43 | +const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs); |
| 44 | +``` |
| 45 | +
|
| 46 | +3. Return React component [CallComposite](https://learn.microsoft.com/javascript/api/@azure/communication-react/#@azure-communication-react-callwithchatcomposite) that provides meeting experience. |
| 47 | +
|
| 48 | +```js |
| 49 | +return ( |
| 50 | + <div> |
| 51 | + <CallWithChatComposite |
| 52 | + adapter={callAdapter} |
| 53 | + /> |
| 54 | + </div> |
| 55 | +); |
| 56 | +``` |
| 57 | +
|
| 58 | +You can further [customize the user interface with your own theme for customization and branding](https://azure.github.io/communication-ui-library/?path=/docs/theming--page) or [optimize the layout for desktop or mobile](https://learn.microsoft.com/javascript/api/@azure/communication-react/callwithchatcompositeprops#@azure-communication-react-callwithchatcompositeprops-formfactor). If you would like to customize the layout even further, you may utilize pre-existing user interface components as described in the subsequent section. |
| 59 | +
|
| 60 | + |
| 61 | +## Build your own layout with user interface components |
| 62 | +Azure Communication Services user interface library gives you access to individual components to customize its user interface, and its behavior. The following image highlights the individual components that are available to use. |
| 63 | +
|
| 64 | + |
| 65 | + |
| 66 | +The following table details the individual components: |
| 67 | +
|
| 68 | +| Component | Description | |
| 69 | +| --- | --- | |
| 70 | +| [Grid Layout](https://azure.github.io/communication-ui-library/?path=/story/ui-components-gridlayout--grid-layout) | Grid component to organize Video Tiles into an NxN grid | |
| 71 | +| [Video Tile](https://azure.github.io/communication-ui-library/?path=/story/ui-components-videotile--video-tile) | Component that displays video stream when available and a default static component when not | |
| 72 | +| [Control Bar](https://azure.github.io/communication-ui-library/?path=/story/ui-components-controlbar--control-bar) | Container to organize DefaultButtons to hook up to specific call actions like mute or share screen | |
| 73 | +| [Video Gallery](https://azure.github.io/communication-ui-library/?path=/story/ui-components-videogallery--video-gallery) | Turn-key video gallery component which dynamically changes as participants are added | |
| 74 | +
|
| 75 | +You can also customize your chat experience. The following image highlights the individual components of chat. |
| 76 | + |
| 77 | +  |
| 78 | + |
| 79 | +The following table provides descriptions with links to individual components |
| 80 | +
|
| 81 | +| Component | Description | |
| 82 | +|---|---| |
| 83 | +| Message Thread | Container that renders chat messages, system messages, and custom messages | |
| 84 | +| Send Box | Text input component with a discrete send button | |
| 85 | +| Message Status Indicator | Multi-state message status indicator component to show status of sent message | |
| 86 | +| Typing indicator | Text component to render the participants who are actively typing on a thread | |
| 87 | +
|
| 88 | +
|
| 89 | +Let’s take a look at how you can use [Control Bar](https://azure.github.io/communication-ui-library/?path=/story/ui-components-controlbar--control-bar) component to show only camera and microphone buttons in this order, and control actions that are performed after selection of those buttons. |
| 90 | +
|
| 91 | +```js |
| 92 | +export const AllButtonsControlBarExample: () => JSX.Element = () => { |
| 93 | + return ( |
| 94 | + <FluentThemeProvider> |
| 95 | + <ControlBar layout={'horizontal'}> |
| 96 | + <CameraButton |
| 97 | + onClick={() => { /*handle onClick*/ }} |
| 98 | + /> |
| 99 | + <MicrophoneButton |
| 100 | + onClick={() => { /*handle onClick*/ }} |
| 101 | + /> |
| 102 | + </ControlBar> |
| 103 | + </FluentThemeProvider> |
| 104 | +)} |
| 105 | +``` |
| 106 | +
|
| 107 | +For more customization you can add more predefined buttons and, you can change their color, icons, or order. If you have existing user interface components that you would like to use or you would like to have more control over the experience, you can use underlying software development kits (SDKs) to build your own user interface. |
| 108 | +
|
| 109 | + |
| 110 | +## Build your own user interface with software development kits |
| 111 | +Azure Communication Services provides chat and calling SDKs to build Virtual appointment experiences. The experience consists of three main parts, [authentication](https://learn.microsoft.com/azure/communication-services/quickstarts/identity/access-tokens?tabs=windows&pivots=programming-language-csharp), [calling](https://learn.microsoft.com/azure/communication-services/quickstarts/voice-video-calling/get-started-teams-interop?pivots=platform-web) and [chat](https://learn.microsoft.com/azure/communication-services/quickstarts/chat/meeting-interop?pivots=platform-web). We have dedicated QuickStarts and GitHub samples for each but the following code samples show how to enable the experience. |
| 112 | +The authentication of the user requires creating or selecting an existing Azure Communication Services user and issue a token. You can use connection string to create CommunicationIdentityClient. We encourage you to implement this logic in the backend, as sharing connectionstring with clients isn't secure. |
| 113 | +```js |
| 114 | +var client = new CommunicationIdentityClient(connectionString); |
| 115 | +``` |
| 116 | + |
| 117 | +Create an Azure Communication Services user associated to your Azure Communication Services resource with method CreateUserAsync. |
| 118 | + |
| 119 | +```js |
| 120 | +var identityResponse = await client.CreateUserAsync(); |
| 121 | +var identity = identityResponse.Value; |
| 122 | +``` |
| 123 | + |
| 124 | +Issue access token associated to the Azure Communication Services user with chat and calling scope. |
| 125 | + |
| 126 | +```js |
| 127 | +var tokenResponse = await client.GetTokenAsync(identity, scopes: new [] { CommunicationTokenScope.VoIP, CommunicationTokenScope.Chat }); |
| 128 | +var token = tokenResponse.Value.Token; |
| 129 | +``` |
| 130 | + |
| 131 | +Now you have a valid Azure Communication Services user and access token assigned to this user. You can now integrate the calling experience. This part is implemented on the client side and for this example, let’s assume that the properties are being propagated to the client from the backend. The following tutorial shows how to do it. |
| 132 | +First create a [CallClient](https://learn.microsoft.com/javascript/api/azure-communication-services/@azure/communication-calling/callclient) that initiates the SDK and give you access to [CallAgent](https://learn.microsoft.com/javascript/api/azure-communication-services/@azure/communication-calling/callagent) and device manager. |
| 133 | + |
| 134 | +```js |
| 135 | +const callClient = new CallClient(); |
| 136 | +Create CallAgent from the client and define the display name of the user. |
| 137 | +tokenCredential = new AzureCommunicationTokenCredential(token); |
| 138 | +callAgent = await callClient.createCallAgent(tokenCredential, {displayName: 'Adele Vance'}) |
| 139 | +``` |
| 140 | + |
| 141 | +Join Microsoft Teams meeting associated with Virtual appointment based on the Teams meeting URL. |
| 142 | + |
| 143 | +```js |
| 144 | +var meetingLocator = new TeamsMeetingLinkLocator("<TEAMS_MEETING_URL>"); |
| 145 | +callAgent.join(meetingLocator , new JoinCallOptions()); |
| 146 | +``` |
| 147 | + |
| 148 | +Those steps allow you to join the Teams meeting. You can then extend those steps with [management of speakers, microphone, camera and individual video streams](https://learn.microsoft.com/azure/communication-services/how-tos/calling-sdk/manage-video?pivots=platform-web). Then, optionally, you can also integrate chat in the Virtual appointment experience. |
| 149 | + |
| 150 | +Create a [ChatClient](https://azuresdkdocs.blob.core.windows.net/$web/javascript/azure-communication-chat/1.3.2-beta.1/classes/ChatClient.html) that initiates the SDK and give you access to notifications and [ChatThreadClient](https://azuresdkdocs.blob.core.windows.net/$web/javascript/azure-communication-chat/1.3.2-beta.1/classes/ChatThreadClient.html). |
| 151 | + |
| 152 | +```js |
| 153 | +const chatClient = new ChatClient( |
| 154 | + endpointUrl, |
| 155 | + new AzureCommunicationTokenCredential(token) |
| 156 | + ); |
| 157 | +``` |
| 158 | + |
| 159 | +Subscribe to receive real-time chat notifications for the Azure Communication Services user. |
| 160 | + |
| 161 | +```js |
| 162 | +await chatClient.startRealtimeNotifications(); |
| 163 | +``` |
| 164 | + |
| 165 | +Subscribe to an event when message is received. |
| 166 | + |
| 167 | +```js |
| 168 | +// subscribe to new message notifications |
| 169 | +chatClient.on("chatMessageReceived", (e) => { /*Render message*/}) |
| 170 | +``` |
| 171 | + |
| 172 | +Create [ChatThreadClient](https://azuresdkdocs.blob.core.windows.net/$web/javascript/azure-communication-chat/1.3.2-beta.1/classes/ChatThreadClient.html) to initiate client for operations related to specific chat thread. |
| 173 | + |
| 174 | +```js |
| 175 | +chatThreadClient = await chatClient.getChatThreadClient(threadIdInput.value); |
| 176 | +``` |
| 177 | + |
| 178 | +Send chat message in the Teams meeting chat associated with the Virtual appointment. |
| 179 | + |
| 180 | +```js |
| 181 | +let sendMessageRequest = { content: 'Hello world!' }; |
| 182 | +let sendMessageOptions = { senderDisplayName : 'Adele Vance' }; |
| 183 | +let sendChatMessageResult = await chatThreadClient.sendMessage(sendMessageRequest, sendMessageOptions); |
| 184 | +``` |
| 185 | + |
| 186 | +With all three phases, you have a user that can join Virtual appointments with audio, video, screen sharing and chat. This approach gives you full control over the user interface and the behavior of individual actions. |
| 187 | + |
| 188 | +## Next steps |
| 189 | +- Learn what [extensibility options](./overview.md) do you have for Virtual appointments. |
| 190 | +- Learn how to customize [before and after appointment](./before-and-after-appointment.md) |
| 191 | +- Learn how to customize [precall experience](./precall.md) |
| 192 | +- Learn how to customize [call experience](./call.md) |
0 commit comments