Personalización general

Existen varios ajustes que puedes realizar para personalizar la interfaz de usuario de Vonage Video:

Añadir un nombre a un flujo publicado

Al crear un Editor, puede (opcionalmente) especificar un nombre para que aparezca en el vídeo:

// Replace the first parameter with the target element ID:
var publisher = OT.initPublisher("myPublisher",
                                 {name: "John"})
session.publish(publisher);

Puede utilizar este nombre para identificar al cliente.

Tenga en cuenta que también puede añadir metadatos sobre el cliente al crear un token. Este nombre no se muestra automáticamente en el vídeo. Sin embargo, al añadir los datos al crear un token, puede añadir información de forma más segura (ya que los tokens se crean en el servidor, no en el cliente. Para más información, consulte Creación de fichas.

Los clientes pueden elegir ocultar el nombre en una vista de Editor o Suscriptor. Véase esta sección

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

Por defecto, la interfaz de usuario para un Editor o un Suscriptor incluye un botón para silenciar el audio. En el caso de un editor, el usuario puede hacer clic para activar o desactivar el micrófono.

Cuando publique un flujo, puede especificar si se muestra el botón de silencio pasando un parámetro style.buttonDisplayMode en la propiedad OT.initPublisher() método:

const publisher = OT.initPublisher(
  'publisher-element-id', // Replace with the replacement element ID
  {
     name: 'John',
     style: {buttonDisplayMode: 'on'}
  }
);
session.publish(publisher);

En style.buttonDisplayMode puede tener uno de estos tres valores:

  • "auto" - El botón de silencio se muestra cuando el flujo se visualiza por primera vez y cuando el usuario pasa el ratón por encima del vídeo (por defecto).
  • "off" - El botón de silencio no aparece.
  • "on" - Se muestra el botón de silencio.

Una vez creado el editor, puede cambiar el modo de visualización del botón de silencio llamando a la función setStyle() del objeto Editor. Consulte la documentación de Publisher.setStyle().

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

Por defecto, la interfaz de usuario para un Editor o un Suscriptor incluye un botón para silenciar el audio. En el caso de un suscriptor, el usuario puede hacer clic para activar o desactivar el altavoz.

Cuando se suscribe a un flujo, puede especificar si se muestra el altavoz de silencio pasando un style.buttonDisplayMode en la propiedad Session.subscribe() método:

const subscriber = session.subscribe(stream,
  'subscriber-element-id', // Replace with the replacement element ID
  {
     style: {buttonDisplayMode: 'on'}
  }
);

En style.buttonDisplayMode puede tener uno de estos tres valores:

  • "auto" - El botón de silencio se muestra cuando el flujo se visualiza por primera vez y cuando el usuario pasa el ratón por encima del vídeo (por defecto).
  • "off" - El botón de silencio no aparece.
  • "on" - Se muestra el botón de silencio.

Una vez creado el abonado, puede cambiar el modo de visualización del botón de silencio, llamando al botón setStyle() del objeto Subscriber. Consulte la documentación de Subscriber.setStyle().

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 del objeto Editor:

mPublisher.swapCamera();

Tenga en cuenta que el cameraPosition no está disponible en la clase PublisherKit. Si utiliza 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

Un objeto Suscriptor envía los siguientes eventos relacionados con la activación o desactivación del vídeo para el flujo del suscriptor:

  • videoEnabled - Se emite cuando el vídeo se ha activado después de haber sido desactivado previamente.
  • videoDisabled - Se produce cuando el vídeo ha sido desactivado. La propiedad reason del objeto de evento indica por qué se ha desactivado el vídeo. (Este objeto de evento es un Evento VideoEnabledChangedEvent objeto).
  • videoDisableWarning - Se envía cuando el Media Router determina que la calidad del flujo se ha degradado y el vídeo se desactivará si la calidad se degrada más. Si la calidad se degrada aún más, el abonado desactiva el vídeo y envía un videoDisabled evento.
  • videoDisableWarningLifted - El vídeo se ha activado después de que anteriormente estuviera desactivado.

En videoDisableWarning y videoDisableWarningLifted sólo están disponibles en las sesiones que utilizan la función Router multimedia (sesiones con el modo de medios enrutado).

Por defecto, el Suscriptor muestra un indicador de advertencia de vídeo desactivado y un indicador de vídeo desactivado cuando el videoDisableWarning y videoDisableWarningLifted se envían los eventos. Puede desactivar la visualización por defecto del indicador configurando la opción videoDisabledDisplayMode del objeto Suscriptor.

En el siguiente ejemplo se utiliza la función videoDisabledDisplayMode para que el indicador de advertencia de vídeo desactivado y un indicador de vídeo desactivado parpadeen cada un segundo cuando el videoDisableWarning y videoDisableWarningLifted se envían los eventos:

var indicatorBlinker = new IndicatorBlinker(subscriber);

var IndicatorBlinker = function(subscriber) {
  var timer;
  var indicatorOn = false;
  subscriber.on({
    videoDisabled: function(event) {
      start();
    },
    videoDisableWarning: function(event) {
      start();
    },
    videoDisableWarningLifted: function(event) {
      stop();
    },
    videoEnabled: function(event) {
      stop();
    }
  });
  var start = function() {
    subscriber.setStyle('videoDisabledDisplayMode', 'on');
    if (timer) {
      clearInterval(timer);
    }
    timer = setInterval(function() {
      if (indicatorOn) {
        subscriber.setStyle('videoDisabledDisplayMode', 'off');
      } else {
        subscriber.setStyle('videoDisabledDisplayMode', 'on');
      }
      indicatorOn = !indicatorOn;
    }, 1000);
    indicatorOn = true;
  };
  var stop = function() {
    if (timer) {
      clearInterval(timer);
    }
  };
};

También puede ajustar el videoDisabledDisplayMode a "desactivado" y añada sus propios elementos de interfaz de usuario basados en el estilo videoDisableWarning, videoDisabled, videoDisableWarningLiftedy videoEnabled 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) . Cuando se detiene la grabación, el método Session.ArchiveListener.onArchiveStopped(session, name) es llamado. Puede añadir un elemento de interfaz de usuario, como un icono mostrado 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

