UI 連結庫使用案例

  • 文章

使用 Azure 通訊服務 UI 連結庫中的元件和複合，在應用程式中建立通話和聊天體驗。

在複合中，當您將複合整合至應用程式時，會直接內建通話和聊天功能並公開。 在UI元件中，呼叫和聊天功能會透過UI功能和基礎具狀態連結庫的組合來公開。 若要充分利用這些功能，建議您搭配具狀態通話和聊天客戶端連結庫使用UI元件。

在UI連結庫劇本中取得更多概念性檔、快速入門和範例。

呼叫使用案例

區域 使用案例
呼叫類型 加入 Microsoft Teams 會議
使用群組標識碼加入 Azure 通訊服務 呼叫
加入 Azure 通訊服務 會議室
啟動另一位 Azure 通訊服務 用戶的輸出通話
啟動電話號碼的 撥出通話
Teams 互操作性 加入通話大廳
顯示轉譯和錄製警示橫幅
通話控制項 將呼叫靜音和取消靜音
在通話期間開啟和關閉視訊
開啟屏幕共用
結束通話
參與者資源庫 在方格上顯示遠程參與者
讓視訊預覽可在本機使用者的通話中取得
當視訊關閉時，請讓預設虛擬人偶可供使用
在參與者資源庫中顯示共享畫面內容
通話組態 管理麥克風裝置
管理相機裝置
管理喇叭裝置
讓用戶可檢查影片的本機預覽
參與者 顯示參與者名冊

聊天使用案例

區域 Azure Communication Services Chat Teams 互操作性聊天
聊天類型 加入 Azure 通訊服務 聊天對話 加入 Microsoft Teams 會議聊天
聊天動作 傳送和接收簡訊 傳送和接收簡訊
接收 RTF 簡訊 接收 RTF 簡訊
- 接收內嵌影像*
傳送和接收檔案附件 接收檔案附件*
聊天活動 傳送和接收輸入指標 傳送和接收輸入指標**
傳送和接收讀取回條 傳送和接收讀取回條
顯示新增或移除參與者的時機 顯示新增或移除參與者的時機
參與者 顯示參與者名冊 顯示參與者名冊

*內嵌影像和檔案附件支援目前為公開預覽狀態。 預覽 API 和 SDK 在沒有服務等級協議的情況下提供。 我們建議您不要將它們用於生產工作負載。 某些功能可能不受支援，或可能具有限制的功能。 如需詳細資訊，請檢閱 Microsoft Azure 預覽版的補充使用規定。

**從 Teams 使用者輸入事件的顯示名稱可能無法正確顯示。

支援的身分識別

若要初始化複合，並且向服務進行驗證，用戶必須具有 Azure 通訊服務 身分識別。 如需詳細資訊，請參閱驗證至 Azure 通訊服務 和快速入門：建立和管理存取令牌。

Teams 互操作性

針對 Teams 互操作性 案例，您可以使用 UI 連結庫複合，透過通訊服務將使用者新增至 Teams 會議。 若要啟用 Teams 互操作性，請使用通話複合或聊天複合中的預設功能，或使用 UI 元件來建置自定義體驗。

當您將通話和聊天新增至應用程式時，請務必記住，在參與者進入通話之前，無法初始化聊天用戶端。 在參與者被接納之後，可以初始化聊天用戶端以加入會議聊天對話。 下圖示範此模式：

Diagram that shows the Teams interoperability pattern for calling and chat.

如果您使用 UI 元件來提供 Teams 互操作性體驗，請先使用 UI 連結庫範例來建立體驗的主要部分：

  • 大廳範例。 範例大廳，參與者可以等候進入通話。
  • 合規性橫幅。 範例橫幅，會在錄製通話時顯示使用者。
  • Teams 主題。 讓UI連結庫元素看起來像 Microsoft Teams 的範例主題。
  • 影像共用*。 Azure 通訊服務終端使用者的範例可以接收Teams使用者所傳送的影像。
  • 檔案共用*。 Azure 通訊服務終端使用者的範例可以接收 Teams 使用者所傳送的檔案附件。

自訂

