Einfügen eines benutzerdefinierten Datenmodells in die Benutzeroberflächenbibliothek für eine Anwendung

Ausführliche Dokumentationen und Schnellstarts zur Web-UI-Bibliothek finden Sie im Web UI Library Storybook.

Weitere Informationen finden Sie unter "Benutzerdefiniertes Benutzerdatenmodell " in der Web-UI-Bibliothek.

Weitere Informationen finden Sie in der Open Source Android UI Library und im Beispielanwendungscode.

Anpassung der lokalen Teilnehmeransicht

Die Benutzeroberflächenbibliothek bietet Entwicklern die Möglichkeit, eine angepasste Erfahrung in Bezug auf Teilnehmerinformationen bereitzustellen. Beim Start können Sie optional lokale Teilnehmerdaten einfügen. Diese lokalen Daten werden nicht für den Server freigegeben, und Sie können sie verwenden, um den Anzeigenamen und avatar des lokalen Benutzers anzupassen.

Lokale Optionen

CallCompositeLocalOptions ist ein Datenmodell, das CallCompositeParticipantViewData und CallCompositeSetupScreenViewData haben kann. Er stellt den lokalen Teilnehmer dar.

Für entfernte Teilnehmer zeigt die Benutzeroberflächenbibliothek standardmäßig displayName Informationen an, die in RemoteOptions injiziert werden. Diese Informationen werden an den Back-End-Server von Azure Communication Services gesendet. Wenn CallCompositeParticipantViewData eingefügt wird, werden die Teilnehmerinformationen von displayName und avatar lokal in allen Avatarkomponenten angezeigt.

In CallCompositeSetupScreenViewData überschreiben title, subtitle, und CallCompositeSetupScreenViewData auf dem Vorbesprechungsbildschirm jeweils den Titel und den Untertitel der Navigationsleiste. Standardmäßig zeigt die Ui-Bibliothek Setup als Titel und nichts als Untertitel an.

Ansichtsdaten von lokalen Teilnehmenden

CallCompositeParticipantViewData ist eine Klasse, die displayName, avatarBitmap und scaleType für die Steuerung von Avataren festlegt. Diese Klasse wird an CallCompositeLocalOptions übergeben, um die Ansichtsinformationen der lokalen Teilnehmer anzupassen. Diese Klasse wird im CallCompositeLocalOptions Objekt gespeichert, das Optionen darstellt, die lokal auf dem Gerät verwendet werden, das den Aufruf vorgibt.

Diese Instanz von unterscheidet sich von displayName den Informationen, die displayName über übergeben werden CallCompositeRemoteOptions:

• Die CallCompositeParticipantViewData Instanz von displayName wird nur lokal als Überschreibung verwendet.
• Die CallCompositeRemoteOptions Instanz von displayName wird an den Server übergeben und mit anderen Teilnehmern geteilt.

Wenn Sie die CallCompositeParticipantViewData Instanz displayNamenicht angeben, verwendet die Anwendung die CallCompositeRemoteOptions Instanz von displayName.

Konfiguration der Bildschirmanzeigedaten

CallCompositeSetupScreenViewData ist ein Objekt, das title und subtitle für die Navigationsleiste auf dem Anrufeinrichtungsbildschirm festlegt. Wenn subtitle nicht definiert ist, wird der Untertitel ausgeblendet. Hier ist title erforderlich, um subtitlefestzulegen, aber subtitle ist optional, wenn title festgelegt ist. Diese Klasse wird lokal gespeichert, und ihre Informationen werden nicht an den Server gesendet.

Usage

Übergeben Sie zur Verwendung von CallCompositeLocalOptions die Instanz von CallCompositeParticipantViewData und/oder CallCompositeSetupScreenViewData und fügen Sie CallCompositeLocalOptions in callComposite.launch ein.

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

Setupansicht	Anruferfahrungsansicht

Anpassung der Fernteilnehmeransicht

In einigen Fällen sollten Sie lokale Außerkraftsetzungen für Remoteteilnehmer bereitstellen, um benutzerdefinierte Avatare und Titel zuzulassen.

Der Prozess ähnelt dem lokalen Teilnehmerprozess, aber die Daten werden festgelegt, wenn Teilnehmer am Anruf teilnehmen. Als Entwickler müssen Sie einen Listener implementieren, wenn Remoteteilnehmer dem Anruf beitreten, und dann eine Methode aufrufen, um CallCompositeParticipantViewData für diese Remotebenutzer festzulegen.

Usage

