Skip to content

Commit 32a0b07

Browse files
ShawnJacksonShawnJackson
authored
Merge pull request #209670 from ktoliver/1982794-web
edit pass: UI Library web use cases include file
2 parents 8797c5d + 8ab5919 commit 32a0b07

File tree

1 file changed

+78
-94
lines changed

1 file changed

+78
-94
lines changed

‎articles/communication-services/concepts/ui-library/includes/web-ui-use-cases.md

Lines changed: 78 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,149 +1,133 @@
11
---
2-
title: Web UI Library use cases
3-
titleSuffix: An Azure Communication Services concept document
4-
description: Learn about the Web UI Library and how it can help you build communication experiences
52
author: ddematheu2
6-
manager: chrispalm
7-
services: azure-communication-services
8-
93
ms.author: dademath
104
ms.date: 06/30/2021
115
ms.topic: include
126
ms.service: azure-communication-services
137
---
148

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 components and composites in the Azure Communication Services UI Library to create call and chat experiences in your applications.
10+
11+
In a composite, call and chat capabilities are built in directly and exposed when you integrate the composite into an application. In a UI component, call and chat 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.
1712

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.
13+
Get more conceptual documentation, quickstarts, and examples in the [UI Library storybook](https://azure.github.io/communication-ui-library).
2314

24-
## Calling use cases
15+
## Call use cases
2516

26-
| Area | Use Cases |
17+
| Area | Use cases |
2718
| ------------------- | ------------------------------------------------------ |
28-
| Call Types | Join Teams Meeting |
29-
| | Join Azure Communication Services call with Group ID |
30-
| [Teams Interop](../../teams-interop.md) | Call Lobby |
31-
| | Transcription and recording alert banner |
32-
| Call Controls | Mute/unmute call |
33-
| | Video on/off on call |
34-
| | Screen Sharing |
35-
| | End call |
36-
| Participant Gallery | Remote participants are displayed on grid |
37-
| | Video preview available throughout call for local user |
38-
| | Default avatars available when video is off |
39-
| | Shared screen content displayed on participant gallery |
40-
| Call configuration | Microphone device management |
41-
| | Camera device management |
42-
| | Speaker device management |
43-
| | Local preview available for user to check video |
44-
| Participants | Participant roster |
19+
| Call types | Join a Microsoft Teams meeting |
20+
| | Join an Azure Communication Services call by using a group ID |
21+
| [Teams interoperability](../../teams-interop.md) | Join the call lobby |
22+
| | Display a transcription and recording alert banner |
23+
| Call controls | Mute and unmute a call |
24+
| | Turn video on and off during a call |
25+
| | Turn on screen sharing |
26+
| | End a call |
27+
| Participant gallery | Show remote participants on a grid |
28+
| | Make video preview available throughout a call for a local user |
29+
| | Make default avatars available when video is off |
30+
| | Show shared screen content in the participant gallery |
31+
| Call configuration | Manage the microphone device |
32+
| | Manage the camera device |
33+
| | Manage the speaker device |
34+
| | Make local preview available for user to check video |
35+
| Participants | Show a participant roster |
4536

4637
## Chat use cases
4738

48-
| Area | Use Cases |
39+
| Area | Use cases |
4940
| ------------ | ------------------------------------------------ |
50-
| Chat Types | Join a Teams Meeting Chat |
41+
| Chat types | Join a Microsoft Teams meeting chat |
5142
| | 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 |
57-
| | Chat title changed |
58-
| Participants | Participant roster |
43+
| Chat actions | Send a chat message |
44+
| | Receive a chat message |
45+
| Chat events | Show typing indicators |
46+
| | Show a read receipt |
47+
| | Show when a participant is added or removed |
48+
| | Show changes to the chat title |
49+
| Participants | Show a participant roster |
5950

6051
## Supported identities
6152

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)
53+
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).
54+
55+
## Teams interoperability
6456

65-
## Teams Interop Use Case
57+
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.
6658

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+
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:
7260