使用UI連結庫模式來修改元件，以符合應用程式的外觀和風格。 自定義是通訊服務中複合和UI元件之間的主要差異。 複合具有較少的自定義選項，可簡化整合體驗。

下表比較自訂使用案例的複合和UI元件：

使用案例 複合材料 UI 元件
使用 Fluent 型主題 X X
撰寫體驗版面配置 X
使用 CSS 樣式修改樣式屬性 X
取代圖示 X
修改參與者資源庫配置 X
修改呼叫控件配置 X X
插入數據模型以修改使用者元數據 X X

可檢視性

UI 連結庫的狀態管理架構已分離，因此您可以直接存取具狀態的通話和聊天用戶端。 您可以連結至具狀態用戶端，以讀取狀態、處理事件，以及覆寫行為，以傳遞至UI元件。

下表比較複合和UI元件是否有可觀察性使用案例：

使用案例 複合材料 UI 元件
存取通話和聊天客戶端狀態 X X
存取及處理用戶端事件 X X
存取和處理UI事件 X X

使用 Azure 通訊服務 存取令牌，初始化複合和基底元件。 請務必透過您管理的受信任服務，從通訊服務取得存取令牌。 如需詳細資訊，請參閱 快速入門：建立和管理存取令牌 和 受信任的服務教學課程。

Diagram that shows the recommended UI Library architecture.

通話和聊天客戶端連結庫必須具有他們加入之通話或聊天的內容。 如同使用者存取令牌，請使用您自己的受信任服務將內容傳播給用戶端。

下表摘要說明將內容新增至用戶端連結庫所需的初始化和資源管理功能：

Contoso 責任 UI 連結庫責任
提供來自 Azure 的存取令牌 傳遞提供的存取令牌以初始化元件
提供重新整理函式 使用開發人員提供的函式重新整理存取令牌
擷取並傳遞通話或聊天的聯結資訊 傳遞通話和聊天資訊以初始化元件
擷取並傳遞任何自定義數據模型的用戶資訊 將自定義數據模型傳遞至要轉譯的元件

平台支援

SDK Windows macOS Ubuntu \(英文\) Linux Android iOS
UI SDK Chrome*、Microsoft Edge Chrome*，Safari** 鉻* 鉻* 鉻* Safari**

* 支援目前版本的 Chrome 和前兩個版本。

** 支援 Safari 13.1 版和更新版本。 尚未支援Safari macOS的外寄視訊，但支援iOS。 只有桌面 iOS 支援傳出畫面共用。

協助工具選項

設計上的輔助功能是 Microsoft 產品中的原則。 UI 連結庫遵循此原則，而且所有UI元件皆可完全存取。

當地語系化

當地語系化是為世界各地的用戶和說話不同語言的使用者製作產品的關鍵。 UI 連結庫提供某些語言和功能的默認支援，包括從右至左的語言。 您可以提供自己的當地語系化檔案來搭配 UI 連結庫使用。

流覽 UI 連結庫劇本

CallComposite使用 Azure 通訊服務 UI 連結庫中的 和 ChatComposite ，在您的 iOS 和 Android 應用程式中建立呼叫體驗。 藉由使用幾行程式代碼，您可以輕鬆地在應用程式中整合整個通話和聊天體驗。 通訊服務中的複合會管理通話和聊天的整個生命週期，從設定到通話和聊天結束。

呼叫使用案例

您可以使用通訊服務中的呼叫複合來建立這些使用案例：

區域 使用案例
呼叫類型 加入 Microsoft Teams 會議
使用群組標識碼加入通話
Teams 互操作性 加入通話大廳
顯示轉譯和錄製警示橫幅
參與者資源庫 在方格上顯示遠程參與者
讓視訊預覽可在本機使用者的通話中取得
當視訊關閉時，請讓預設虛擬人偶可供使用
在參與者資源庫中顯示共享畫面內容
啟用參與者虛擬人偶自定義
顯示參與者名冊
通話組態 管理麥克風裝置
管理相機裝置
管理喇叭裝置（有線或 藍牙）
讓用戶可檢查影片的本機預覽
通話控制項 將呼叫靜音和取消靜音
在通話期間開啟或關閉視訊
結束通話
音訊中斷後保留並繼續通話