Wenn Sie die Ansichtsdaten für Remoteteilnehmer festlegen möchten, legen Sie folgendes setOnRemoteParticipantJoinedHandlerfest. Beim Beitritt von Remoteteilnehmenden verwenden Sie setRemoteParticipantViewData für callComposite zum Einfügen von Ansichtsdaten für Remoteteilnehmende. Der Teilnehmerbezeichner CommunicationIdentifier identifiziert einen Remoteteilnehmer eindeutig.

Aufrufe an setRemoteParticipantViewData liefern ein Ergebnis von CallCompositeSetParticipantViewDataResult, das die folgenden Werte enthält:

• 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
                }
            });

Teilnehmerliste

Weitere Informationen finden Sie in der Open-Source-iOS-UI-Bibliothek und im Beispielanwendungscode.

Einfügen von Ansichtsdaten lokaler Teilnehmender

Die Benutzeroberflächenbibliothek bietet Entwicklern die Möglichkeit, eine angepasste Benutzeroberfläche bereitzustellen. Beim Start können Sie optionale lokale Datenoptionen einfügen. Dieses Objekt kann ein UI-Bild enthalten, das den Avatar darstellt, der gerendert werden soll, und einen Anzeigenamen, der optional angezeigt werden soll. Keine dieser Informationen wird an Azure Communication Services gesendet. Sie wird lokal in der UI-Bibliothek gespeichert.

Lokale Optionen

LocalOptions ist ein Datenmodell, das aus ParticipantViewData und SetupScreenViewData besteht.

Für ParticipantViewDatazeigt displayName die Benutzeroberflächenbibliothek standardmäßig Informationen an, die in RemoteOptionseingefügt wurden. Diese Informationen werden an den Back-End-Server von Azure Communication Services gesendet. Wenn ParticipantViewData eingesetzt wird, werden die Informationen des Teilnehmers displayName und avatar in allen Avatarkomponenten angezeigt.

Für SetupScreenViewDatazeigt die Benutzeroberflächenbibliothek standardmäßig Setup als Titel und nichts als Untertitel an. Die title- und subtitle-Informationen in SetupScreenViewData überschreiben jeweils den Titel und den Untertitel der Navigationsleiste auf dem Vorbesprechungsbildschirm.

Ansichtsdaten von lokalen Teilnehmenden

ParticipantViewData ist ein Objekt, das sowohl das displayName- als auch das avatar-Benutzeroberflächenbild für Avatarkomponenten festlegt. Diese Klasse wird in die UI-Bibliothek eingefügt, um Avatarinformationen festzulegen. Er wird lokal gespeichert und nie an den Server gesendet.

Konfiguration der Bildschirmanzeigedaten

SetupScreenViewData ist ein Objekt, das title und subtitle für die Navigationsleiste auf dem Vorabbesprechungsbildschirm (auch als Setupansicht bezeichnet) festlegt. Wenn Sie definieren SetupScreenViewData, müssen Sie auch angeben title , da es sich um ein Pflichtfeld handelt. subtitle Ist jedoch nicht erforderlich.

Wenn Sie nicht definieren subtitle, ist es ausgeblendet. Diese Klasse wird lokal gespeichert, und ihre Informationen werden nicht an den Server gesendet.

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)

Setupansicht	Anruferfahrungsansicht

Dateninjektion in die Ansicht für Remoteteilnehmer

Beim Beitritt von Remoteteilnehmenden können Sie die Ansichtsdaten für die Remoteteilnehmenden einfügen. Diese Teilnehmeransichtsdaten können ein UI-Bild enthalten, das den Avatar darstellt, der gerendert werden soll, und einen Anzeigenamen, der stattdessen optional angezeigt werden soll. Keine dieser Informationen wird an Azure Communication Services gesendet. Sie wird lokal in der UI-Bibliothek gespeichert.

Usage

Um die Ansichtsdaten für Remoteteilnehmende festzulegen, legen Sie die Fertigstellung für den Ereignishandler fest onRemoteParticipantJoined. Beim Beitritt von Remoteteilnehmenden verwenden Sie set(remoteParticipantViewData:, for:, completionHandler:) für CallComposite zum Einfügen von Ansichtsdaten für Remoteteilnehmende. Der Teilnehmerbezeichner CommunicationIdentifier identifiziert einen Remoteteilnehmer eindeutig. Sie verwenden den optionalen Abschlusshandler, um das Ergebnis des Set-Vorgangs zurückzugeben.

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)")
      }
    }
  }
}

Teilnehmerliste