Udostępnij za pośrednictwem

Wstrzykiwanie niestandardowego modelu danych w bibliotece interfejsu użytkownika dla aplikacji

  • Artykuł

Usługi Azure Communication Services korzystają z niezależnego od tożsamości modelu, w którym deweloperzy mogą korzystać z własnych tożsamości. Deweloperzy mogą pobrać model danych i połączyć go z tożsamościami usług Azure Communication Services. Model danych użytkownika najprawdopodobniej zawiera informacje, takie jak nazwa wyświetlana, obraz profilu lub awatar oraz inne szczegóły. Deweloperzy używają tych informacji do tworzenia aplikacji i platform.

Biblioteka interfejsu użytkownika ułatwia wprowadzanie modelu danych użytkownika do składników interfejsu użytkownika. Podczas renderowania składników interfejsu użytkownika są one wyświetlane użytkownikom podane informacje, a nie ogólne informacje z usług Azure Communication Services.

Wymagania wstępne

Konfigurowanie iniekcji

Aby uzyskać szczegółową dokumentację i przewodniki Szybki start dotyczące biblioteki interfejsu użytkownika sieci Web, zobacz artykuł Storybook biblioteki interfejsu użytkownika sieci Web.

Aby dowiedzieć się więcej, zobacz Niestandardowy model danych użytkownika w bibliotece interfejsu użytkownika sieci Web.

Aby uzyskać więcej informacji, zobacz bibliotekę interfejsu użytkownika systemu Android typu open source i przykładowy kod aplikacji.

Dostosowywanie widoku uczestnika lokalnego

Biblioteka interfejsu użytkownika zapewnia deweloperom możliwość zapewnienia dostosowanego środowiska dotyczącego informacji o uczestnikach. Podczas uruchamiania możesz opcjonalnie wstrzyknąć dane uczestnika lokalnego. Te dane lokalne nie są udostępniane serwerowi i można ich użyć do dostosowania nazwy wyświetlanej i awatara użytkownika lokalnego.

Opcje lokalne

CallCompositeLocalOptions to model danych, który może mieć wartości CallCompositeParticipantViewData i CallCompositeSetupScreenViewData. Reprezentuje on lokalnego uczestnika.

Domyślnie w przypadku uczestników zdalnych biblioteka interfejsu użytkownika wyświetla displayName informacje wprowadzone w programie RemoteOptions. Te informacje są wysyłane do serwera zaplecza usług Azure Communication Services. W przypadku CallCompositeParticipantViewData wstrzyknięcia uczestnik displayName i avatar informacje są wyświetlane we wszystkich składnikach awatara lokalnie.

Podobnie dla CallCompositeSetupScreenViewDatatitle parametrów i subtitle zastąp CallCompositeSetupScreenViewData tytuł i podtytuł paska nawigacyjnego odpowiednio na ekranie premeeting. Domyślnie biblioteka interfejsu użytkownika wyświetla pozycję Konfiguracja jako tytuł i nic jako podtytuł.

Dane widoku uczestnika lokalnego

CallCompositeParticipantViewData jest klasą, która ustawia displayName, avatarBitmapi scaleType dla kontrolki awatara. Ta klasa jest przekazywana do CallCompositeLocalOptions elementu w celu dostosowania informacji o widoku uczestników lokalnych. Ta klasa jest przechowywana w CallCompositeLocalOptions obiekcie reprezentującym opcje używane lokalnie na urządzeniu, które wykonuje wywołanie.

To wystąpienie displayName różni się od displayName informacji przekazywanych za pośrednictwem metody CallCompositeRemoteOptions:

  • Wystąpienie CallCompositeParticipantViewData klasy displayName jest używane tylko lokalnie jako zastąpienie.
  • Wystąpienie CallCompositeRemoteOptions obiektu displayName jest przekazywane do serwera i udostępniane innym uczestnikom.

Jeśli nie podasz CallCompositeParticipantViewData wystąpienia displayNameprogramu , aplikacja używa CallCompositeRemoteOptions wystąpienia displayNameklasy .

Konfigurowanie danych widoku ekranu

CallCompositeSetupScreenViewData jest obiektem, który ustawia title pasek nawigacyjny na subtitle ekranie konfiguracji wywołań. Jeśli subtitle nie zdefiniowano, podtytuł jest ukryty. title W tym miejscu jest wymagane ustawienie subtitleparametru , ale subtitle jest opcjonalne w przypadku title ustawienia. Ta klasa jest przechowywana lokalnie, a jej informacje nie są wysyłane do serwera.

Sposób użycia

Aby użyć CallCompositeLocalOptionspolecenia , przekaż wystąpienie CallCompositeParticipantViewData i/lub CallCompositeSetupScreenViewData, i wstrzyknąć CallCompositeLocalOptions do metody 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)
Widok instalacji Widok środowiska wywoływania
Screenshot of Android data custom model injection. Screenshot of Android data custom model injection with name.

Dostosowywanie widoku uczestnika zdalnego