Teams 互操作性

針對 Teams 互操作性 案例，您可以使用 UI 連結庫複合，透過通訊服務將使用者新增至 Teams 會議。 若要啟用Teams互操作性，請使用通話複合。 複合會管理加入Teams互操作性呼叫的整個生命週期。

Diagram that shows the Teams interoperability pattern for call and chat.

下圖顯示將來電者新增至 Teams 會議之前使用者體驗的範例：

Screenshot that shows the user experience before a caller is added to a Teams meeting.

檢視共享內容

透過行動原生平臺的 UI 連結庫，當其他參與者在 Teams 通話期間共用其畫面時，通話參與者可以檢視共用的內容。 遠端參與者可以使用伸展和捏合手勢來放大或縮小通話中的共享內容。

佈景主題設定

您可以使用 iOS 和 Android 的 UI 連結庫呼叫複合來建立呼叫端體驗的自定義主題。 若要建立平台體驗，請傳遞一組主題色彩，如下表所示。 如需詳細資訊，請參閱 如何建立您的主題。

Android iOS
Screenshot that shows Android theming for a caller experience. Screenshot that shows iOS theming for a caller experience.

螢幕大小

您可以調整 Azure 通訊服務 呼叫複合，以適應從5英吋到平板電腦大小的螢幕大小。 在通話複合中使用分割模式和平板電腦模式來取得動態參與者的名冊配置、提供清楚的檢視，以及專注於交談。

分割模式 平板電腦模式
Screenshot that demonstrates a split-screen view. Screenshot that demonstrates tablet mode.

當地語系化

當地語系化是為世界各地的用戶和說話不同語言的使用者製作產品的關鍵。 UI 連結庫支援 12 種語言：英文、西班牙文、法文、德文、義大利文、日文、韓文、荷蘭文、葡萄牙文、俄文、土耳其文和中文。 它也支援由右至左的語言。 如需詳細資訊，請參閱 如何將當地語系化新增至您的應用程式。

協助工具選項

輔助功能是呼叫連結庫的重點。 您可以使用螢幕助讀程式來發出關於通話狀態的重要公告，並協助確保視覺受損的使用者在使用應用程式時可以有效地參與。

檢視數據插入

使用適用於行動原生平臺的UI連結庫，為本機和遠端參與者提供選項，以自定義他們在通話中以使用者身分顯示的方式。 本機參與者可以在通話開始時，選擇本機虛擬人偶、自定義顯示名稱、導覽標題和副標題。 遠端使用者可以在加入會議時建立自定義的虛擬人偶。 如需詳細資訊，請參閱 如何自定義會議前檢視。

GIF animation that shows the pre-meeting experience and joining experience on iOS.

略過安裝畫面

UI 連結庫提供加入呼叫的功能，可略過通話加入體驗的設定畫面。 根據預設，用戶會經過安裝畫面以加入通話。 在這裡，用戶會設定通話設定，例如相機開啟或關閉、麥克風開啟或關閉和音訊裝置選取，再加入通話。 此畫面需要用戶互動才能加入通話，某些使用者可能不需要此動作。 因此，我們藉由略過安裝畫面並提供呼叫組態 API，提供加入呼叫的功能。 如需詳細資訊，請參閱 如何使用略過安裝程序畫面功能

僅限音訊模式

UI 連結庫中的僅限音訊模式可讓參與者只使用其音訊加入通話，而不需共用或接收視訊。 這項功能可用來節省頻寬並最大化隱私權。 啟用時，僅音訊模式會自動停用傳送和接收數據流的視訊功能，並藉由移除視訊相關控件來調整UI以反映這項變更。 此模式可透過 CallComposite 設定啟用，透過僅限音訊快速入門取得 的詳細資訊

方向

UI 連結庫支援在啟動連結庫體驗之前，個別設定每個畫面的螢幕方向設定。 這可讓應用程式開發人員為呼叫體驗設定固定方向，以符合其應用程式方向。 若要深入瞭解 Android 和 iOS 平台支援的方向清單，以及 API 的使用方式，請參閱 如何使用方向功能

多任務和圖片

