Personalización de la interfaz de usuario — Android

Estos son los ajustes que puedes realizar para personalizar la interfaz de usuario de los vídeos de OpenTok:

Añadir un nombre a un flujo publicado

Puedes especificar el nombre del editor llamando a la función name() método del objeto Publisher.Builder cuando crear una instancia del objeto Publisher:

mPublisher = new Publisher.Builder(context)
  .name("Bob's video")
  .build();

Puedes utilizar este nombre para identificar al cliente que publica el flujo. La clase Stream tiene un name propiedad. Cuando tú suscribirse a un flujopuede mostrar este nombre en un elemento de la interfaz de usuario.

No introduzcas datos personales en el campo «nombre» del editor. — El nombre del editor puede quedar visible para los demás participantes de la sesión y también puede aparecer en la herramienta Inspector y en los registros internos de Vonage, por lo que nunca debes utilizar información confidencial o personal sin cifrar en el nombre del editor. Consulta las mejores prácticas de seguridad.

Añadir un botón de silenciar para un editor

No existe ningún elemento de interfaz de usuario por defecto para silenciar el micrófono del editor. Sin embargo, puede añadir un elemento, como un botón, que llame a la función setPublishAudio() del objeto PublisherKit cuando el usuario haga clic en él. Introduce false Para silenciar al editor:

mPublisher.setPublishAudio(false);

Pasa el balón a true para publicar audio.

mPublisher.setPublishAudio(true);

Añadir un botón de silencio para un abonado

No existe ningún elemento predeterminado de la interfaz de usuario para silenciar el audio del abonado. Sin embargo, puedes añadir un elemento, como un botón, que active la función setSubscribeToAudio() del objeto SubscriberKit cuando el usuario haga clic en él. Introduce false para silenciar al abonado

mSubscriber.setSubscribeToAudio(false);

Pasa el balón a true para suscribirse al audio (si hay un flujo de audio):

mSubscriber.setSubscribeToAudio(true);

Añadir un botón para activar la cámara del editor

No existe ningún elemento predeterminado en la interfaz de usuario para conmutar la cámara utilizada por el editor. Sin embargo, puede añadir un elemento, como un botón, que llame a la función swapCamera método del objeto Publisher:

mPublisher.swapCamera();

Tenga en cuenta que el cameraPosition La propiedad no está disponible en la clase PublisherKit. Si estás utilizando la clase PublisherKit para implementar un capturador de vídeo personalizadopuede definir la cámara utilizada en el código de captura de vídeo personalizado.

Ajuste de la interfaz de usuario cuando el vídeo está activado o desactivado

Cuando se desactiva el vídeo de un abonado, el SubscriberKit.VideoListener.onVideoDisabled(subscriber, reason) es llamado. Cuando esto ocurre, puede añadir un elemento de interfaz de usuario (como un icono) para indicar que el vídeo se ha desactivado:

@Override
public void onVideoDisabled(SubscriberKit subscriber, String reason) {
    // Display the video disabled indicator
}

Cuando se vuelve a habilitar el vídeo de un suscriptor, el SubscriberKit.VideoListener.onVideoEnabled(subscriber, reason) Se llama al método. Cuando esto ocurra, puedes eliminar un elemento de la interfaz de usuario (como un icono) que indique que el vídeo se ha vuelto a activar:

@Override
public void onVideoEnabled(SubscriberKit subscriber, String reason) {
    // Display the video disabled indicator
}

En las sesiones que utilizan el OpenTok Media Router (sesiones con el modo de medios configurado en «enrutado»), el SubscriberKit.VideoListener también puede llamar a los siguientes métodos:

  • onVideoDisableWarning(abonado) — El OpenTok Media Router ha detectado que la calidad de la transmisión se ha deteriorado y el vídeo se desactivará si la calidad sigue empeorando.
  • onVideoDisableWarningLifted(suscriptor) — El OpenTok Media Router ha determinado que la calidad de la transmisión ha mejorado hasta tal punto que la interrupción del vídeo no supone un riesgo inmediato.

Quizá también te interese mostrar y ocultar una notificación en la interfaz de usuario (como un icono) cuando se envíen estos mensajes.

Ten en cuenta que, al publicar un flujo, se activa o desactiva la función de recambio de audio para emisores y suscriptores. La función de recambio de audio desactiva el vídeo (tanto en los emisores como en los suscriptores) cuando las condiciones de la red o de la CPU no permiten la transmisión de vídeo. Consulta Opción alternativa de audio (Android).

