共用方式為

在應用程式的 UI 程式庫中插入自訂資料模型

  • 發行項

Azure 通訊服務會使用與身分識別無關的模型，其中開發人員可以自備身分識別。 開發人員可以取得其資料模型，並將其連結至 Azure 通訊服務身分識別。 使用者的資料模型最有可能包含其顯示名稱、設定檔圖片或頭像等資訊，以及其他詳細資料。 開發人員會使用資訊來建置應用程式和平台。

UI 程式庫可讓您輕鬆地將該使用者資料模型插入 UI 元件中。 當您轉譯 UI 元件時，他們會顯示使用者提供的資訊，而不是 Azure 通訊服務擁有的一般資訊。

必要條件

設定插入

如需 Web UI 程式庫的詳細文件和快速入門，請參閱 Web UI 程式庫Storybook。

若要深入了解，請參閱 Web UI 連結庫中 自定義使用者資料模型。

如需詳細資訊，請參閱開放原始碼 Android UI 程式庫和範例應用程式程式碼。

本地參與者檢視自訂

UI 程式庫可讓開發人員針對參與者資訊提供自訂程度的體驗。 啟動時，您可以選擇性地插入本地參與者資料。 此本機資料不會與伺服器共用，而且您可用來自訂本地使用者的顯示名稱和頭像。

本地選項

CallCompositeLocalOptions 是可以有 CallCompositeParticipantViewData 和 CallCompositeSetupScreenViewData 的資料模型。 其代表本地參與者。

根據預設，針對遠端參與者，UI 程式庫會顯示插入 RemoteOptions 的 displayName 資訊。 此資訊會傳送至 Azure 通訊服務後端伺服器。 如果 CallCompositeParticipantViewData 已插入，則參與者 displayName 和 avatar 資訊將會在本地所有頭像元件中顯示。

同樣地，針對 CallCompositeSetupScreenViewData，CallCompositeSetupScreenViewData 中的 title 和 subtitle 會分別覆寫導覽列在會議前畫面的標題和副標題。 根據預設，UI 程式庫會顯示設定做為標題，而沒有做為副標題。

本地參與者檢視資料

CallCompositeParticipantViewData 是一種類別，可設定頭像控制項的 displayName、avatarBitmap 和 scaleType。 此類別會傳遞至 CallCompositeLocalOptions，以自訂本地參與者檢視資訊。 這個類別會保留在 CallCompositeLocalOptions 物件中，代表在進行呼叫的裝置在本地使用的選項。

這個 displayName 執行個體與透過 CallCompositeRemoteOptions 傳入的 displayName 資訊不同：

  • displayName 的 CallCompositeParticipantViewData 執行個體只會在本機作為覆寫使用。
  • displayName 的 CallCompositeRemoteOptions 執行個體會傳遞至伺服器，並與其他參與者共用。

如果您沒有提供 displayName 的 CallCompositeParticipantViewData 執行個體，應用程式會使用 displayName 的 CallCompositeRemoteOptions 執行個體。

設定畫面檢視資料

CallCompositeSetupScreenViewData 是一種物件，會在呼叫設定畫面上設定導覽列的 title 和 subtitle。 如果未定義 subtitle，則會隱藏副標題。 以下，title 是設定 subtitle 時的必要項目，但設定 title 時 subtitle 是選用項目。 此類別會儲存在本地，而且其資訊不會傳至伺服器。

使用方式

若要使用 CallCompositeLocalOptions，請傳遞 CallCompositeParticipantViewData 和/或 CallCompositeSetupScreenViewData 的執行個體，並將 CallCompositeLocalOptions 插入至 callComposite.launch。

val participantViewData: CallCompositeParticipantViewData = CallCompositeParticipantViewData()
    .setAvatarBitmap((Bitmap) avatarBitmap)
    .setScaleType((ImageView.ScaleType) scaleType)
    .setDisplayName((String) displayName)

val setupScreenViewData: CallCompositeSetupScreenViewData = CallCompositeSetupScreenViewData()
    .setTitle((String) title)
    .setSubtitle((String) subTitle)

val localOptions: CallCompositeLocalOptions = CallCompositeLocalOptions()
    .setParticipantViewData(participantViewData)
    .setSetupScreenViewData(setupScreenViewData)

callComposite.launch(callLauncherActivity, remoteOptions, localOptions)
設定檢視 通話體驗檢視
Screenshot of Android data custom model injection. Screenshot of Android data custom model injection with name.

遠端參與者檢視自訂

在某些情況下，您可能會為遠端參與者提供本地覆寫，以允許自訂頭像和標題。

此流程類似於本地參與者流程，但資料是在參與者加入通話時設定的。 身為開發人員，您必須在遠端參與者加入通話時新增接聽程式，然後呼叫方法來為這些遠端使用者設定 CallCompositeParticipantViewData。

使用方式

若要設定遠端參與者的檢視資料，請設定 setOnRemoteParticipantJoinedHandler。 在遠端參與者加入時，使用 setRemoteParticipantViewData 代替 callComposite 來插入遠端參與者的檢視資料。 參與者識別碼 CommunicationIdentifier 會唯一識別遠端參與者。

