UI 程式庫概觀
UI 程式庫可讓您輕鬆地使用 Azure 通訊服務 建置現代化通訊使用者體驗。 它提供可供生產環境使用的 UI 元件程式庫，您可以放入應用程式：
注意
如需 Web UI 程式庫的詳細檔， 請流覽 Web UI 程式庫劇本 。 您可以在該處找到其他概念檔、快速入門和範例。
複合材料。 這些元件是實作常見通訊案例的關鍵解決方案。 您可以快速將視訊通話或聊天（目前僅適用于 Web UI 程式庫）體驗新增至您的應用程式。 複合是使用 UI 元件建置的開放原始碼較高順序元件。
UI 元件。 這些元件是開放原始碼建置組塊，可讓您建置自訂通訊體驗。 元件同時提供通話和聊天功能，可結合以建置體驗。
這些 UI 用戶端程式庫全都使用 Microsoft 的 Fluent 設計語言 和資產。 Fluent UI 提供 UI 程式庫的基礎層，並會主動在 Microsoft 產品之間使用。
結合 UI 元件，UI 程式庫會公開可設定狀態的用戶端程式庫來呼叫和聊天。 此用戶端與任何特定的狀態管理架構無關，並可與 Redux 或 React CoNtext 等通用狀態管理員整合。 這個具狀態用戶端程式庫可以與 UI 元件搭配使用，以傳遞 UI 元件的屬性和方法來轉譯資料。 如需詳細資訊，請參閱 具狀態用戶端概觀 。
注意
UI 程式庫中提供的相同元件和複合元件可在 Figma 設計工具組中 取得，因此您可以快速設計和建立通話和聊天體驗的原型。
複合概觀
複合是由 UI 元件組成的較高層級元件，可針對使用 Azure 通訊服務 的常見通訊案例提供周全解決方案。 開發人員可以使用Azure 通訊服務存取權杖，以及呼叫或聊天所需的組態，輕鬆地具現化複合。
| 複合 | 使用案例 |
|---|---|
| CallwithChatComposite | 體驗結合通話和聊天功能，以允許使用者啟動或加入通話和聊天對話。 在體驗中，使用者能夠同時使用語音和視訊進行通訊，以及存取豐富的聊天對話，讓參與者之間可以交換訊息。 它包含 Teams Interop 的支援。 |
| CallComposite | 可讓使用者啟動或加入通話的通話體驗。 在體驗中，使用者可以設定其裝置、使用視訊參與通話，以及查看其他參與者，包括具有視訊開啟的參與者。 針對 Teams Interop，會包含大廳功能，讓使用者等待等候。 |
| ChatComposite | 使用者可以傳送和接收訊息的聊天體驗。 輸入、讀取、輸入和離開等執行緒事件會顯示給使用者，作為聊天對話的一部分。 |
UI 元件概觀
純 UI 元件可用於開發人員撰寫通訊體驗，從將視訊磚縫合到方格，以展示遠端參與者，到組織元件以符合您的應用程式規格。 UI 元件支援自訂，讓元件有正確的風格，並尋找符合應用程式商標和樣式的外觀。
| 面積 | 元件 | 描述 |
|---|---|---|
| 通話 | 格線配置 | 將影片磚組織成 NxN 方格的方格元件 |
| 影片磚 | 當可用時顯示視訊串流的元件，以及未使用時顯示預設靜態元件的元件 | |
| 控制列 | 用來組織 DefaultButtons 以連結至特定呼叫動作的容器，例如靜音或共用畫面 | |
| VideoGallery | 重要視訊庫元件，隨著參與者的加入，動態變更 | |
| Dialpad | 支援電話號碼輸入和 DTMF 音調的元件。 | |
| 聊天 | 訊息執行緒 | 轉譯聊天訊息、系統訊息和自訂訊息的容器 |
| 傳送方塊 | 具有離散傳送按鈕的文字輸入元件 | |
| 訊息狀態指標 | 顯示已傳送訊息狀態的多狀態讀取回條元件 | |
| 輸入指標 | 用來呈現線上程上主動輸入參與者的文字元件 | |
| 常見 | 參與者專案 | 轉譯通話或聊天參與者的常見元件，包括虛擬人偶和顯示名稱 |
| 參與者清單 | 轉譯通話或聊天參與者清單的常見元件，包括虛擬人偶和顯示名稱 |
安裝 Web UI 程式庫
具狀態用戶端可在套件中找到 @azure/communication-react 。
npm i --save @azure/communication-react
我的專案最適合哪個 UI 成品？
瞭解這些需求可協助您選擇正確的用戶端程式庫：
- 您想要多少自訂？ Azure 通訊核心用戶端程式庫沒有 UX，因此您可以建置您想要的任何 UX。 UI 程式庫元件會以降低自訂成本提供 UI 資產。
- 您的目標是哪些平臺？ 不同的平臺具有不同的功能。
這裡 提供 UI 程式庫中功能可用性 的詳細資料，但下表摘要說明重要取捨。
| 用戶端程式庫 / SDK | 實作複雜度 | 自訂能力 | 通話 | 聊天 | Teams Interop |
|---|---|---|---|---|---|
| 複合元件 | 低 | 低 | ✔ | ✔ | ✔ |
| 基底元件 | 中 | 中 | ✔ | ✔ | ✔ |
| 核心用戶端程式庫 | 高 | 高 | ✔ | ✔ | ✔ |
複合是實作常見通訊案例的周全解決方案。 您可以將視訊通話體驗新增至您的應用程式。 複合是開放原始碼較高階的元件，開發人員可以利用這些元件來減少開發時間和工程複雜度。
複合概觀
| 複合 | 使用案例 |
|---|---|
| CallComposite | 可讓使用者啟動或加入通話的通話體驗。 在體驗中，使用者可以設定其裝置、使用視訊參與通話，以及查看其他參與者，包括已開啟視訊的參與者。 針對 Teams 互通性， CallComposite 包含大廳功能，讓使用者可以等候接受。 |
| ChatComposite | 為 ChatComposite 使用者帶來即時簡訊體驗。 具體而言，使用者可以傳送和接收聊天訊息，其中包含輸入指標和讀取回條的事件。 此外，使用者也可以接收系統訊息，例如新增或移除參與者，以及聊天標題的變更。 |
用於呼叫的複合案例
加入視訊/音訊通話
使用者可以使用 Teams 會議 URL 加入通話，也可以設定Azure 通訊服務通話。 這種方法提供更簡單的體驗，就像 Teams 應用程式一樣。
預先通話體驗
身為通話參與者，您可以提供名稱，並設定音訊和視訊裝置的預設組態。 然後，您已準備好跳入通話。
通話體驗
呼叫複合提供端對端體驗、優化開發時間，並著重于乾淨的版面配置。
呼叫體驗會在單一複合元件中提供所有這些功能，並提供一個沒有複雜程式碼的清楚路徑，這會導致開發時間更快。
品質和安全性
呼叫的行動複合會使用 Azure 通訊服務存取權杖 來初始化。
更多詳細資料
如果您需要更多有關行動複合呼叫的詳細資料，請參閱 使用案例 。
聊天的複合案例
重要
Azure 通訊服務這項功能目前處於預覽狀態。
預覽 API 和 SDK 在沒有服務等級協定的情況下提供。 我們建議您不要將它們用於生產工作負載。 某些功能可能不受支援，或可能具有限制的功能。
如需詳細資訊，請檢閱 Microsoft Azure 預覽版 的補充使用規定。
聊天體驗
提供 ChatComposite 即時簡訊體驗。 考慮到彈性和延展性， ChatComposite 可以適應應用程式的不同配置或檢視，而不需要複雜度。 您也可以選擇不 ChatComposite 顯示檢視，並只接收通知以符合您不同的業務需求。
| iOS | Android |
|---|---|
|
|
品質和安全性
與 CallComposite 類似， ChatComposite 也會利用 Azure 通訊服務存取權杖 。 為了確保只有具備適當許可權的使用者可以存取聊天，必須先將其使用者權杖新增至有效的 聊天對話 ，才能開始聊天體驗。
更多詳細資料
如果您需要更多有關行動複合進行聊天的詳細資料，請參閱 使用案例 。
我的專案最適合哪個 UI 成品？
這些需求可協助您選擇正確的用戶端程式庫：
您想要多少自訂？ Azure 通訊服務核心用戶端程式庫沒有 UX，而且設計成可讓您建置您想要的任何 UX。 UI 程式庫元件會以降低自訂成本提供 UI 資產。
您的目標是哪些平臺？ 不同的平臺具有不同的功能。
以下是一些重要的取捨：
| 用戶端程式庫 / SDK | 實作複雜度 | 自訂功能 | 通話 | 聊天 | Teams 互通性 |
|---|---|---|---|---|---|
| 複合元件 | 低 | 低 | ✔ | ✔ | ✔ |
| 核心用戶端程式庫 | 高 | 高 | ✔ | ✔ | ✔ |
如需 UI 程式庫中功能可用性的詳細資訊，請參閱 UI 程式庫使用案例 。