Injetar um modelo de dados personalizado na biblioteca de interface do usuário para um aplicativo

Para obter documentação detalhada e guias de início rápido sobre a Biblioteca da Interface do Usuário da Web, consulte o Storybook da Biblioteca da Interface do Usuário da Web.

Para saber mais, consulte Modelo de dados de usuário personalizado na Biblioteca da interface do usuário da Web.

Para obter mais informações, consulte a biblioteca de interface do usuário do Android de código aberto e o código do aplicativo de exemplo.

Personalização da visão do participante local

A Biblioteca da Interface do Usuário oferece aos desenvolvedores a capacidade de fornecer uma experiência personalizada em relação às informações dos participantes. No lançamento, você pode, opcionalmente, injetar dados de participantes locais. Esses dados locais não são compartilhados com o servidor e você pode usá-los para personalizar o nome de exibição e o avatar do usuário local.

Opções locais

CallCompositeLocalOptions é o modelo de dados que pode ter CallCompositeParticipantViewData e CallCompositeSetupScreenViewData. Representa o participante local.

Por padrão, para participantes remotos, a Biblioteca da Interface do Usuário exibe displayName informações injetadas no RemoteOptions. Essas informações são enviadas para o servidor back-end dos Serviços de Comunicação do Azure. Se CallCompositeParticipantViewData for injetado, as informações do participante displayName e avatar são exibidas localmente em todos os componentes do avatar.

Da mesma forma, CallCompositeSetupScreenViewData, title e subtitle em CallCompositeSetupScreenViewData irão substituir, respetivamente, o título e o subtítulo da barra de navegação na tela da pré-reunião. Por padrão, a UI Library exibe Instalação como o título e nada como o subtítulo.

Dados de visualização do participante local

CallCompositeParticipantViewData é uma classe que define displayName, avatarBitmape scaleType para controle de avatar. Esta classe é passada para CallCompositeLocalOptions de modo a personalizar as informações de visualização dos participantes locais. Essa classe é mantida no objeto que representa as CallCompositeLocalOptions opções usadas localmente no dispositivo que faz a chamada.

Esta instância de displayName difere da informação passada através de displayName:

• A CallCompositeParticipantViewData instância de displayName é usada apenas localmente como uma substituição.
• A CallCompositeRemoteOptions instância de displayName é passada para o servidor e compartilhada com outros participantes.

Se você não fornecer a CallCompositeParticipantViewData instância do displayName, o aplicativo usará a CallCompositeRemoteOptions instância do displayName.

Configurar dados de visualização de ecrã

CallCompositeSetupScreenViewData é um objeto que define title e subtitle para a barra de navegação na tela de configuração de chamada. Se subtitle não estiver definido, a legenda fica oculta. Aqui, title é necessário para definir subtitle, mas subtitle é opcional quando title é definido. Essa classe é armazenada localmente e suas informações não são enviadas para o servidor.

Utilização

Para utilizar CallCompositeLocalOptions, passe a instância de CallCompositeParticipantViewData e/ou CallCompositeSetupScreenViewDatae injete CallCompositeLocalOptions em 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);

Visualização de configuração	Visualização da experiência de chamada

Personalização da visão de participante remoto

Em alguns casos, talvez se queira fornecer ajustes locais para participantes remotos para permitir avatares e títulos personalizados.

O processo é semelhante ao processo do participante local, mas os dados são definidos quando os participantes participam da chamada. Como desenvolvedor, você precisaria adicionar um ouvinte quando participantes remotos ingressassem na chamada e, em seguida, chamar um método para definir CallCompositeParticipantViewData para esses usuários remotos.

Utilização

Para definir os dados de exibição para participantes remotos, defina setOnRemoteParticipantJoinedHandler. Quando um participante remoto se junta, use setRemoteParticipantViewData para callComposite inserir dados de visualização para os participantes remotos. O identificador de participante CommunicationIdentifier identifica exclusivamente um participante remoto.

Chamadas para setRemoteParticipantViewData retornam um resultado de CallCompositeSetParticipantViewDataResult, que tem os seguintes valores:

• 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 de participantes

Para obter mais informações, consulte a biblioteca de interface do usuário do iOS de código aberto e o código de aplicativo de exemplo.

Injeção de dados de visualização do participante local

A biblioteca da interface do usuário oferece aos desenvolvedores a capacidade de fornecer uma experiência personalizada. No lançamento, você pode injetar opções de dados locais opcionais. Esse objeto pode conter uma imagem da interface do usuário que representa o avatar a ser renderizado e um nome de exibição a ser exibido opcionalmente. Nenhuma dessas informações é enviada para os Serviços de Comunicação do Azure. Está localizado localmente na Biblioteca de Interface Gráfica.

Opções locais

LocalOptions é um modelo de dados que consiste em ParticipantViewData e SetupScreenViewData.

Por ParticipantViewData, por padrão, a Biblioteca da Interface do Usuário exibe displayName informações injetadas no RemoteOptions. Essas informações são enviadas para o servidor back-end dos Serviços de Comunicação do Azure. Se ParticipantViewData for injetado, as informações do participante displayName e avatar são exibidas em todos os componentes do avatar.

Para SetupScreenViewData, por padrão, a Biblioteca de Interface de Utilizador exibe Configuração como o título e nada como o subtítulo. A informação em title e subtitle substituem o título e o subtítulo na tela de pré-reunião da barra de navegação, respectivamente.

Dados de visualização do participante local

ParticipantViewData é um objeto que define a imagem da interface do usuário displayName e avatar para componentes de avatar. Essa classe é injetada na biblioteca da interface do usuário para definir informações de avatar. É armazenado localmente e nunca enviado para o servidor.

Configurar dados de visualização de ecrã

SetupScreenViewData é um objeto que define title e subtitle para a barra de navegação na tela de pré-reunião (também conhecido como modo de exibição de configuração). Se você definir SetupScreenViewData, você também deve fornecer title porque é um campo obrigatório. No entanto, subtitle não é obrigatório.

Se você não definir subtitle, ele está oculto. Essa classe é armazenada localmente e suas informações não são enviadas para o servidor.

Utilização

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

Visualização de configuração	Visualização da experiência de chamada

Injeção de dados de visualização de participante remoto

Quando um participante remoto se junta, é possível injetar os dados de visualização para o participante remoto. Esses dados de visualização do participante podem incluir uma imagem de UI que representa o avatar a ser renderizado e um nome de exibição para ser mostrado opcionalmente. Nenhuma dessas informações é enviada para os Serviços de Comunicação do Azure. Está localizado localmente na Biblioteca de Interface Gráfica.

Utilização

Para definir os dados de exibição para participantes remotos, defina onRemoteParticipantJoined a conclusão para o manipulador de eventos. Quando um participante remoto se junta, use set(remoteParticipantViewData:, for:, completionHandler:) para CallComposite inserir dados de visualização para os participantes remotos. O identificador CommunicationIdentifier de participante identifica exclusivamente um participante remoto. Você usa o manipulador de conclusão opcional para retornar o resultado da operação de configuração.

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 de participantes