|
1 | 1 | --- |
2 | | -title: UI Library for Mobile native platforms use cases scenarios |
3 | | -titleSuffix: An Azure Communication Services - UI Library for Mobile native platforms use cases scenarios |
4 | | -description: In this document, introduce the UI Library for Mobile native platforms capabilities and how is going to work in your applications |
5 | | -author: jorgegarc |
6 | | - |
| 2 | +author: garchiro7 |
7 | 3 | ms.author: jorgegarc |
8 | | -ms.date: 09/14/2021 |
9 | | -ms.topic: include |
10 | 4 | ms.service: azure-communication-services |
| 5 | +ms.topic: include |
| 6 | +ms.date: 09/14/2021 |
11 | 7 | --- |
12 | 8 |
|
13 | | -The UI Library for iOS and Android supports calling use cases by using the **calling composite**. |
| 9 | +Use the call composite in the Azure Communication Services UI Library to create call experiences in your for iOS and Android applications. By using a couple lines of code, you can easily integrate an entire call experience in your application. Composites in Communication Services manage the entire lifecycle of the call, from setup until the call ends. |
14 | 10 |
|
15 | | -Composites enable developers to easily integrate a whole calling experience into their application with only a couple of lines of code; those composites take care of the entire lifecycle of the call from setup to the call ending. |
| 11 | +## Call use cases |
16 | 12 |
|
17 | | -## Calling |
| 13 | +You can use the call composite in Communication Services to create these use cases: |
18 | 14 |
|
19 | | -| Area | Use Cases | |
| 15 | +| Area | Use cases | |
20 | 16 | | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------ | |
21 | | -| Call Types | Join Teams Meeting | |
22 | | -| | Join Azure Communication Services call with Group ID | |
23 | | -| [Teams Interop](../../teams-interop.md) | Call Lobby | |
24 | | -| | Transcription and recording alert banner | |
25 | | -| Participant Gallery | Remote participants are displayed on grid | |
26 | | -| | Video preview available throughout call for local user | |
27 | | -| | Default avatars available when video is off | |
28 | | -| | Shared screen content displayed on participant gallery | |
29 | | -| | Participant Avatar Customization | |
30 | | -| | Participant roster | |
31 | | -| Call configuration | Microphone device management | |
32 | | -| | Camera device management | |
33 | | -| | Speaker device management(wired & bluetooth supported) | |
34 | | -| | Local preview available for user to check video | |
35 | | -| Call Controls | Mute/unmute call | |
36 | | -| | Video on/off on call | |
37 | | -| | End call | |
38 | | -| | Hold/Resume Call on Audio Interruption | |
39 | | - |
40 | | -## Supported Identities |
41 | | - |
42 | | -An Azure Communication Services identity is required to initialize the composites and authenticate to the service. |
43 | | -For more information on authentication, see [Authentication](../../authentication.md) and [Access Tokens](../../../quickstarts/access-tokens.md) |
44 | | - |
45 | | -## Teams Interop |
46 | | - |
47 | | - |
48 | | - |
49 | | -For [Teams Interop](../../teams-interop.md) scenarios, developers can use the UI Library composites to join Teams meetings through Azure Communication Services. |
50 | | -To enable Teams Interop, developers can use the calling composite, which will take care of the lifecycle of joining a Teams Interop call. |
51 | | - |
52 | | -:::image type="content" source="../../media/mobile-ui/teams-meet.png" alt-text="Pre-meeting experience"::: |
| 17 | +| Call types | Join a Microsoft Teams meeting | |
| 18 | +| | Join a 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 | +| Participant gallery | Show remote participants on a grid | |
| 22 | +| | Make video preview available throughout a call for a local user | |
| 23 | +| | Make default avatars available when video is off | |
| 24 | +| | Show shared screen content in the participant gallery | |
| 25 | +| | Enable participant avatar customization | |
| 26 | +| | Show a participant roster | |
| 27 | +| Call configuration | Manage the microphone device | |
| 28 | +| | Manage the camera device | |
| 29 | +| | Manage the speaker device (wired or Bluetooth) | |
| 30 | +| | Make local preview available for a user to check video | |
| 31 | +| Call controls | Mute and unmute a call | |
| 32 | +| | Turn video on or off during a call | |
| 33 | +| | End a call | |
| 34 | +| | Hold and resume a call after audio interruption | |
| 35 | + |
| 36 | +## Supported identities |
| 37 | + |
| 38 | +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). |
| 39 | + |
| 40 | +## Teams interoperability |
| 41 | + |
| 42 | +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 the call composite. The composite manages the entire lifecycle of joining a Teams interoperability call. |
| 43 | + |
| 44 | +:::image type="content" source="../../media/mobile-ui/teams-interop-diagram.png" border="false" alt-text="Diagram that shows the Teams interoperability pattern for call and chat."::: |
| 45 | + |
| 46 | +The following figure shows an example of the user experience before a caller is added to a Teams meeting: |
| 47 | + |
| 48 | +:::image type="content" source="../../media/mobile-ui/teams-meet.png" alt-text="Screenshot that shows the user experience before a caller is added to a Teams meeting."::: |
53 | 49 |
|
54 | 50 | ## View shared content |
55 | 51 |
|
56 | | -The UI Library for Mobile native platforms provides the capability of the calling participants to view the shared content when other participants share their screens during the calling. Also, the participant can zoom on the screen, making the pinching gestures over the screen to get a better look over the shared content. |
| 52 | +Through the UI Library for mobile native platforms, call participants can view shared content when other participants share their screens during a Teams call. A remote participant can use stretch and pinch gestures to zoom in or out on the shared content in the call. |
57 | 53 |
|
58 | 54 | ## Theming |
59 | 55 |
|
60 | | -The UI Library Calling Composite for iOS and Android provides the capability for developers to create a custom theme of the all experience by passing a set of theming colors. [How to create your theme.](../../../how-tos/ui-library-sdk/theming.md) |
| 56 | +You can use the UI Library call composite for iOS and Android to create a custom theme of a caller's experience. To create the platform experience, pass a set of theming colors as shown in the following table. For more information, see [How to create your theme](../../../how-tos/ui-library-sdk/theming.md). |
61 | 57 |
|
62 | 58 | | Android | iOS | |
63 | 59 | | -------------------------------------------------------- | --------------------------------------------------------------- | |
64 | | -| :::image type="content" source="../../media/mobile-ui/android-color.png" alt-text="android theming"::: | :::image type="content" source="../../media/mobile-ui/ios-dark.png" alt-text="iOS theming"::: | |
| 60 | +| :::image type="content" source="../../media/mobile-ui/android-color.png" alt-text="Screenshot that shows Android theming for a caller experience."::: | :::image type="content" source="../../media/mobile-ui/ios-dark.png" alt-text="Screenshot that shows iOS theming for a caller experience."::: | |
65 | 61 |
|
66 | 62 | ## Screen size |
67 | 63 |
|
68 | | -The calling composite offers to adapt to any screen size that would bring support from 5" screens to tablets, get the dynamic participants' roster layout, provide clarity on the view, and focus on the conversation. |
| 64 | +You can adapt the Azure Communication Services call composite to adapt to screen sizes from 5 inches to tablet size. Use split mode and tablet mode in the call composite to get the dynamic participants' roster layout, provide clarity on the view, and focus on the conversation. |
69 | 65 |
|
70 | 66 | |Split mode | Tablet mode| |
71 | 67 | |---------|---------| |
72 | | -| :::image type="content" source="../../media/mobile-ui/meet-splitscreen.png" alt-text="split screen"::: | :::image type="content" source="../../media/mobile-ui/tablet-landscape.png" alt-text="tablet mode"::: | |
| 68 | +| :::image type="content" source="../../media/mobile-ui/meet-splitscreen.png" alt-text="Screenshot that demonstrates a split-screen view."::: | :::image type="content" source="../../media/mobile-ui/tablet-landscape.png" alt-text="Screenshot that demonstrates tablet mode."::: | |
73 | 69 |
|
74 | 70 | ## Localization |
75 | 71 |
|
76 | | -Localization is a key to making products that can be used across the world and by people who speak different languages. The UI Library, provides support for 12 languages: ***English, Spanish, French, German, Italian, Japanese, Korean, Dutch, Portuguese, Russian, Turkish and Chinese*** and RTL capabilities. [How to add localization to your app.](../../../how-tos/ui-library-sdk/localization.md) |
| 72 | +Localization is key to making products for users around the world and who speak different languages. UI Library supports 12 languages: English, Spanish, French, German, Italian, Japanese, Korean, Dutch, Portuguese, Russian, Turkish, and Chinese. It also supports right-to-left languages. For more information, see [How to add localization to your app](../../../how-tos/ui-library-sdk/localization.md). |
77 | 73 |
|
78 | 74 | ## Accessibility |
79 | 75 |
|
80 | | -Accessibility is a key focus of the calling libraries. Screen Readers are supported to make important announcements regarding calling status and to help ensure that visibility impaired users can effectively participate in using the application. |
| 76 | +Accessibility is a key focus of the call libraries. You can use a screen reader to make important announcements about call status and to help ensure that visually impaired users can effectively participate when they use the application. |
81 | 77 |
|
82 | | -## Participant View Data Injection |
| 78 | +## Participant view data injection |
83 | 79 |
|
84 | | -The UI Library for Mobile native platforms gives the developers the ability to modify both Local and Remote Participants and how they are displayed in the call. On call launch the developer can supply a local avatar and custom display name to show to the local user. For Remote Users, methods are available to allow customization of avatars as they join the meetings. [How to customize participant views.](../../../how-tos/ui-library-sdk/data-model.md) |
| 80 | +Use the UI Library for mobile native platforms to give local and remote participants the option to modify how they appear as users in a call. A local participant can choose a local avatar and custom display name when a call begins. A remote user can create a customized avatar when they join the meeting. For more information, see [How to customize participant views](../../../how-tos/ui-library-sdk/data-model.md). |
85 | 81 |
|
86 | | -:::image type="content" source="../../media/mobile-ui/ios-composite.gif" alt-text="Gif animation shows the pre-meeting experience and joining experience on iOS."::: |
| 82 | +:::image type="content" source="../../media/mobile-ui/ios-composite.gif" alt-text="GIF animation that shows the pre-meeting experience and joining experience on iOS."::: |
87 | 83 |
|
88 | | -## Recommended Architecture |
| 84 | +## Recommended architecture |
89 | 85 |
|
90 | | -Composites are initialized using an Azure Communication Services access token. Access tokens should be procured from Azure Communication Services through a |
91 | | -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. |
| 86 | +Initialize a composite 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). |
92 | 87 |
|
93 | | -:::image type="content" source="../../media/mobile-ui/ui-library-architecture.png" alt-text="Recommended architecture diagram"::: |
| 88 | +:::image type="content" source="../../media/mobile-ui/ui-library-architecture.png" border="false" alt-text="Diagram that shows the recommended architecture for UI Library."::: |
94 | 89 |
|
95 | | -These client libraries also require the context for the call they'll 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. |
| 90 | +Call and chat client libraries must have the context for the call 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 that are required to add context to a client library: |
96 | 91 |
|
97 | | -| Contoso Responsibilities | UI Library Responsibilities | |
| 92 | +| Contoso responsibilities | UI Library responsibilities | |
98 | 93 | | -------------------------------------------------------- | --------------------------------------------------------------- | |
99 | | -| Provide access token from Azure | Pass through given access token to initialize components | |
100 | | -| Provide refresh function | Refresh access token using developer provided function | |
101 | | -| Retrieve/Pass join information for call or chat | Pass through call and chat information to initialize components | |
102 | | -| Retrieve/Pass user information for any custom data model | Pass through custom data model to components to render | |
| 94 | +| Provide an access token from Azure | Pass through the provided access token to initialize components | |
| 95 | +| Provide a refresh function | Refresh the access token by using a developer-provided function | |
| 96 | +| Retrieve and pass join information for the call or chat | Pass through call and chat information to initialize components | |
| 97 | +| Retrieve and pass user information for any custom data model | Pass through a custom data model to components to render | |
103 | 98 |
|
104 | 99 | ## Platform support |
105 | 100 |
|
106 | 101 | |Platform | Versions| |
107 | 102 | |---------|---------| |
108 | | -| iOS | iOS 14+ | |
109 | | -| Android | Api 21+ | |
| 103 | +| iOS | iOS 14 and later | |
| 104 | +| Android | API 21 and later | |
110 | 105 |
|
111 | 106 | > [!div class="nextstepaction"] |
112 | 107 | > [Quickstart guides](../../../quickstarts/ui-library/get-started-composites.md) |
0 commit comments