Si activas la opción de audio alternativo del editor, los métodos de devolución de llamada de la PublisherKit.VideoListener Se invocan para los eventos relacionados con el plan de contingencia de audio del editor:

  • PublisherKit.VideoListener.onVideoDisabled(publisher, reason)
  • PublisherKit.VideoListener.onVideoDisabled(publisher, reason)
  • PublisherKit.VideoListener.onVideoDisableWarning(publisher)
  • PublisherKit.VideoListener.onVideoDisableWarningLifted(publisher)

Puedes mostrar indicadores de la interfaz de usuario en respuesta a estos eventos.

Visualización de un elemento indicador cuando se archiva una sesión

Cuando un archivo de una sesión comienza a grabar (o si se conecta a una sesión que se está grabando), la pantalla Session.ArchiveListener.onArchiveStarted(session, name) se llama el método. Cuando se detiene la grabación, el Session.ArchiveListener.onArchiveStopped(session, name) Se llama al método. Puedes añadir un elemento de la interfaz de usuario, como un icono que se muestre en una vista de editor, para indicar que se está grabando un vídeo:

@Override
public void onArchiveStarted(Session session, String id, String name) {
    // Display the archive indicator
}

@Override
public void onArchiveStopped(Session session, String id, String name) {
    // Hide the archive indicator
}

Ajuste de la interfaz de usuario en función de los niveles de audio

El SubscriberKit.AudioLevelListener.onAudioLevelUpdated(subscriber, audioLevel) y PublisherKit.AudioLevelListener.onAudioLevelUpdated(publsiher, audioLevel) Los mensajes se envían a intervalos regulares con el nivel de audio del suscriptor y del emisor. Puedes utilizar el audioLevel para actualizar la visualización en un medidor de nivel de audio:

@Override
public void onAudioLevelUpdated(
        SubscriberKit subscriber, float audioLevel) {
    // Adjust an audio meter UI element based on the audioLevel value.
}

Nota: El nivel de audio de un emisor no está disponible hasta que su transmisión se publique en una sesión. Para obtener una vista previa del audio antes de que el emisor comience a transmitir a la sesión, utiliza un controlador de audio personalizado.

Por defecto, por razones de privacidad, cuando todos los editores están silenciados se detiene la captura de audio y se libera el micrófono. Esto significa que no habrá más actualizaciones del nivel de audio hasta que una instancia del editor vuelva a habilitar el audio. A partir de la versión 2.31.0 el editor se habilita con una propiedad para permitir que la captura de audio continúe mientras está silenciado.

Al crear una nueva instancia de «publisher», el desarrollador puede activar este comportamiento:

mPublisher = new Publisher.Builder(this).name(mUsername).allowAudioCaptureWhileMuted(true).build();

Nota: Al activar este comportamiento, el micrófono se utilizará incluso cuando el editor esté silenciado.

Uso de un renderizador de vídeo personalizado

Las clases Subscriber y Publisher implementan un renderizador de vídeo estándar que renderiza el flujo y proporciona controles de interfaz de usuario para mostrar el nombre del flujo y silenciar el micrófono o la cámara. Puedes utilizar las clases SubscriberKit y PublisherKit para implementar un renderizador de vídeo personalizado.

El SDK de OpenTok para Android incluye una clase denominada `BaseVideoRenderer`. Sobrescribe esta clase para crear un renderizador de vídeo personalizado.

Después de instanciar un objeto PublisherKit, puede establecer un renderizador de vídeo personalizado llamando a la función setRenderer() método del objeto PublisherKit:

mPublisher = new PublisherKit(MyClass.this, "publisher");

// Use a custom video renderer.
// MyVideoRenderer extends BaseVideoRenderer
mRenderer = new MyVideoRenderer();
mPublisher.setRenderer(new mRenderer);

La clase SubscriberKit también tiene una clase setRenderer() método.

El onFrame() de la clase BaseVideoRenderer cuando hay un nuevo fotograma disponible:

    public void onFrame(Frame frame) {
        // The new frame is available.
    }

El frame es un objeto BaseVideoRenderer.Frame. Este objeto incluye un getBuffer() que devuelve el búfer de bytes que contiene los datos del fotograma de vídeo. Puede utilizar este búfer de bytes para añadir la imagen del fotograma de vídeo a la vista del editor.

Para ver un ejemplo, consulte la clase OpenTokVideoRenderer en la aplicación de ejemplo OpenTokHelloWorld.

También puede configurar un editor para que utilice un capturador de vídeo personalizado.