アプリケーションの UI ライブラリにカスタム データ モデルを挿入する

Web UI ライブラリに関する詳細なドキュメントとクイック スタートについては、 Web UI ライブラリのストーリーブックを参照してください。

詳細については、Web UI ライブラリの 「カスタム ユーザー データ モデル 」を参照してください。

詳細については、 オープンソースの Android UI ライブラリ と サンプル アプリケーション コードを参照してください。

ローカル参加者ビューのカスタマイズ

UI ライブラリを使用すると、開発者は参加者情報に関するカスタマイズされたエクスペリエンスを提供できます。 起動時に、必要に応じてローカル参加者データを挿入できます。 このローカル データはサーバーと共有されないため、これを使用してローカル ユーザーの表示名とアバターをカスタマイズできます。

ローカル オプション

CallCompositeLocalOptions は、 CallCompositeParticipantViewData と CallCompositeSetupScreenViewDataを持つデータ モデルです。 これはローカル参加者を表します。

既定では、リモート参加者の場合、UI ライブラリには、displayNameに挿入されたRemoteOptions情報が表示されます。 この情報は、Azure Communication Services バックエンド サーバーに送信されます。 CallCompositeParticipantViewDataが挿入されると、参加者のdisplayNameとavatar情報がすべてのアバター コンポーネントにローカルに表示されます。

同様に、CallCompositeSetupScreenViewData の場合、title の subtitle と CallCompositeSetupScreenViewData によって、会議前画面のナビゲーション バーのタイトルとサブタイトルがそれぞれ上書きされます。 既定では、UI ライブラリにはタイトルとして セットアップ が表示され、サブタイトルとして何も表示されません。

ローカル参加者データの表示

CallCompositeParticipantViewData は、アバター コントロールの displayName、 avatarBitmap、および scaleType を設定するクラスです。 このクラスは、ローカル参加者のビュー情報をカスタマイズするために、 CallCompositeLocalOptions に渡されます。 このクラスは、呼び出しを行うデバイスでローカルに使用されるオプションを表す CallCompositeLocalOptions オブジェクトに保持されます。

このdisplayNameのインスタンスは、displayName経由で渡されるCallCompositeRemoteOptions情報とは異なります。

• CallCompositeParticipantViewDataのdisplayName インスタンスは、オーバーライドとしてローカルでのみ使用されます。
• CallCompositeRemoteOptionsのdisplayName インスタンスがサーバーに渡され、他の参加者と共有されます。

CallCompositeParticipantViewDataのdisplayName インスタンスを指定しない場合、アプリケーションはCallCompositeRemoteOptionsのdisplayName インスタンスを使用します。

画面ビュー データの設定

CallCompositeSetupScreenViewData は、通話設定画面のナビゲーション バーの title と subtitle を設定するオブジェクトです。 subtitleが定義されていない場合、サブタイトルは非表示になります。 ここでは、titleを設定するにはsubtitleが必要ですが、subtitleが設定されている場合はtitleは省略可能です。 このクラスはローカルに格納され、その情報はサーバーに送信されません。

Usage

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)

final CallCompositeParticipantViewData participantViewData = new CallCompositeParticipantViewData()
    .setAvatarBitmap((Bitmap) avatarBitmap)
    .setScaleType((ImageView.ScaleType) scaleType)
    .setDisplayName((String) displayName);

final CallCompositeSetupScreenViewData setupScreenViewData = new CallCompositeSetupScreenViewData()
    .setTitle((String) title)
    .setSubtitle((String) subTitle);

final CallCompositeLocalOptions localOptions = new CallCompositeLocalOptions()
    .setParticipantViewData(participantViewData)
    .setSetupScreenViewData(setupScreenViewData);

callComposite.launch(callLauncherActivity, remoteOptions, localOptions);

セットアップ ビュー	通話体験画面

リモート参加者ビューのカスタマイズ

場合によっては、カスタムアバターとタイトルを許可するために、リモート参加者にローカルオーバーライドを提供することが必要な場合があります。

このプロセスはローカル参加者プロセスに似ていますが、参加者が通話に参加するとデータが設定されます。 開発者は、リモート参加者が呼び出しに参加するときにリスナーを追加し、それらのリモート ユーザーの CallCompositeParticipantViewData を設定するメソッドを呼び出す必要があります。

Usage

リモート参加者のビュー データを設定するには、 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
                }
            }

    callComposite.addOnRemoteParticipantJoinedEventHandler( (remoteParticipantJoinedEvent) -> {
                for (CommunicationIdentifier identifier: remoteParticipantJoinedEvent.getIdentifiers()) {
                    // get displayName, bitmap for identifier
                    callComposite.setRemoteParticipantViewData(identifier,
                            new CallCompositeParticipantViewData().setDisplayName("displayName")); // setAvatarBitmap for bitmap
                }
            });

参加者リスト

詳細については、 オープンソースの iOS UI ライブラリ と サンプル アプリケーション コードを参照してください。

ローカル参加者ビューのデータ挿入

UI ライブラリを使用すると、開発者はカスタマイズされたエクスペリエンスを提供できます。 起動時に、オプションのローカル データ オプションを挿入できます。 このオブジェクトには、レンダリングするアバターを表す UI イメージと、必要に応じて表示する表示名を含めることができます。 この情報はいずれも Azure Communication Services に送信されていません。 UI ライブラリでローカルに保持されます。

ローカル オプション

LocalOptions は、 ParticipantViewData と SetupScreenViewDataで構成されるデータ モデルです。

ParticipantViewDataの場合、既定では、displayNameに挿入されたRemoteOptions情報がUIライブラリに表示されます。 この情報は、Azure Communication Services バックエンド サーバーに送信されます。 ParticipantViewDataが挿入されると、参加者のdisplayNameとavatar情報がすべてのアバター コンポーネントに表示されます。

SetupScreenViewDataの場合、既定では、UI ライブラリにはタイトルとしてセットアップが表示され、サブタイトルとして何も表示されません。 titleのsubtitleとSetupScreenViewDataの情報によって、ナビゲーション バーのタイトルとサブタイトルがプリミーティング画面でそれぞれ上書きされます。

ローカル参加者データの表示

ParticipantViewData は、アバター コンポーネントの displayName と avatar UI イメージを設定するオブジェクトです。 このクラスは、アバター情報を設定するために UI ライブラリに挿入されます。 ローカルに保存され、サーバーに送信されることはありません。

画面ビュー データの設定

SetupScreenViewData は、事前設定画面 (セットアップ ビューとも呼ばれます) のナビゲーション バーの title と subtitle を設定するオブジェクトです。 SetupScreenViewDataを定義する場合は、必須フィールドであるため、titleも指定する必要があります。 ただし、 subtitle は必要ありません。

subtitleを定義しないと、非表示になります。 このクラスはローカルに格納され、その情報はサーバーに送信されません。

Usage

// 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)

セットアップ ビュー	通話体験画面

リモート参加者ビューのデータ挿入

リモート参加者参加では、リモート参加者のビュー データを挿入できます。 この参加者ビュー データには、レンダリングするアバターを表す UI イメージと、必要に応じて表示する表示名を含めることができます。 この情報はいずれも Azure Communication Services に送信されていません。 UI ライブラリでローカルに保持されます。

Usage

リモート参加者のビュー データを設定するには、イベント ハンドラー 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)")
      }
    }
  }
}

参加者リスト