You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
titleSuffix: An Azure Communication Services concept document
4
-
description: Learn about the Web UI Library and how it can help you build communication experiences
5
2
author: ddematheu2
6
-
manager: chrispalm
7
-
services: azure-communication-services
8
-
9
3
ms.author: dademath
10
4
ms.date: 06/30/2021
11
5
ms.topic: include
12
6
ms.service: azure-communication-services
13
7
---
14
8
15
-
> [!NOTE]
16
-
> For detailed documentation on the UI Library, visit the [UI Library Storybook](https://azure.github.io/communication-ui-library). There you will find additional conceptual documentation, quickstarts and examples.
9
+
Use the UI Library to create calling and chat experiences through the Azure Communication Services UI components and composites. In a composite, capabilities are built in directly and exposed when the composite is integrated into an application. In a UI components, capabilities are exposed through a combination of UI functionality and underlying stateful libraries. To take full advantage of these capabilities, we recommend that you use UI components with stateful call and chat client libraries.
17
10
18
-
UI Library supports many cases across calling and chat experiences.
19
-
These capabilities are available through UI Components and Composites.
20
-
For Composites, these capabilities are built directly in and exposed when the composite is integrated into an application.
21
-
For UI Components, these capabilities are exposed through a combination of UI functionality and underlying stateful libraries.
22
-
To take full advantage of these capabilities, we recommend using the UI Components with the stateful call and chat client libraries.
11
+
Visit [UI Library Storybook](https://azure.github.io/communication-ui-library) for more conceptual documentation, quickstarts, and examples.
| Chat types| Join a Microsoft Teams meeting chat|
51
40
|| Join an Azure Communication Services chat thread |
52
-
| Chat Actions| Send chat message |
53
-
|| Receive chat message |
54
-
| Chat Events| Typing Indicators|
55
-
|| Read Receipt|
56
-
|| Participant added/removed |
41
+
| Chat actions| Send a chat message |
42
+
|| Receive a chat message |
43
+
| Chat events| Typing indicators|
44
+
|| Read receipt|
45
+
|| Participant added or removed |
57
46
|| Chat title changed |
58
47
| Participants | Participant roster |
59
48
60
49
## Supported identities
61
50
62
-
An Azure Communication Services identity is required to initialize the stateful client libraries and authenticate to the service.
63
-
For more information on authentication, see [Authentication](../../authentication.md) and [Access Tokens](../../../quickstarts/access-tokens.md)
51
+
To initialize a composite and authenticate to the service, a user must have an Azure Communication Services identity. For more information, see [Authenticate to Azure Communication Services](../../authentication.md) and [Quickstart: Create and manage access tokens](../../../quickstarts/access-tokens.md).
52
+
53
+
## Teams interoperability
54
+
55
+
For [Teams interoperability](../../teams-interop.md) scenarios, you can use UI Library composites to join a user to a Teams meeting via Communication Services. To enable Teams interoperability, use either call and chat composites directly, or use UI components to build a custom experience.
64
56
65
-
## Teams Interop Use Case
57
+
When you add both calling and chat to an application, it's important to remember that the chat client can't be initialized until the participant is admitted to the call. After the participant is admitted, the chat client can be initialized to join the meeting chat thread. The pattern is demonstrated in the following figure:
66
58
67
-
For [Teams Interop](../../teams-interop.md) scenarios, developers can use UI Library Components to join Teams meetings through Azure Communication Services.
68
-
To enable Teams Interop, developers can either use calling and chat composites directly or use UI Components to build a custom experience.
69
-
When enabling applications with both calling and chat, its important to remember that the chat client can't be initialized until the participant has been admitted to the call.
70
-
Once admitted, the chat client can be initialized to join the meeting chat thread.
71
-
See the diagram below for guidance:
59
+
:::image type="content" source="../../media/teams-interop-pattern.png" border="false" alt-text="Diagram that shows the Teams interoperability pattern for calling and chat.":::
72
60
73
-
:::image type="content" source="../../media/teams-interop-pattern.png" alt-text="Teams Interop pattern for calling and chat":::
61
+
If you use UI components to deliver Teams interoperability experiences, begin by using UI Library examples to create key pieces of the experience:
74
62
75
-
When using UI Components to deliver Teams Interop experiences, UI Library provides examples for key pieces of the experience.
76
-
For example:
77
-
-[Lobby Example](https://azure.github.io/communication-ui-library/?path=/story/examples-teams-interop--lobby): Sample lobby for participant to wait to be admitted to the call.
78
-
-[Compliance banner](https://azure.github.io/communication-ui-library/?path=/story/examples-teams-interop--compliance-banner): Sample banner to show the user whether the call is being recorded or not.
79
-
-[Teams Theme](https://azure.github.io/communication-ui-library/?path=/story/examples-themes--teams): Sample theme that makes the UI Library looks like Microsoft Teams.
63
+
-[Lobby Example](https://azure.github.io/communication-ui-library/?path=/story/examples-teams-interop--lobby): A sample lobby where a participant can wait to be admitted to a call.
64
+
-[Compliance banner](https://azure.github.io/communication-ui-library/?path=/story/examples-teams-interop--compliance-banner): A sample banner that shows the user if the call is being recorded.
65
+
-[Teams theme](https://azure.github.io/communication-ui-library/?path=/story/examples-themes--teams): A sample theme that makes UI Library look like Microsoft Teams.
80
66
81
67
## Customization
82
68
83
-
UI Library exposes patterns for developers to modify components to fit the look and feel of their application.
84
-
These capabilities are a key area of differentiation between Composites and UI Components, where Composites provide less customization options in favor of a simpler integration experience.
69
+
Use UI Library patterns to modify components to fit the look and feel of your application. These capabilities are a key area of differentiation between Communication Services composites and UI components. Composites have fewer customization options so that they have a simpler integration experience.
| CSS Styling can be used to modify style properties || X |
91
-
|Icons can be replaced|| X |
92
-
|Participant gallery layout can be modified|| X |
93
-
|Call control layout can be modified| X | X |
94
-
|Data models can be injected to modify user metadata | X | X |
73
+
|Use Fluent-based theming| X | X |
74
+
|Compose the experience layout|| X |
75
+
|Use CSS styling modify style properties || X |
76
+
|Replace icons|| X |
77
+
|Modify the participant gallery layout|| X |
78
+
|Modify the call control layout| X | X |
79
+
|Inject data models can to modify user metadata | X | X |
95
80
96
81
## Observability
97
82
98
-
As part of the decoupled state management architecture of the UI Library, developers are able to access the stateful calling and chat clients directly.
83
+
The state management architecture of UI Library is decoupled, so you can access the stateful calling and chat clients directly. You can hook into the stateful client to read the state, handle events, and override behavior to pass onto the UI components.
99
84
100
-
Developers can hook into the stateful client to read the state, handle events and override behavior to pass onto the UI Components.
Composite and Base Components are initialized using an Azure Communication Services access token. Access tokens should be procured from Azure Communication Services through a
113
-
trusted service that you manage. See [Quickstart: Create Access Tokens](../../../quickstarts/access-tokens.md) and [Trusted Service Tutorial](../../../tutorials/trusted-service-tutorial.md) for more information.
95
+
Initialize a composite and base components by using an Azure Communication Services access token. It's important to get access tokens from Azure Communication Services through a trusted service that you manage. For more information, see [Quickstart: Create and manage access tokens](../../../quickstarts/access-tokens.md) and the [trusted service tutorial](../../../tutorials/trusted-service-tutorial.md).
114
96
115
-
These client libraries also require the context for the call or chat they will join. Similar to user access tokens, this context should be disseminated to clients via your own trusted service. The list below summarizes the initialization and resource management functions that you need to operationalize.
97
+
These client libraries also require the context for the call or chat they join. Like user access tokens, disseminate the context to clients by using your own trusted service. The following table summarizes the initialization and resource management functions to operationalize to add context to a client library:
\*\* Safari version 13.1 and later versions are supported. Outgoing video for Safari macOS is not yet supported, but it is supported on iOS. Outgoing screen sharing is supported only on desktop iOS.
139
115
140
116
## Accessibility
141
117
142
-
Accessibility by design is a principle across Microsoft products.
143
-
UI Library follows this principle in making sure that all UI Components are fully accessible.
118
+
Accessibility by design is a principle across Microsoft products. UI Library follows this principle, and all UI components are fully accessible.
144
119
145
120
## Localization
146
121
147
-
Localization is a key to making products that can be used across the world and by people who who speak different languages.
148
-
UI Library will provide out of the box support for some languages and capabilities such as RTL.
149
-
Developers can provide their own localization files to be used for the UI Library.
122
+
Localization is key to making products for users around the world and who speak different languages. UI Library provides default support for some languages and capabilities, including right-to-left languages. You can provide their own localization files to use with UI Library.
0 commit comments