UI 連結庫支援通話畫面的圖片模式圖片。 在通話中時，使用者可以按兩下通話畫面上的 [上一步] 按鈕，以啟用多任務功能，讓使用者回到上一個畫面。 如果啟用圖片內圖片，系統將會顯示圖片中的圖片來呼叫。 若要深入瞭解 Android 和 iOS 平臺的多任務處理和圖片圖片，以及 API 的使用方式，請參閱 如何使用圖片圖片

CallKit 支援

UI 連結庫支援 CallKit 整合來處理呼叫的 CallKit 互動。 若要深入瞭解 iOS 平臺的整合和使用 API，請參閱 如何使用 CallKit

一對一通話和推播通知支援

UI 連結庫支援一對一 VoIP 呼叫，以透過通訊標識元撥打使用者。 若要接收來電 UI 連結庫也支援註冊 PUSH 通知。 若要深入瞭解 Android 和 iOS 平臺的整合和 API 的使用方式，請參閱 如何進行一對一呼叫並接收推播通知

聊天使用案例

重要

Azure 通訊服務 這項功能目前為預覽狀態。

預覽 API 和 SDK 在沒有服務等級協議的情況下提供。 我們建議您不要將它們用於生產工作負載。 某些功能可能不受支援，或可能具有限制的功能。

如需詳細資訊，請檢閱 Microsoft Azure 預覽版的補充使用規定。

區域 使用案例
聊天類型 加入 Azure 通訊服務 聊天對話
聊天動作 傳送聊天訊息
接收聊天訊息
聊天活動 顯示輸入指標
顯示讀取收據
顯示新增或移除參與者的時機
顯示聊天標題的變更

靈活性

ChatComposite設計成適合應用程式中的不同版面配置和檢視。 例如，您可以選擇將聊天放在瀏覽檢視、強制響應檢視或其他檢視中。 會 ChatComposite 自行調整，並確保用戶有順暢的體驗。

在瀏覽檢視中 在強制響應檢視中
an image that shows the chat experience on iOS in a navigation view. an image that shows the chat experience on iOS in a modal view.

支援的身分識別

若要初始化複合，並且向服務進行驗證，用戶必須具有 Azure 通訊服務 身分識別。 如需詳細資訊，請參閱驗證至 Azure 通訊服務 和快速入門：建立和管理存取令牌。

使用 Azure 通訊服務 存取令牌初始化複合。 請務必透過您管理的受信任服務，從 Azure 通訊服務 取得存取令牌。 如需詳細資訊，請參閱 快速入門：建立和管理存取令牌 和 受信任的服務教學課程。

Diagram that shows the recommended architecture for UI Library.

通話和聊天客戶端連結庫必須具有他們加入之通話的內容。 如同使用者存取令牌，請使用您自己的受信任服務將內容傳播給用戶端。 下表摘要說明將內容新增至用戶端連結庫所需的初始化和資源管理功能：

Contoso 責任 UI 連結庫責任
提供來自 Azure 的存取令牌 傳遞提供的存取令牌以初始化元件
提供重新整理函式 使用開發人員提供的函式重新整理存取令牌
擷取並傳遞通話或聊天的聯結資訊 傳遞通話和聊天資訊以初始化元件
擷取並傳遞任何自定義數據模型的用戶資訊 將自定義數據模型傳遞至要轉譯的元件

平台支援

平台 版本
iOS iOS 14 和更新版本
Android API 21 和更新版本

疑難排解指南

針對語音或視訊通話進行疑難解答時，系統可能會要求您提供 CallID;此標識碼可用來識別通訊服務通話。

您可以透過呼叫畫面底部的動作列來擷取此 CallID;您會看到省略號按鈕;一旦使用者執行點選動作選項「共用診斷資訊」;使用者可以共用追蹤支援小組任何問題所需的診斷資訊。

如需 CallID 的程式設計存取，請參閱「如何以程式設計方式取得偵錯資訊」。

您可以在這裡深入瞭解疑難解答指導方針：「Azure 通訊服務 中的疑難解答」頁面。

通話畫面 診斷資訊功能表 共用 CallID
Screenshot of the call screen during the call. Screenshot of the call screen with the diagnostic options location. Screenshot of showing share Call ID with Contoso.

快速入門指南