Share via


Mata in en anpassad datamodell i användargränssnittsbiblioteket för ett program

Azure Communication Services använder en identitetsagnostisk modell där utvecklare kan använda sina egna identiteter. Utvecklare kan hämta sin datamodell och länka den till Azure Communication Services-identiteter. Datamodellen för en användare innehåller troligen information som visningsnamn, profilbild eller avatar och annan information. Utvecklare använder den här informationen för att skapa sina program och plattformar.

Användargränssnittsbiblioteket gör det enkelt för dig att mata in en användardatamodell i användargränssnittskomponenterna. När du renderar gränssnittskomponenterna visar de användarna den angivna informationen i stället för allmän information från Azure Communication Services.

Förutsättningar

Konfigurera inmatning

Detaljerad dokumentation och snabbstarter om webbgränssnittsbiblioteket finns i Storybook för webbgränssnittsbibliotek.

Mer information finns i Anpassad användardatamodell i webbgränssnittsbiblioteket.

Mer information finns i Android UI-biblioteket med öppen källkod och exempelprogramkoden.

Anpassning av lokal deltagarvy

Användargränssnittsbiblioteket ger utvecklare möjlighet att tillhandahålla en anpassad upplevelse när det gäller deltagarinformation. Vid start kan du även mata in lokala deltagardata. Dessa lokala data delas inte med servern och du kan använda dem för att anpassa visningsnamnet och avataren för den lokala användaren.

Lokala alternativ

CallCompositeLocalOptions är den datamodell som kan ha CallCompositeParticipantViewData och CallCompositeSetupScreenViewData. Den representerar den lokala deltagaren.

För fjärrdeltagare visar displayName användargränssnittsbiblioteket som standard information som matas in i RemoteOptions. Den här informationen skickas till Serverdelen för Azure Communication Services. Om CallCompositeParticipantViewData matas in visas deltagaren displayName och avatar informationen i alla avatarkomponenter lokalt.

På samma sätt för CallCompositeSetupScreenViewData, title och subtitle i CallCompositeSetupScreenViewData skriva över navigeringsfältets rubrik och underrubrik på förinläsningsskärmen. Som standard visar användargränssnittsbiblioteket installationsprogrammet som rubrik och ingenting som underrubrik.

Visa data för lokal deltagare

CallCompositeParticipantViewData är en klass som anger displayName, avatarBitmapoch scaleType för avatarkontroll. Den här klassen skickas till CallCompositeLocalOptions för att anpassa de lokala deltagarnas visningsinformation. Den här klassen finns i objektet CallCompositeLocalOptions som representerar alternativ som används lokalt på den enhet som gör anropet.

Den här instansen av displayName skiljer sig från den information som displayName skickas via CallCompositeRemoteOptions:

  • Instansen CallCompositeParticipantViewData av displayName används endast lokalt som en åsidosättning.
  • Instansen CallCompositeRemoteOptions av displayName skickas till servern och delas med andra deltagare.

Om du inte anger instansen CallCompositeParticipantViewData av displayNameanvänder programmet instansen CallCompositeRemoteOptions av displayName.

Konfigurera skärmvisningsdata

CallCompositeSetupScreenViewData är ett objekt som anger title och subtitle för navigeringsfältet på skärmen för samtalskonfiguration. Om subtitle inte har definierats är underrubriken dold. title Här krävs för att ange subtitle, men subtitle är valfritt när title har angetts. Den här klassen lagras lokalt och dess information skickas inte till servern.

Användning

Om du vill använda CallCompositeLocalOptionsskickar du instansen av CallCompositeParticipantViewData och/eller CallCompositeSetupScreenViewDataoch matar in CallCompositeLocalOptions till 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)
Installationsvy Vyn Samtalsupplevelse
Screenshot of Android data custom model injection. Screenshot of Android data custom model injection with name.

Anpassning av fjärrdeltagarevy