Envío de objetos Publisher y Subscriber audioLevelUpdated periódicamente para informar del nivel de audio. Puede utilizar estos eventos para mostrar un indicador de nivel de audio. También puedes utilizar estos eventos para detectar altavoces activos en una sesión.

El siguiente ejemplo ajusta el valor de un elemento de contador que muestra el volumen de un abonado. El código ajusta el audioLevelDisplayMode estilo a 'off'que desactiva el medidor de nivel de audio que se muestra por defecto en el Suscriptor. Tenga en cuenta que el nivel de audio se ajusta logarítmicamente y se aplica una media móvil:

subscriber.setStyle('audioLevelDisplayMode', 'off');
var movingAvg = null;
subscriber.on('audioLevelUpdated', function(event) {
  if (movingAvg === null || movingAvg <= event.audioLevel) {
    movingAvg = event.audioLevel;
  } else {
    movingAvg = 0.7 * movingAvg + 0.3 * event.audioLevel;
  }

  // 1.5 scaling to map the -30 - 0 dBm range to [0,1]
  var logLevel = (Math.log(movingAvg) / Math.LN10) / 1.5 + 1;
  logLevel = Math.min(Math.max(logLevel, 0), 1);
  document.getElementById('subscriberMeter').value = logLevel;
});

El ejemplo supone que existe un elemento HTML medidor con el ID "subscriberMeter".

Tenga en cuenta que en el modo sólo audio, un elemento DOM Editor o Suscriptor muestra un indicador de volumen por defecto (en la esquina superior derecha del elemento). Puede desactivar este elemento predeterminado de la interfaz de usuario y mostrar su propio medidor de volumen. Consulte el siguiente tema, Ajuste de la interfaz de usuario cuando el vídeo está activado o desactivado.

También puede utilizar la función audioLevelUpdated para determinar cuándo el audio de un editor o suscriptor es lo suficientemente alto durante el tiempo suficiente para etiquetar al participante como que ha empezado a hablar. O, si el audio ha estado en silencio durante el tiempo suficiente, puede identificar al participante como que ha dejado de hablar:

var subscriber = session.subscribe(event.stream);

SpeakerDetection(subscriber, function() {
  console.log('started talking');
}, function() {
  console.log('stopped talking');
});

var SpeakerDetection = function(subscriber, startTalking, stopTalking) {
  var activity = null;
  subscriber.on('audioLevelUpdated', function(event) {
    var now = Date.now();
    if (event.audioLevel > 0.2) {
      if (!activity) {
        activity = {timestamp: now, talking: false};
      } else if (activity.talking) {
        activity.timestamp = now;
      } else if (now- activity.timestamp > 1000) {
        // detected audio activity for more than 1s
        // for the first time.
        activity.talking = true;
        if (typeof(startTalking) === 'function') {
          startTalking();
        }
      }
    } else if (activity && now - activity.timestamp > 3000) {
      // detected low audio activity for more than 3s
      if (activity.talking) {
        if (typeof(stopTalking) === 'function') {
          stopTalking();
        }
      }
      activity = null;
    }
  });
};

(En lugar de registrar en la consola, tu aplicación podría ajustar un elemento de la interfaz de usuario cuando el usuario empiece y deje de hablar.

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 Android incluye una clase 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() 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.

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

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

En 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.