Compartilhar via

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

Os Serviços de Comunicação do Azure usam um modelo independente de identidade no qual os desenvolvedores podem trazer suas próprias identidades. Os desenvolvedores podem obter seu modelo de dados e vinculá-lo às identidades dos Serviços de Comunicação do Azure. O modelo de dados para um usuário provavelmente inclui informações como nome de exibição, imagem de perfil ou avatar e outros detalhes. Os desenvolvedores usam essas informações para criar seus aplicativos e plataformas.

A Biblioteca de Interface do Usuário simplifica a injeção de um modelo de dados do usuário nos componentes da interface do usuário. Quando você renderiza os componentes da interface do usuário, eles mostram aos usuários as informações fornecidas em vez de informações genéricas dos Serviços de Comunicação do Azure.

Pré-requisitos

Configurar a injeção

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

Para saber mais, consulte o Modelo de Dados do Usuário Personalizado na Biblioteca de Interface do Usuário da Web.

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

Personalização da exibição do participante local

A Biblioteca de Interface do Usuário oferece aos desenvolvedores a capacidade de fornecer uma experiência personalizada em relação às informações do participante. No início, opcionalmente, você pode 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. Ele representa o participante local.

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

Da mesma forma, para CallCompositeSetupScreenViewData, o title e o subtitle em CallCompositeSetupScreenViewData substituem o título e o subtítulo da barra de navegação na tela de pré-reunião, respectivamente. Por padrão, a Biblioteca de Interface do Usuário exibe a Instalação como o título e nada como o subtítulo.

Dados de exibição do participante local

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

Essa instância de displayName é diferente das informações displayName passadas por meio de CallCompositeRemoteOptions:

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

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

Dados de exibição da tela de configuração

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, o subtítulo ficará oculto. Aqui, title é necessário definir subtitle, mas subtitle é opcional quando title está definido. Essa classe é armazenada localmente e suas informações não são enviadas para o servidor.

Uso

Para usar CallCompositeLocalOptions, passe a instância de CallCompositeParticipantViewData e/ou CallCompositeSetupScreenViewData e 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)
Exibição de configuração Exibição de experiência de chamada
Captura de tela da injeção de modelo personalizado de dados do Android. Captura de tela da injeção de modelo personalizado de dados do Android com nome.

Personalização da exibição de participante remoto

Em alguns casos, talvez você queira fornecer substituições locais para participantes remotos para permitir avatares e títulos personalizados.

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

Uso

Para definir os dados de exibição para participantes remotos, defina setOnRemoteParticipantJoinedHandler. Na junção de participante remoto, use setRemoteParticipantViewData para callComposite para injetar dados de exibição para participantes remotos. O identificador de participante CommunicationIdentifier identifica exclusivamente um participante remoto.

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

  • 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 de participantes
Captura de tela da injeção de dados de exibição de participante remoto do Android.

Para obter mais informações, veja a Biblioteca de UI do iOS de código aberto e o código de aplicativo de amostra.

Injeção de dados de exibição de participante local

A Biblioteca de Interface do Usuário oferece aos desenvolvedores a capacidade de fornecer uma experiência personalizada. No início, você pode injetar opções opcionais de dados locais. Esse objeto pode conter uma imagem de 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 aos Serviços de Comunicação do Azure. Ele é realizado localmente na Biblioteca de Interface do Usuário.

Opções locais

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

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

Para SetupScreenViewData, por padrão, a Biblioteca de Interface do Usuário exibe a Instalação como o título e nada como o subtítulo. As informações title e subtitle em SetupScreenViewData substituem o título e o subtítulo da barra de navegação na tela de pré-reunião, respectivamente.

Dados de exibiçã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 de Interface do Usuário para definir informações de avatar. Elas são armazenadas localmente e nunca são enviadas para o servidor.

Dados de exibição da tela de configuração

SetupScreenViewData é um objeto que define title e subtitle para a barra de navegação na tela de pré-criação (também conhecida como exibição de instalação). Se você definir SetupScreenViewData, também deverá fornecer title porque é um campo obrigatório. No entanto, subtitle não é necessário.

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

Uso

// 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)
Exibição de configuração Exibição de experiência de chamada
Captura de tela da injeção de modelo personalizado de dados do iOS. Captura de tela da injeção de modelo personalizado de dados do iOS com nome.

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

Na junção de participante remoto, você pode injetar os dados de exibição para o participante remoto. Esses dados de exibição de participante podem conter uma imagem de 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 aos Serviços de Comunicação do Azure. Ele é realizado localmente na Biblioteca de Interface do Usuário.

Uso

Para definir os dados de exibição para participantes remotos, defina a conclusão de onRemoteParticipantJoined para o manipulador de eventos. Na junção de participante remoto, use set(remoteParticipantViewData:, for:, completionHandler:) para CallComposite para injetar dados de exibição para participantes remotos. O identificador CommunicationIdentifier do participante identifica exclusivamente um participante remoto. Use o manipulador de conclusão opcional para retornar o resultado da operação de conjunto.

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
Captura de tela de participantes remotos do iOS que exibem a injeção de dados.

Próximas etapas