73-
:::image type="content" source="../../media/teams-interop-pattern.png" alt-text="Teams Interop pattern for calling and chat":::
61+
:::image type="content" source="../../media/teams-interop-pattern.png" border="false" alt-text="Diagram that shows the Teams interoperability pattern for calling and chat.":::
7462

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+
If you use UI components to deliver Teams interoperability experiences, begin by using UI Library examples to create key pieces of the experience:
64+
65+
- [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.
66+
- [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.
67+
- [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.
8068

8169
## Customization
8270

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.
71+
Use UI Library patterns to modify components to match the look and feel of your application. Customization is a key difference between composites and UI components in Communication Services. Composites have fewer customization options for a simpler integration experience.
72+
73+
The following table compares composites and UI components for customization use cases:
8574

86-
| Use Case | Composites | UI Components |
75+
| Use case | Composites | UI components |
8776
| --------------------------------------------------- | ---------- | ------------- |
88-
| Fluent based Theming | X | X |
89-
| Experience layout is composable | | X |
90-
| 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 |
77+
| Use Fluent-based theming | X | X |
78+
| Compose the experience layout | | X |
79+
| Use CSS styling to modify style properties | | X |
80+
| Replace icons | | X |
81+
| Modify the participant gallery layout | | X |
82+
| Modify the call control layout | X | X |
83+
| Inject data models to modify user metadata | X | X |
9584

9685
## Observability
9786

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.
87+
The state management architecture of UI Library is decoupled, so you can access stateful call 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.
9988

100-
Developers can hook into the stateful client to read the state, handle events and override behavior to pass onto the UI Components.
89+
The following table compares composites and UI components for observability use cases:
10190

102-
| Use Case | Composites | UI Components |
91+
| Use case | Composites | UI components |
10392
| ----------------------------------------- | ---------- | ------------- |
104-
| Call/Chat client state can be accessed | X | X |
105-
| Client events can be accessed and handled | X | X |
106-
| UI events can be accessed and handled | X | X |
93+
| Access call and chat client state | X | X |
94+
| Access and handle client events | X | X |
95+
| Access and handle UI events | X | X |
10796

10897
## Recommended architecture
10998

110-
:::image type="content" source="../../media/ui-library-architecture.png" alt-text="UI Library recommended client-server architecture":::
99+
Initialize a composite and base components by using an Azure Communication Services access token. It's important to get access tokens from 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).
111100

112-
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.
101+
:::image type="content" source="../../media/mobile-ui/ui-library-architecture.png" border="false" alt-text="Diagram that shows the recommended UI Library architecture.":::
114102

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.
103+
Call and chat client libraries 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.
116104

117-
| Contoso Responsibilities | UI Library Responsibilities |
105+
The following table summarizes initialization and resource management functions that are required to add context to a client library:
106+
107+
| Contoso responsibilities | UI Library responsibilities |
118108
| -------------------------------------------------------- | --------------------------------------------------------------- |
119-
| Provide access token from Azure | Pass through given access token to initialize components |
120-
| Provide refresh function | Refresh access token using developer provided function |
121-
| Retrieve/Pass join information for call or chat | Pass through call and chat information to initialize components |
122-
| Retrieve/Pass user information for any custom data model | Pass through custom data model to components to render |
109+
| Provide an access token from Azure | Pass through the provided access token to initialize components |
110+
| Provide a refresh function | Refresh the access token by using a developer-provided function |
111+
| Retrieve and pass join information for the call or chat | Pass through call and chat information to initialize components |
112+
| Retrieve and pass user information for any custom data model | Pass through a custom data model to components to render |
123113

124114
## Platform support
125115

126116
| SDK | Windows | macOS | Ubuntu | Linux | Android | iOS |
127117
| ------ | ------------------ | -------------------- | -------- | -------- | -------- | ---------- |
128-
| UI SDK | Chrome\*, new Edge | Chrome\*, Safari\*\* | Chrome\* | Chrome\* | Chrome\* | Safari\*\* |
129-
130-
\*Note that the latest version of Chrome is supported in addition to the
131-
previous two releases.
118+
| UI SDK | Chrome\*, Microsoft Edge | Chrome\*, Safari\*\* | Chrome\* | Chrome\* | Chrome\* | Safari\*\* |
132119

133-
\*\*Note that Safari versions 13.1+ are supported. Outgoing video for Safari
134-
macOS is not yet supported, but it is supported on iOS. Outgoing screen sharing
135-
is only supported on desktop iOS.
120+
\* The current version of Chrome and the two preceding releases are supported.
136121

137-
> [!div class="nextstepaction"]
138-
> [Visit UI Library Storybook](https://azure.github.io/communication-ui-library)
122+
\*\* Safari version 13.1 and later versions are supported. Outgoing video for Safari macOS isn't yet supported, but it is supported for iOS. Outgoing screen sharing is supported only on desktop iOS.
139123

140124
## Accessibility
141125

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.
126+
Accessibility by design is a principle across Microsoft products. UI Library follows this principle, and all UI components are fully accessible.
144127

145128
## Localization
146129

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.
130+
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.
131+
132+
> [!div class="nextstepaction"]
133+
> [Visit UI Library storybook](https://azure.github.io/communication-ui-library)

0 commit comments

Comments
 (0)