Freigeben über

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

  • Artikel

Azure Communication Services verwendet ein identitätsunabhängiges Modell, in dem Entwickler ihre eigenen Identitäten mitbringen können. Entwickler können ihr Datenmodell abrufen und mit Azure Communication Services-Identitäten verknüpfen. Das Datenmodell für einen Benutzer enthält höchstwahrscheinlich Informationen wie Anzeigename, Profilbild oder Avatar sowie weitere Details. Entwickler verwenden diese Informationen, um ihre Anwendungen und Plattformen zu erstellen.

Die Benutzeroberflächenbibliothek vereinfacht das Einfügen eines Benutzerdatenmodells in die UI-Komponenten. Wenn Sie die UI-Komponenten rendern, zeigen sie Benutzern die bereitgestellten Informationen anstelle generischer Informationen aus Azure Communication Services an.

Voraussetzungen

Einrichten der Einfügung

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 das Datenmodell, das über CallCompositeParticipantViewData und CallCompositeSetupScreenViewData verfügen kann. Er stellt den lokalen Teilnehmer dar.

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

CallCompositeSetupScreenViewDatatitle Ebenso überschreiben Und überschreiben Sie den Titel der Navigationsleiste bzw subtitle CallCompositeSetupScreenViewData. den Untertitel auf dem Vorbesprechungsbildschirm. Standardmäßig zeigt die Ui-Bibliothek Setup als Titel und nichts als Untertitel an.

Lokale Teilnehmeransichtsdaten

CallCompositeParticipantViewData ist eine Klasse, die das Avatar-Steuerelement festlegt displayName, avatarBitmapund scaleType für das Avatar-Steuerelement. Diese Klasse wird übergeben CallCompositeLocalOptions , 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 displayName unterscheidet sich von den informationen, die displayName über CallCompositeRemoteOptions:

  • Die CallCompositeParticipantViewData Instanz von displayName wird nur lokal als Außerkraftsetzung verwendet.
  • Die CallCompositeRemoteOptions Instanz wird displayName an den Server übergeben und für andere Teilnehmer freigegeben.

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

Einrichten von Bildschirmansichtsdaten

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

Verbrauch

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

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)
Setupansicht Anruferfahrungsansicht
Screenshot of Android data custom model injection. Screenshot of Android data custom model injection with name.

Anpassung der Remoteteilnehmeransicht

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 hinzufügen, wenn Remoteteilnehmer am Anruf teilnehmen, und dann eine Methode aufrufen, die für diese Remotebenutzer festgelegt CallCompositeParticipantViewData werden soll.

Verbrauch

Wenn Sie die Ansichtsdaten für Remoteteilnehmer festlegen möchten, legen Sie folgendes setOnRemoteParticipantJoinedHandlerfest. Verwenden Sie setRemoteParticipantViewData bei der Remoteteilnehmerbeitrittsanwendung callComposite das Einfügen von Daten für Remoteteilnehmer. Der Teilnehmerbezeichner CommunicationIdentifier identifiziert einen Remoteteilnehmer eindeutig.

Aufrufe zum setRemoteParticipantViewData Zurückgeben eines Ergebnisses mit CallCompositeSetParticipantViewDataResultden folgenden Werten:

  • 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
                }
            }
Teilnehmerliste
Screenshot of Android remote participant view data injection.

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

Dateneinfügung für lokale Teilnehmer

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

LocalOptionsist ein Datenmodell, das aus ParticipantViewData und .SetupScreenViewData

Für ParticipantViewData, standardmäßig, zeigt displayName die UI-Bibliothek Informationen injiziert RemoteOptionsan. Diese Informationen werden an den Back-End-Server von Azure Communication Services gesendet. Wenn ParticipantViewData sie eingefügt wird, werden der Teilnehmer displayName und avatar die Informationen in allen Avatarkomponenten angezeigt.

Standardmäßig SetupScreenViewDatazeigt die Ui-Bibliothek Setup als Titel und nichts als Untertitel an. Die title informationen in subtitle SetupScreenViewData der Navigationsleiste überschreiben den Titel bzw. den Untertitel auf dem Vorbesprechungsbildschirm.

Lokale Teilnehmeransichtsdaten

ParticipantViewDataist ein Objekt, das das Bild und avatar die displayName Benutzeroberfläche 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.

Einrichten von Bildschirmansichtsdaten

SetupScreenViewData ist ein Objekt, das für die Navigationsleiste auf dem Vorabbesprechungsbildschirm (auch als Setupansicht bezeichnet) festgelegt title wird subtitle . 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.

Verbrauch

// 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
Screenshot of iOS data custom model injection. Screenshot of iOS data custom model injection with name.

Dateneinfügung von Remoteteilnehmern

Bei der Remoteteilnahme können Sie die Ansichtsdaten für den Remoteteilnehmer 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.

Verbrauch

Um die Ansichtsdaten für Remoteteilnehmer festzulegen, legen Sie den Abschluss für den Ereignishandler fest onRemoteParticipantJoined . Verwenden Sie set(remoteParticipantViewData:, for:, completionHandler:) bei der Remoteteilnehmerbeitrittsanwendung CallComposite das Einfügen von Daten für Remoteteilnehmer. 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
Screenshot of iOS remote participants view data injection.

Nächste Schritte