呼叫 setRemoteParticipantViewData 以傳回 CallCompositeSetParticipantViewDataResult 的結果，後者具有下列值：

  • CallCompositeSetParticipantViewDataResult.SUCCESS
  • CallCompositeSetParticipantViewDataResult.PARTICIPANT_NOT_IN_CALL
callComposite.addOnRemoteParticipantJoinedEventHandler { remoteParticipantJoinedEvent -> 
                remoteParticipantJoinedEvent.identifiers.forEach { identifier ->
                    // get displayName, bitmap for identifier
                    callComposite.setRemoteParticipantViewData(identifier,
                        CallCompositeParticipantViewData().setDisplayName("displayName")) // setAvatarBitmap for bitmap
                }
            }
參與者清單
Screenshot of Android remote participant view data injection.

如需詳細資訊，請參閱開放原始碼 iOS UI 程式庫和範例應用程式程式碼。

本地參與者檢視資料插入

UI 程式庫可讓開發人員提供自訂程度的體驗。 在啟動時，您可以插入選擇性的本機衣料選項。 此物件可以包含 UIimage，其代表要轉譯的頭像，以及選擇性顯示的顯示名稱。 這些資訊都不會傳送至 Azure 通訊服務。 在 UI 程式庫中本地保留。

本地選項

LocalOptions 是包含 ParticipantViewData 和 SetupScreenViewData 的資料模型。

針對 ParticipantViewData，根據預設，UI 程式庫會顯示插入 RemoteOptions 的 displayName 資訊。 此資訊會傳送至 Azure 通訊服務後端伺服器。 如果 ParticipantViewData 已插入，則參與者 displayName 和 avatar 資訊將會在所有頭像元件中顯示。

針對 SetupScreenViewData，根據預設，UI 程式庫會顯示設定做為標題，而沒有做為副標題。 SetupScreenViewData 中的 title 和 subtitle 資訊會分別覆寫導覽列在會議前畫面的標題和副標題。

本地參與者檢視資料

ParticipantViewData 是一種物件，可設定頭像元件的 displayName 和 avatar UI 影像。 這個類別會插入 UI 程式庫以設定虛擬人偶資訊。 這會儲存在本地，且永遠不會傳送至伺服器。

設定畫面檢視資料

SetupScreenViewData 是物件，可設定預先輸入畫面上導覽列的 title 和 subtitle (也稱為設定檢視)。 如果您定義 SetupScreenViewData，您也必須提供 title，因為這是必要的字段。 然而，不需要 subtitle。

如果您未定義 subtitle，則會隱藏。 此類別會儲存在本地，而且其資訊不會傳至伺服器。

使用方式

// LocalOptions (data not sent to the server)
let localParticipantViewData = ParticipantViewData(avatar: <Some UIImage>,
                                                   displayName: "<DISPLAY_NAME>")
let localSetupScreenViewData = SetupScreenViewData(title: "<NAV_TITLE>",
                                                               subtitle: "<NAV_SUBTITLE>")
let localOptions = LocalOptions(participantViewData: localParticipantViewData, 
                                setupScreenViewData: localSetupScreenViewData)
// RemoteOptions (data sent to the server)
let remoteOptions = RemoteOptions(for: .groupCall(groupId: UUID()),
                                  credential: <Some CommunicationTokenCredential>,
                                  displayName: "<DISPLAY_NAME>")
// Launch
callComposite.launch(remoteOptions: remoteOptions, localOptions: localOptions)
設定檢視 通話體驗檢視
Screenshot of iOS data custom model injection. Screenshot of iOS data custom model injection with name.

遠端參與者檢視資料插入

在遠端參與者加入時，您可以插入遠端參與者的檢視資料。 此參與者檢視資料可以包含 UI 影像，其代表要轉譯的頭像，以及選擇性顯示的顯示名稱。 這些資訊都不會傳送至 Azure 通訊服務。 在 UI 程式庫中本地保留。

使用方式

若要設定遠端參與者檢視資料，請為事件處理常式設定 onRemoteParticipantJoined 完成。 在遠端參與者加入時，使用 set(remoteParticipantViewData:, for:, completionHandler:) 代替 CallComposite 來插入遠端參與者的檢視資料。 參與者識別碼 CommunicationIdentifier 可唯一識別遠端參與者。 您可使用選擇性完成處理常式傳回設定作業的結果。

callComposite.events.onRemoteParticipantJoined = { [weak callComposite] identifiers in
  for identifier in identifiers {
    // map identifier to displayName
    let participantViewData = ParticipantViewData(displayName: "<DISPLAY_NAME>")
    callComposite?.set(remoteParticipantViewData: participantViewData,
                       for: identifier) { result in
      switch result {
      case .success:
        print("Set participant view data succeeded")
      case .failure(let error):
        print("Set participant view data failed with \(error)")
      }
    }
  }
}
參與者清單
Screenshot of iOS remote participants view data injection.

下一步