W niektórych przypadkach możesz podać lokalne przesłonięcia dla uczestników zdalnych, aby zezwolić na niestandardowe awatary i tytuły.

Proces jest podobny do procesu uczestnika lokalnego, ale dane są ustawiane, gdy uczestnicy dołączają do połączenia. Jako deweloper należy dodać odbiornik, gdy uczestnicy zdalni dołączają do wywołania, a następnie wywołać metodę ustawianą CallCompositeParticipantViewData dla tych użytkowników zdalnych.

Sposób użycia

Aby ustawić dane widoku dla uczestników zdalnych, ustaw wartość setOnRemoteParticipantJoinedHandler. W przypadku dołączenia uczestnika zdalnego użyj setRemoteParticipantViewData polecenia callComposite , aby wstrzyknąć dane widoku dla uczestników zdalnych. Identyfikator uczestnika CommunicationIdentifier jednoznacznie identyfikuje uczestnika zdalnego.

Wywołuje metodę , aby setRemoteParticipantViewData zwrócić wynik CallCompositeSetParticipantViewDataResultfunkcji , która ma następujące wartości:

  • 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
                }
            }
Lista uczestników
Screenshot of Android remote participant view data injection.

Aby uzyskać więcej informacji, zobacz bibliotekę interfejsu użytkownika systemu iOS typu open source i przykładowy kod aplikacji.

Wstrzykiwanie danych widoku uczestnika lokalnego

Biblioteka interfejsu użytkownika zapewnia deweloperom możliwość zapewnienia dostosowanego środowiska. Podczas uruchamiania możesz wstrzyknąć opcjonalne opcje danych lokalnych. Ten obiekt może zawierać obraz interfejsu użytkownika, który reprezentuje awatar do renderowania, oraz nazwę wyświetlaną do opcjonalnego wyświetlenia. Żadne z tych informacji nie jest wysyłane do usług Azure Communication Services. Jest on przechowywany lokalnie w bibliotece interfejsu użytkownika.

Opcje lokalne

LocalOptions to model danych, który składa się z elementów ParticipantViewData i SetupScreenViewData.

W przypadku ParticipantViewDataprogramu domyślnie biblioteka interfejsu użytkownika wyświetla displayName informacje wprowadzone w pliku RemoteOptions. Te informacje są wysyłane do serwera zaplecza usług Azure Communication Services. W przypadku ParticipantViewData wstrzyknięcia uczestnik displayName i avatar informacje są wyświetlane we wszystkich składnikach awatara.

W przypadku SetupScreenViewDataprogramu biblioteka interfejsu użytkownika domyślnie wyświetla pozycję Konfiguracja jako tytuł i nic jako podtytuł. Informacje title i subtitle w SetupScreenViewData zastąpieniu tytułu i podtytułu paska nawigacyjnego na ekranie przedmeczowym, odpowiednio.

Dane widoku uczestnika lokalnego

ParticipantViewData to obiekt, który ustawia obraz interfejsu displayName użytkownika i avatar dla składników awatara. Ta klasa jest wstrzykiwana do biblioteki interfejsu użytkownika w celu ustawienia informacji o awatarze. Jest on przechowywany lokalnie i nigdy nie jest wysyłany do serwera.

Konfigurowanie danych widoku ekranu

SetupScreenViewData to obiekt, który ustawia title i subtitle dla paska nawigacyjnego na ekranie przedmeczowym (nazywanym również widokiem konfiguracji). Jeśli zdefiniujesz SetupScreenViewDataelement , musisz również podać title , ponieważ jest to pole wymagane. subtitle Nie jest jednak wymagane.

Jeśli nie zdefiniujesz subtitleelementu , jest ona ukryta. Ta klasa jest przechowywana lokalnie, a jej informacje nie są wysyłane do serwera.

Sposób użycia

// 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)
Widok instalacji Widok środowiska wywoływania
Screenshot of iOS data custom model injection. Screenshot of iOS data custom model injection with name.

Wstrzykiwanie danych widoku uczestnika zdalnego

Przy dołączeniu uczestnika zdalnego można wstrzyknąć dane widoku dla uczestnika zdalnego. Te dane widoku uczestnika mogą zawierać obraz interfejsu użytkownika reprezentujący awatar do renderowania i nazwę wyświetlaną do opcjonalnego wyświetlenia. Żadne z tych informacji nie jest wysyłane do usług Azure Communication Services. Jest on przechowywany lokalnie w bibliotece interfejsu użytkownika.

Sposób użycia

Aby ustawić dane widoku dla uczestników zdalnych, ustaw onRemoteParticipantJoined uzupełnianie programu obsługi zdarzeń. W przypadku dołączenia uczestnika zdalnego użyj set(remoteParticipantViewData:, for:, completionHandler:) polecenia CallComposite , aby wstrzyknąć dane widoku dla uczestników zdalnych. Identyfikator CommunicationIdentifier uczestnika jednoznacznie identyfikuje uczestnika zdalnego. Aby zwrócić wynik operacji zestawu, należy użyć opcjonalnej procedury obsługi uzupełniania.

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

Następne kroki