|
| 1 | +--- |
| 2 | +title: Enable scenarios using closed captions and the UI Library |
| 3 | +titleSuffix: An Azure Communication Services how-to guide |
| 4 | +description: Enable scenarios using closed captions and Azure Communication Services UI Library. |
| 5 | +author: garchiro7 |
| 6 | +ms.author: jorgegarc |
| 7 | +ms.service: azure-communication-services |
| 8 | +ms.subservice: calling |
| 9 | +ms.topic: how-to |
| 10 | +ms.date: 07/01/2024 |
| 11 | +ms.custom: references_regions |
| 12 | +zone_pivot_groups: acs-plat-ios-android |
| 13 | + |
| 14 | +#Customer intent: As a developer, I want setup closed captions into a call using the UI Library. |
| 15 | +--- |
| 16 | + |
| 17 | +# Closed captions |
| 18 | + |
| 19 | +Closed captions play a critical role in video voice calling apps, providing numerous benefits that enhance the accessibility, usability, and overall user experience of these platforms. |
| 20 | + |
| 21 | +In this article, you learn how to enable closed captions scenarios using the UI Library. There's two main scenarios to enable closed captions: Azure Communication Services video and voice calls and Interop calls. |
| 22 | + |
| 23 | +## Azure Communication Service based captions |
| 24 | + |
| 25 | +Supported for calls involving Azure Communication Service users only. Currently, Azure Communication Service captions **do not support language translation**. |
| 26 | + |
| 27 | +## Teams Interop closed captions |
| 28 | + |
| 29 | +Supported during calls with one or more Teams users. |
| 30 | + |
| 31 | +### Translation support |
| 32 | + |
| 33 | +Unlike Azure Communication Service closed captions, Teams Interop closed captions support translation. Users can opt to have closed captions translated into a different language through the captions settings. |
| 34 | + |
| 35 | +## How to use captions |
| 36 | + |
| 37 | +Captions are seamlessly integrated within the `CallingUILibrary`. |
| 38 | + |
| 39 | +1. **Activate captions**: |
| 40 | + - During a connected call, navigate to the control bar and click the **more button**. |
| 41 | + - In the menu pop-up, toggle to turn on captions. |
| 42 | + |
| 43 | +2. **Adjust spoken language**: |
| 44 | + - If a different language is being used in the meeting, users can change the spoken language via the UI. This change applies to all users in the call. |
| 45 | + |
| 46 | +3. **Set caption language** (for Teams Interop Closed Captions): |
| 47 | + - By default, live captions are displayed in the meeting or event spoken language. Live translated captions allow users to see captions translated into the language they’re most comfortable with. |
| 48 | + - Change the caption language by clicking on the **Captions language** button after captions start, if translation to a different language is desired. |
| 49 | + |
| 50 | +:::image type="content" source="./includes/closed-captions/mobile-ui-closed-captions.png" alt-text="Screenshot that shows the experience of closed captions integration in the UI Library."::: |
| 51 | + |
| 52 | +> [!NOTE] |
| 53 | +> Live translated captions in meetings are only available as part of [**Teams Premium**](https://learn.microsoft.com/MicrosoftTeams/teams-add-on-licensing/licensing-enhance-teams#meetings), an add-on license that provides additional features to make Teams meetings more personalized, intelligent, and secure. To get access to Teams Premium, contact your IT admin. More details you can find it [here](../calling-sdk/closed-captions-teams-interop-how-to.md). |
| 54 | +
|
| 55 | +## Supported languages |
| 56 | + |
| 57 | +Azure Communication Services supports various spoken languages for captions. The next table contains the list of supported language codes that you can use with the `setSpokenLanguage` method to set the desired language for captions. |
| 58 | + |
| 59 | +| Language | ACS Spoken Code | Teams Spoken Code | Teams Captions Code | |
| 60 | +|-----------------------|-----------------|-------------------|--------------------| |
| 61 | +| Arabic | ar-ae, ar-sa | ar-ae, ar-sa | ar | |
| 62 | +| Danish | da-dk | da-dk | da | |
| 63 | +| German | de-de | de-de | de | |
| 64 | +| English | en-au, en-ca, en-gb, en-in, en-nz, en-us | en-au, en-ca, en-gb, en-in, en-nz, en-us | en | |
| 65 | +| Spanish | es-es, es-mx | es-es, es-mx | es | |
| 66 | +| Finnish | fi-fi | fi-fi | fi | |
| 67 | +| French | fr-ca, fr-fr | fr-ca, fr-fr | fr, fr-ca | |
| 68 | +| Hindi | hi-in | hi-in | hi | |
| 69 | +| Italian | it-it | it-it | it | |
| 70 | +| Japanese | ja-jp | ja-jp | ja | |
| 71 | +| Korean | ko-kr | ko-kr | ko | |
| 72 | +| Norwegian | nb-no | nb-no | nb | |
| 73 | +| Dutch | nl-be, nl-nl | nl-be, nl-nl | nl | |
| 74 | +| Polish | pl-pl | pl-pl | pl | |
| 75 | +| Portuguese | pt-br | pt-br, pt-pt | pt, pt-pt | |
| 76 | +| Russian | ru-ru | ru-ru | ru | |
| 77 | +| Swedish | sv-se | sv-se | sv | |
| 78 | +| Chinese | zh-cn, zh-hk | zh-cn, zh-hk | zh-Hans, zh-Hant | |
| 79 | +| Czech | — | cs-cz | cs | |
| 80 | +| Slovak | — | sk-sk | sk | |
| 81 | +| Turkish | — | tr-tr | tr | |
| 82 | +| Vietnamese | — | vi-vn | vi | |
| 83 | +| Thai | — | th-th | th | |
| 84 | +| Hebrew | — | he-il | he | |
| 85 | +| Welsh | — | cy-gb | cy | |
| 86 | +| Ukrainian | — | uk-ua | uk | |
| 87 | +| Greek | — | el-gr | el | |
| 88 | +| Hungarian | — | hu-hu | hu | |
| 89 | +| Romanian | — | ro-ro | ro | |
| 90 | + |
| 91 | +Ensure the spoken language selected matches the language used in the call to accurately generate captions. |
| 92 | + |
| 93 | +## Prerequisites |
| 94 | + |
| 95 | +- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F). |
| 96 | +- A deployed Communication Services resource. [Create a Communication Services resource](../../quickstarts/create-communication-resource.md). |
| 97 | +- A user access token to enable the call client. [Get a user access token](../../quickstarts/access-tokens.md). |
| 98 | +- Optional: Completion of the [quickstart for getting started with the UI Library composites](../../quickstarts/ui-library/get-started-composites.md). |
| 99 | + |
| 100 | +## Set up the feature |
| 101 | + |
| 102 | +::: zone pivot="platform-android" |
| 103 | +[!INCLUDE [Enable closed captions in the Android UI Library](./includes/closed-captions/android.md)] |
| 104 | +::: zone-end |
| 105 | + |
| 106 | +::: zone pivot="platform-ios" |
| 107 | +[!INCLUDE [Enable closed captions in the iOS UI Library](./includes/closed-captions/ios.md)] |
| 108 | +::: zone-end |
| 109 | + |
| 110 | +## Next steps |
| 111 | + |
| 112 | +- [Learn more about the UI Library](../../concepts/ui-library/ui-library-overview.md) |
0 commit comments