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

Aby uzyskać szczegółową dokumentację i szybkie starty dotyczące biblioteki interfejsu użytkownika Web, zobacz Web UI Library Storybook.

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 daje deweloperom możliwość oferowania spersonalizowanego doświadczenia w zakresie informacji o uczestnikach. Podczas uruchamiania możesz opcjonalnie dodać 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ć CallCompositeParticipantViewData i CallCompositeSetupScreenViewData. Reprezentuje on lokalnego uczestnika.

Domyślnie biblioteka interfejsu użytkownika dla uczestników zdalnych wyświetla informacje displayName przechowywane w RemoteOptions. Te informacje są wysyłane do serwera zaplecza usług Azure Communication Services. Jeśli wstrzyknięty zostanie CallCompositeParticipantViewData, informacje o uczestnikach displayName i avatar będą wyświetlane lokalnie we wszystkich składnikach awatara.

Podobnie, dla CallCompositeSetupScreenViewData, title i subtitle w CallCompositeSetupScreenViewData zastępują tytuł i podtytuł paska nawigacyjnego na ekranie przed spotkaniem. Domyślnie biblioteka interfejsu użytkownika wyświetla Setup jako tytuł i nic jako podtytuł.

Dane widoku uczestnika lokalnego

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

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

• Instancja CallCompositeParticipantViewDatadisplayName jest używana tylko lokalnie jako nadpisanie.
• Wystąpienie CallCompositeRemoteOptionsdisplayName jest przekazywane do serwera i udostępniane innym uczestnikom.

Jeśli nie podasz wystąpienia CallCompositeParticipantViewDatadisplayName, aplikacja użyje wystąpienia CallCompositeRemoteOptionsdisplayName.

Konfigurowanie danych widoku ekranu

CallCompositeSetupScreenViewData to obiekt, który ustawia title i subtitle dla paska nawigacyjnego na ekranie konfiguracji wywołań. Jeśli subtitle nie jest zdefiniowana, podtytuł jest ukryty. Tutaj title jest wymagane do ustawienia subtitle, ale subtitle jest opcjonalne, gdy title jest ustawione. Ta klasa jest przechowywana lokalnie, a jej informacje nie są wysyłane do serwera.

Użycie

Aby użyć CallCompositeLocalOptions, przekaż wystąpienie CallCompositeParticipantViewData i/lub CallCompositeSetupScreenViewData, a następnie wstrzyknij CallCompositeLocalOptions do 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);

Widok konfiguracji	Widok doświadczenia z dzwonieniem

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łączą do wywołania, a następnie wywołać metodę w celu ustawienia CallCompositeParticipantViewData dla tych użytkowników zdalnych.

Użycie

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

Wywołania setRemoteParticipantViewData zwracają wynik CallCompositeSetParticipantViewDataResult, który 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
                }
            }

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

Lista uczestników

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 wprowadzić opcje danych lokalnych. Ten obiekt może zawierać obraz interfejsu użytkownika, który reprezentuje awatar do wyrenderowania, i nazwę użytkownika, którą można opcjonalnie wyświetlić. Ż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 składający się z ParticipantViewData i SetupScreenViewData.

W przypadku ParticipantViewDatabiblioteka interfejsu użytkownika domyślnie wyświetla displayName informacje wprowadzone w RemoteOptions. Te informacje są wysyłane do serwera zaplecza usług Azure Communication Services. Jeśli ParticipantViewData zostanie wstrzyknięte, informacje o uczestnikach displayName i avatar są wyświetlane we wszystkich składnikach awatara.

W przypadku SetupScreenViewDatabiblioteka interfejsu użytkownika domyślnie wyświetla Setup jako tytuł i nic jako podtytuł. Informacje title i subtitle w SetupScreenViewData zastępują tytuł i podtytuł paska nawigacyjnego odpowiednio na ekranie przedspotkaniowym.

Dane widoku uczestnika lokalnego

ParticipantViewData to obiekt, który konfiguruje obraz interfejsu użytkownika displayName 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 na pasku nawigacyjnym na ekranie przedmeczowym (nazywanym również widokiem konfiguracji). Jeśli zdefiniujesz SetupScreenViewData, musisz również podać title, ponieważ jest to wymagane pole. Jednak subtitle nie jest wymagana.

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

Użycie

// 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 konfiguracji	Widok doświadczenia z dzwonieniem

Wprowadzanie danych widoku zdalnego uczestnika

Gdy dołącza uczestnik zdalny, można załadować dane widoku dla tego uczestnika. 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.

Użycie

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

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