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
Copy file name to clipboardExpand all lines: articles/communication-services/concepts/ui-library/includes/web-ui-use-cases.md
+42-36Lines changed: 42 additions & 36 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,31 +6,31 @@ ms.topic: include
6
6
ms.service: azure-communication-services
7
7
---
8
8
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.
9
+
Use the UI Library to create calling and chat experiences through Azure Communication Services UI components and composites. In a composite, capabilities are built in directly and exposed when you integrate the composite into an application. In a UI component, 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.
10
10
11
-
Visit [UI Library Storybook](https://azure.github.io/communication-ui-library) for more conceptual documentation, quickstarts, and examples.
11
+
Get more conceptual documentation, quickstarts, and examples in the [UI Library storybook](https://azure.github.io/communication-ui-library).
||Local preview available for user to check video |
33
-
| Participants |Participant roster |
18
+
|| Join an Azure Communication Services call by using a group ID |
19
+
|[Teams interoperability](../../teams-interop.md)|Join the call lobby |
20
+
||Display a transcription and recording alert banner |
21
+
| Call controls | Mute and unmute a call |
22
+
||Turn video on and off during a call |
23
+
||Turn on screen sharing |
24
+
|| End a call |
25
+
| Participant gallery |Show remote participants on a grid |
26
+
||Make video preview available throughout a call for a local user |
27
+
||Make default avatars available when video is off |
28
+
||Show shared screen content in the participant gallery |
29
+
| Call configuration |Manage microphone device|
30
+
||Manage camera device|
31
+
||Manage speaker device|
32
+
||Make local preview available for user to check video |
33
+
| Participants |Show participant roster |
34
34
35
35
## Chat use cases
36
36
@@ -40,48 +40,52 @@ Visit [UI Library Storybook](https://azure.github.io/communication-ui-library) f
40
40
|| Join an Azure Communication Services chat thread |
41
41
| Chat actions | Send a chat message |
42
42
|| Receive a chat message |
43
-
| Chat events |Typing indicators |
44
-
||Read receipt |
45
-
||Participant added or removed |
46
-
||Chat title changed |
47
-
| Participants |Participant roster |
43
+
| Chat events |Show typing indicators |
44
+
||Send read receipt |
45
+
||Show when a participant is added or removed |
46
+
||Show that the hat title changed |
47
+
| Participants |Show participant roster |
48
48
49
49
## Supported identities
50
50
51
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
52
53
53
## Teams interoperability
54
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.
55
+
For [Teams interoperability](../../teams-interop.md) scenarios, you can use UI Library composites to add a user to a Teams meeting via Communication Services. To enable Teams interoperability, use either the default features in the call composite or the chat composite, or use UI components to build a custom experience.
56
56
57
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:
58
58
59
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.":::
60
60
61
61
If you use UI components to deliver Teams interoperability experiences, begin by using UI Library examples to create key pieces of the experience:
62
62
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.
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 elements look like Microsoft Teams.
66
66
67
67
## Customization
68
68
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.
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 for a simpler integration experience.
70
+
71
+
The following table compares composites and UI components for customization use cases:
| Use CSS styling to modify style properties || X |
76
78
| Replace icons || X |
77
79
| Modify the participant gallery layout || X |
78
80
| Modify the call control layout | X | X |
79
-
| Inject data models can to modify user metadata | X | X |
81
+
| Inject data models to modify user metadata | X | X |
80
82
81
83
## Observability
82
84
83
85
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.
84
86
87
+
The following table compares composites and UI components for observability use cases:
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).
96
98
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:
99
+
:::image type="content" source="../../media/mobile-ui/ui-library-architecture.png" border="false" alt-text="Diagram that shows the recommended UI Library architecture.":::
100
+
101
+
Call and chat client libraries also must have the context for the call or chat they join. Like user access tokens, disseminate the context to clients by using your own trusted service.
102
+
103
+
The following table summarizes initialization and resource management functions that are required to add context to a client library:
\* The current version of Chrome and the two preceding releases are supported.
113
119
@@ -122,4 +128,4 @@ Accessibility by design is a principle across Microsoft products. UI Library fol
122
128
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