I vissa fall kanske du vill ange lokala åsidosättningar för fjärrdeltagare för att tillåta anpassade avatarer och titlar.

Processen liknar den lokala deltagarprocessen, men data anges när deltagarna ansluter till anropet. Som utvecklare skulle du behöva lägga till en lyssnare när fjärrdeltagare ansluter till samtalet och sedan anropa en metod för att ställa in CallCompositeParticipantViewData för dessa fjärranvändare.

Användning

Om du vill ange visningsdata för fjärrdeltagare anger du setOnRemoteParticipantJoinedHandler. Vid anslutning till fjärrdeltagare använder du setRemoteParticipantViewData för callComposite att mata in visningsdata för fjärrdeltagare. Deltagarens identifierare CommunicationIdentifier identifierar unikt en fjärrdeltagare.

Anrop för att setRemoteParticipantViewData returnera ett resultat av CallCompositeSetParticipantViewDataResult, som har följande värden:

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

Mer information finns i iOS-användargränssnittsbiblioteket med öppen källkod och exempelprogramkoden.

Visa datainmatning för lokal deltagare

Användargränssnittsbiblioteket ger utvecklare möjlighet att tillhandahålla en anpassad upplevelse. Vid start kan du mata in valfria lokala dataalternativ. Det här objektet kan innehålla en användargränssnittsbild som representerar avataren som ska återges och ett visningsnamn som ska visas i stället. Ingen av den här informationen skickas till Azure Communication Services. Den finns lokalt i användargränssnittsbiblioteket.

Lokala alternativ

LocalOptions är en datamodell som består av ParticipantViewData och SetupScreenViewData.

För ParticipantViewData, som standard visar displayName användargränssnittsbiblioteket information som matas in i RemoteOptions. Den här informationen skickas till Serverdelen för Azure Communication Services. Om ParticipantViewData matas in visas deltagaren displayName och avatar informationen i alla avatarkomponenter.

För SetupScreenViewData, som standard, visar användargränssnittsbiblioteket installationsprogrammet som rubrik och ingenting som underrubrik. Informationen title och subtitle i SetupScreenViewData skriver över navigeringsfältets rubrik respektive underrubrik på förinläsningsskärmen.

Visa data för lokal deltagare

ParticipantViewData är ett objekt som anger användargränssnittsbilden displayName och avatar för avatarkomponenter. Den här klassen matas in i användargränssnittsbiblioteket för att ange avatarinformation. Den lagras lokalt och skickas aldrig till servern.

Konfigurera skärmvisningsdata

SetupScreenViewData är ett objekt som anger title och subtitle för navigeringsfältet på förinställningsskärmen (kallas även installationsvy). Om du definierar SetupScreenViewDatamåste du också ange title eftersom det är ett obligatoriskt fält. Krävs dock subtitle inte.

Om du inte definierar subtitleär det dolt. Den här klassen lagras lokalt och dess information skickas inte till servern.

Användning

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

Datainmatning för fjärrdeltagarevy

Vid anslutning till fjärrdeltagare kan du mata in visningsdata för fjärrdeltagaren. Den här deltagarens visningsdata kan innehålla en användargränssnittsbild som representerar avataren som ska återges och ett visningsnamn som du kan visa i stället. Ingen av den här informationen skickas till Azure Communication Services. Den finns lokalt i användargränssnittsbiblioteket.

Användning

Om du vill ange visningsdata för fjärrdeltagare anger du onRemoteParticipantJoined slutförande för händelsehanteraren. Vid anslutning till fjärrdeltagare använder du set(remoteParticipantViewData:, for:, completionHandler:) för CallComposite att mata in visningsdata för fjärrdeltagare. Deltagaridentifieraren CommunicationIdentifier identifierar unikt en fjärrdeltagare. Du använder den valfria slutförandehanteraren för att returnera resultatet av den angivna åtgärden.

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)")
      }
    }
  }
}
Deltagarlista
Screenshot of iOS remote participants view data injection.

Nästa steg