Inserción de un modelo de datos personalizado en la biblioteca de interfaz de usuario para una aplicación

Para obtener documentación detallada e inicios rápidos sobre la biblioteca de interfaz de usuario web, consulte el libro gráfico de la biblioteca de interfaz de usuario web.

Para más información, consulte Modelo de datos de usuario personalizado en la biblioteca de interfaz de usuario web.

Para obtener más información, consulte la biblioteca de interfaz de usuario de Android de código abierto y el código de aplicación de ejemplo.

Personalización de la vista del participante local

La biblioteca de interfaz de usuario ofrece a los desarrolladores la posibilidad de proporcionar una experiencia personalizada con respecto a la información de los participantes. En el inicio, puede insertar datos de participantes locales opcionalmente. Estos datos locales no se comparten con el servidor y puede usarlos para personalizar el nombre para mostrar y el avatar del usuario local.

Opciones locales

CallCompositeLocalOptions es el modelo de datos que puede tener CallCompositeParticipantViewData y CallCompositeSetupScreenViewData. Representa el participante local.

De forma predeterminada, para los participantes remotos, la biblioteca de interfaz de usuario muestra displayName información insertada en RemoteOptions. Esta información se envía al servidor back-end de Azure Communication Services. Si se inyecta CallCompositeParticipantViewData, la información del participante displayName y avatar se muestra en todos los componentes del avatar localmente.

Del mismo modo, para CallCompositeSetupScreenViewData, title y subtitle en CallCompositeSetupScreenViewData sobrescriben el título y el subtítulo de la barra de navegación en la pantalla previa a la reunión, respectivamente. De forma predeterminada, la biblioteca de interfaz de usuario muestra el programa de instalación como título y nada como subtítulo.

Datos de la vista de participantes locales

CallCompositeParticipantViewData es una clase que establece displayName, avatarBitmapy scaleType para el control de avatar. Esta clase se pasa a CallCompositeLocalOptions para personalizar la información de vista de los participantes locales. Esta clase se mantiene en el CallCompositeLocalOptions objeto que representa las opciones usadas localmente en el dispositivo que realiza la llamada.

Esta instancia de displayName difiere de la información de displayName pasada a través de CallCompositeRemoteOptions.

• La instancia CallCompositeParticipantViewData de displayName solo se utiliza de forma local como anulación.
• La CallCompositeRemoteOptions instancia de displayName se pasa al servidor y se comparte con otros participantes.

Si no proporciona la CallCompositeParticipantViewData instancia de displayName, la aplicación usa la CallCompositeRemoteOptions instancia de displayName.

Configuración de datos de vista de pantalla

CallCompositeSetupScreenViewData es un objeto que establece title y subtitle para la barra de navegación en la pantalla de configuración de llamadas. Si subtitle no está definido, el subtítulo está oculto. En este caso, se requiere title para establecer subtitle, pero subtitle es opcional cuando se establece title. Esta clase se almacena localmente y su información no se envía al servidor.

Usage

Para usar CallCompositeLocalOptions, pase la instancia de CallCompositeParticipantViewData y/o CallCompositeSetupScreenViewDatae inserte CallCompositeLocalOptions en 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);

Vista de configuración	Vista de la experiencia de llamada

Personalización de la vista de los participantes remotos

En algunos casos, es posible que quiera proporcionar ajustes locales para permitir que los participantes remotos utilicen avatares y títulos personalizados.

El proceso es similar al proceso de participante local, pero los datos se establecen cuando los participantes se unen a la llamada. Como desarrollador, tendría que agregar un agente de escucha cuando los participantes remotos se unan a la llamada y, a continuación, llamar a un método para establecer CallCompositeParticipantViewData para esos usuarios remotos.

Usage

Para establecer los datos de vista de los participantes remotos, establezca setOnRemoteParticipantJoinedHandler. En la unión de participantes remotos, utilice setRemoteParticipantViewData para callComposite para inyectar los datos de vista de los participantes remotos. El identificador de participante CommunicationIdentifier identifica de forma única a un participante remoto.

Las llamadas a setRemoteParticipantViewData devuelven un resultado de CallCompositeSetParticipantViewDataResult, que tiene los valores siguientes:

• 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 obtener más información, consulte la biblioteca de interfaz de usuario de iOS de código abierto y el código de aplicación de ejemplo.

Inyección de datos de la vista del participante local

La biblioteca de interfaz de usuario ofrece a los desarrolladores la capacidad de proporcionar una experiencia personalizada. En el inicio, puede insertar opciones de datos locales opcionales. Este objeto puede contener una imagen de interfaz de usuario que representa el avatar que se va a representar y un nombre para mostrar opcionalmente en su lugar. Ninguna de estas informaciones se envía a Azure Communication Services. Se mantiene localmente en la biblioteca de interfaz de usuario.

Opciones locales

LocalOptions es un modelo de datos que consta de ParticipantViewData y SetupScreenViewData.

Para ParticipantViewData, por defecto, la Biblioteca de interfaz de usuario muestra información displayName inyectada en RemoteOptions. Esta información se envía al servidor back-end de Azure Communication Services. Si se inserta ParticipantViewData, la información del participante displayName y avatar se muestra en todos los componentes del avatar.

Para SetupScreenViewData, de forma predeterminada, la biblioteca de interfaz de usuario muestra el programa de instalación como título y nada como subtítulo. La información de title y subtitle en SetupScreenViewData sobrescribe, respectivamente, el título y el subtítulo de la barra de navegación en la pantalla previa a la reunión.

Datos de la vista de participantes locales

ParticipantViewData es un objeto que establece la imagen de interfaz displayName de usuario y avatar para los componentes de avatar. Esta clase se inserta en la biblioteca de interfaz de usuario para establecer la información del avatar. Se almacena localmente y nunca se envía al servidor.

Configuración de datos de vista de pantalla

SetupScreenViewData es un objeto que establece title y subtitle para la barra de navegación en la pantalla de pre-reunión (también conocida como vista de configuración). Si define SetupScreenViewData, también debe proporcionar title porque es un campo obligatorio. Sin embargo, subtitle no es necesario.

Si no define subtitle, está oculto. Esta clase se almacena localmente y su información no se envía al servidor.

Usage

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

Vista de configuración	Vista de la experiencia de llamada

Inyección de datos de visualización de participantes remotos

Cuando se une un participante remoto, puede inyectar la información de la visualización para el participante remoto. Estos datos de la vista de participante pueden contener una imagen de interfaz de usuario que represente el avatar a representar y un nombre para mostrar opcionalmente en su lugar. Ninguna de estas informaciones se envía a Azure Communication Services. Se mantiene localmente en la biblioteca de interfaz de usuario.

Usage

Para establecer los datos de la vista para los participantes remotos, establezca la finalización onRemoteParticipantJoined para el controlador de eventos. En la unión de participantes remotos, utilice set(remoteParticipantViewData:, for:, completionHandler:) para CallComposite para inyectar los datos de vista de los participantes remotos. El identificador CommunicationIdentifier del participante identifica de forma única un participante remoto. Se utiliza el controlador de finalización opcional para devolver el resultado de la operación de ajuste.

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