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 «Publisher», puedes (si lo deseas) indicar un nombre que se mostrará en el vídeo:

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

Puedes 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 optar por ocultar el nombre en la vista de editor o de suscriptor. Véase esta sección

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 el resto de participantes en 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. Véase buenas prácticas de seguridad.

Para especificar la propiedad name del flujo publicado, establezca la propiedad name del objeto OTPublisherSettings que se utiliza al inicializar un Publisher:

let publisherSettings = OTPublisherSettings()
publisherSettings.name = "Juan"
let publisher = OTPublisher(delegate: self, settings: publisherSettings)

La clase OTStream tiene un name propiedad. Cuando tú suscribirse a un flujopuedes mostrar este nombre en un elemento de la interfaz de usuario. (Además, este nombre se muestra cuando el vídeo en una página web que utiliza la biblioteca OpenTok.js).

Para especificar la propiedad name del flujo publicado, establezca la propiedad name del objeto OTPublisherSettings que se utiliza al inicializar un Publisher:

OTPublisherSettings *_publisherSettings = [[OTPublisherSettings alloc] init];
_publisherSettings.name = @"Juan";
_publisher = [[OTPublisher alloc]
                initWithDelegate:self
                settings:_publisherSettings];

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:

publisher = new Publisher(Context.Instance,
    renderer: publisherVideoRenderer,
    name: "Bob's video",
    capturer: capturer);

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.

Añadir un botón de silenciar 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 propiedad en el 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);

El style.buttonDisplayMode Esta propiedad se puede establecer en 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().

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

No existe ningún elemento predeterminado de la interfaz de usuario para silenciar el micrófono del editor. Sin embargo, puede añadir un elemento, como un botón, que establezca la opción publishAudio propiedad del objeto OTPublisher cuando el usuario hace clic en él. Establece el publishAudio propiedad a false Para silenciar al editor:

publisher.publishAudio = false

Fije el publishAudio propiedad a true para publicar audio.

publisher.publishAudio = true

publisher.publishAudio = NO;

Fije el publishAudio propiedad a YES para publicar audio.

publisher.publishAudio = YES;

No existe ningún elemento predeterminado de la interfaz de usuario para silenciar el micrófono del editor. Sin embargo, puede añadir un elemento, como un botón, que establezca la opción PublishAudio del objeto Publisher cuando el usuario haga clic en él. Establece la propiedad en false Para silenciar al editor:

publisher.PublishAudio = false;

Establece la propiedad en true para publicar audio.

publisher.PublishAudio = true;

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.

Al suscribirte a una transmisión, puedes especificar si se muestra el altavoz silenciado pasando un style.buttonDisplayMode propiedad en el Session.subscribe() método:

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

El style.buttonDisplayMode Esta propiedad se puede establecer en 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() método del objeto Subscriber. Consulta la documentación de Subscriber.setStyle().

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

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 el subscribeToAudio del objeto OTSubscriber cuando el usuario haga clic en él. Establece el subscribeToAudio propiedad a false para silenciar al abonado

subscriber.subscribeToAudio = false

Fije el subscribeToAudio propiedad a true para suscribirse al audio (si hay un flujo de audio):

subscriber.subscribeToAudio = true

subscriber.subscribeToAudio = NO;

Fije el subscribeToAudio propiedad a YES para suscribirse al audio (si hay un flujo de audio):

subscriber.subscribeToAudio = YES;

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 el SubscribeToAudio del objeto Suscriptor cuando el usuario hace clic en él. Establezca la propiedad en false para silenciar el audio:

subscriber.SubscribeToAudio = false;

Establece la propiedad en true para activar la reproducción de audio (si el flujo tiene audio):

subscriber.SubscribeToAudio = 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.

No existe ningún elemento predeterminado de la interfaz de usuario que permita cambiar la cámara utilizada por el editor. Sin embargo, puedes añadir un elemento, como un botón, que establezca la cameraPosition del objeto OTPublisher. Establezca la propiedad a un valor definido en el enum AVCaptureDevicePosition. Por ejemplo, el siguiente código establece el editor para utilizar la cámara trasera:

publisher.cameraPosition = .back

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

publisher.cameraPosition = AVCaptureDevicePositionBack;

No existe ningún elemento predeterminado en la interfaz de usuario para alternar la cámara utilizada por el editor. Sin embargo, puede añadir un elemento, como un botón, que establezca la opción VideoCapturer propiedad del objeto Publisher:

publisher.VideoCapturer = newCapturer;

Para más información, consulte Uso de un capturador de vídeo personalizado.

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

Un suscriptor que se opone emite los siguientes eventos relacionados con la activación o desactivación del vídeo en la transmisión del suscriptor:

videoEnabled — Se envía cuando se ha activado el vídeo después de haberlo 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.

El 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 configuración de estilo del objeto «Subscriber».

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.

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 Router multimedia de vídeo de Vonage (sesiones con el modo de medios configurado en «enrutado»), el SubscriberKit.VideoListener también puede llamar a los siguientes métodos:

onVideoDisableWarning(abonado) - El enrutador de medios de video de Vonage ha determinado que la calidad de la transmisión se ha degradado y el video se desactivará si la calidad se degrada aún más.
onVideoDisableWarningLifted(suscriptor) - El enrutador de medios de video de Vonage ha determinado que la calidad de la transmisión ha mejorado hasta el punto en que la desactivación del video no representa 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 una retransmisión, puedes evitar que se desactive el vídeo debido a la calidad de la misma. Antes de publicar la retransmisión (mediante la llamada a la función Session.publish(publisher) ), llame al método setAudioFallbackEnabled(boolean enabled) del objeto Publisher (o del objeto PublisherKit) e introduzca false.

Cuando se desactiva el vídeo de un abonado, el OTSubscriberKitDelegate subscriberVideoDisabled(_:reason:) Se envía el mensaje. Cuando esto ocurre, puedes añadir un elemento de la interfaz de usuario (como un icono) para indicar que el vídeo se ha desactivado:

func subscriberVideoDisabled(_ subscriber: OTSubscriberKit, reason: OTSubscriberVideoEventReason) {
    // Display the video disabled indicator
}

Cuando se vuelve a habilitar el vídeo de un suscriptor, el OTSubscriberKitDelegate subscriberVideoEnabled(_:reason:) Se envía el mensaje. 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:

func subscriberVideoEnabled(_ subscriber: OTSubscriberKit, reason: OTSubscriberVideoEventReason) {
    // Remove the video disabled indicator
}

En las sesiones que utilizan el Router multimedia de vídeo de Vonage (sesiones con el modo de medios configurado como enrutado), también se pueden enviar los siguientes mensajes:

OTSubscriberKitDelegate subscriberVideoDisableWarning(_:) - El enrutador de medios de video de Vonage ha determinado que la calidad de la transmisión se ha degradado y el video se desactivará si la calidad se degrada aún más.
OTSubscriberKitDelegate subscriberVideoDisableWarningLifted(_:)] - El enrutador de medios de video de Vonage ha determinado que la calidad de la transmisión ha mejorado hasta el punto en que la desactivación del video no representa 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 una retransmisión, puedes evitar que se desactive el vídeo debido a la calidad de la misma. Antes de publicar la retransmisión (mediante la llamada a la función OTSession publish(_:error:) ), configure el método audioFallbackEnabled del objeto Publisher (o del objeto PublisherKit) a false.

Cuando se desactiva el vídeo de un abonado, el [OTSubscriberKitDelegate subscriberVideoDisabled:reason:] Se envía el mensaje. Cuando esto ocurre, puedes añadir un elemento de la interfaz de usuario (como un icono) para indicar que el vídeo se ha desactivado:

- (void)subscriberVideoDisabled:(OTSubscriberKit*)subscriber
                            reason:(OTSubscriberVideoEventReason)reason
{
    // Display the video disabled indicator
}

Cuando se vuelve a habilitar el vídeo de un suscriptor, el [OTSubscriberKitDelegate subscriberVideoEnabled:reason:] Se envía el mensaje. 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:

- (void)subscriberVideoEnabled:(OTSubscriberKit*)subscriber
                        reason:(OTSubscriberVideoEventReason)reason
{
    // Remove the video disabled indicator
}

En las sesiones que utilizan el Router multimedia de vídeo de Vonage (sesiones con el modo de medios configurado como enrutado), también se pueden enviar los siguientes mensajes:

[OTSubscriberKitDelegate subscriberVideoDisableWarning:] - El enrutador de medios de video de Vonage ha determinado que la calidad de la transmisión se ha degradado y el video se desactivará si la calidad se degrada aún más.
[OTSubscriberKitDelegate subscriberVideoDisableWarningLifted:] - El enrutador de medios de video de Vonage ha determinado que la calidad de la transmisión ha mejorado hasta el punto en que la desactivación del video no representa 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 una retransmisión, puedes evitar que se desactive el vídeo debido a la calidad de la misma. Antes de publicar la retransmisión (mediante la llamada a la función [OTSession publish:error] ), configure el método audioFallbackEnabled del objeto Publisher (o del objeto PublisherKit) a NO.

Cuando se desactiva el vídeo de un abonado, el objeto Subscriber envía un mensaje VideoDisabled evento. Cuando esto ocurre, puedes añadir un elemento de la interfaz de usuario (como un icono) para indicar que el vídeo se ha desactivado:

subscriber.VideoDisabled += Subscriber_VideoDisabled;

private void Subscriber_VideoDisabled(object sender, EventArgs e) {
    // Display the video disabled indicator
}

Cuando se vuelve a activar el vídeo de un abonado, el objeto Subscriber envía un mensaje VideoEnabled evento. Cuando esto ocurra, puede eliminar un elemento de la interfaz de usuario (como un icono) que indique que el vídeo se ha vuelto a activar:

subscriber.VideoEnabled += Subscriber_VideoEnabled;

private void Subscriber_VideoEnabled(object sender, EventArgs e) {
    // Display the video disabled indicator
}

En las sesiones que utilizan el Router multimedia de vídeo de Vonage (sesiones con el modo de medios configurado en «enrutado»), la suscripción también puede enviar los siguientes eventos:

VideoDisableWarning - El enrutador de medios de video de Vonage ha determinado que la calidad de la transmisión se ha degradado y el video se desactivará si la calidad se degrada aún más.
VideoDisableWarningLifted - El enrutador de medios de video de Vonage ha determinado que la calidad de la transmisión ha mejorado hasta el punto en que la desactivación del video no representa un riesgo inmediato.

También es posible que desee mostrar y eliminar una notificación de la interfaz de usuario (como un icono) cuando se envíen 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
}

Cuando un archivo de una sesión comienza a grabar (o si se conecta a una sesión que se está grabando), la pantalla OTSessionDelegate session(_:archiveStartedWithId:name:) se envía el mensaje. Cuando se detiene la grabación, el OTSessionDelegate session(_:archiveStoppedWithId:) Se envía el mensaje. Puedes añadir un elemento de interfaz de usuario, como un icono que se muestre en una vista de OTPublisher, para indicar que se está grabando un vídeo:

func session(_ session: OTSession, archiveStartedWithId archiveId: String, name: String?) {
    // Display the archive indicator
}

func session(_ session: OTSession, archiveStoppedWithId archiveId: String) {
    // Hide the archive indicator
}

Cuando un archivo de una sesión comienza a grabar (o si se conecta a una sesión que se está grabando), la pantalla [OTSessionDelegate session:archiveStartedWithId:name:] se envía el mensaje. Cuando se detiene la grabación, el [OTSessionDelegate session:archiveStoppedWithId:] Se envía el mensaje. Puedes añadir un elemento de interfaz de usuario, como un icono que se muestre en una vista de OTPublisher, para indicar que se está grabando un vídeo:

- (void)     session:(OTSession*)session
archiveStartedWithId:(NSString*)archiveId
                name:(NSString*)name
{
    // Display the archive indicator
}

- (void)     session:(OTSession*)session
archiveStoppedWithId:(NSString*)archiveId
{
    // Hide the archive indicator
}

Cuando un archivo de una sesión comienza a grabar (o si se conecta a una sesión que se está grabando), el objeto Session envía un mensaje ArchiveStarted evento. Cuando se detiene la grabación, el objeto Session envía un ArchiveStopped evento. Puedes añadir un elemento de la interfaz de usuario, como un icono que se muestre en la vista del editor, para indicar que se está grabando un vídeo:

session.ArchiveStarted += Session_ArchiveStarted;
session.ArchiveStopped += Session_ArchiveStopped;

private void Session_ArchiveStarted(object sender, EventArgs e) {
    // Display the archive indicator
}

private void Session_ArchiveStopped(object sender, EventArgs e) {
    // Hide the archive indicator
}

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

Distribución de los objetos «Publisher» y «Subscriber» audioLevelUpdated eventos que se producen periódicamente para informar del nivel de audio. Puedes utilizar estos eventos para mostrar un indicador de nivel de audio. También puedes utilizarlos para detectar los 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', lo que desactiva el medidor de nivel de audio predeterminado que se muestra en el Subscriber. Ten en cuenta que el nivel de audio se ajusta de forma logarítmica 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.

El SubscriberKit.AudioLevelListener.onAudioLevelUpdated(subscriber, audioLevel) y PublisherKit.AudioLevelListener.onAudioLevelUpdated(publisher, 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.
}

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.

El OTPublisherKitAudioLevelDelegate publisher(_:audioLevelUpdated:) y OTSubscriberKitAudioLevelDelegate subscriber(_:audioLevelUpdated:) 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.

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

let settings = OTPublisherSettings()
settings.allowAudioCaptureWhileMuted = true;
publisher =  OTPublisher(delegate: self, settings: settings)!

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

El [OTPublisherKitAudioLevelDelegate publisher:audioLevelUpdated:] y [OTSubscriberKitAudioLevelDelegate subscriber:audioLevelUpdated:] 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.

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

OTPublisherKitSettings* settings = [[OTPublisherKitSettings alloc] init];
settings.allowAudioCaptureWhileMuted = true;
_publisher = [[OTPublisherKit alloc] initWithDelegate:self settings:settings];

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

El Subscriber.AudioLevel y Publisher.AudioLevel Los eventos se envían a intervalos regulares con el nivel de audio del suscriptor y del emisor. Puedes utilizar el AudioLevel de los argumentos del evento para actualizar la visualización en un medidor de nivel de audio:

@Override
publisher.AudioLevel += Publisher_AudioLevel;
subscriber.AudioLevel += Subscriber_AudioLevel;

private void Publisher_AudioLevel(object sender, EventArgs e) {
    // Display the audio level based on e.AudioLevel
}

private void Subscriber_AudioLevel(object sender, EventArgs e) {
    // Display the audio level based on e.AudioLevel
}

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

publisher = new Publisher.Builder(_context)
{
    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 Android incluye una clase llamada `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.

Las clases OTPublisher y OTSubscriber proporcionan una instancia predeterminada de UIView que muestra el vídeo del emisor o del suscriptor. Puedes utilizar la Video API para definir un renderizador de vídeo personalizado, utilizando las clases OTPublisherKit, OTSubscriberKit y OTVideoRender.

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

Por defecto, los editores utilizan un renderizador de vídeo predeterminado para Windows Presentation Foundation, que está definido por el SDK de Vonage Video Windows.

También puede especificar un renderizador para el vídeo creando una clase que implemente la interfaz IVideoRenderer. La interfaz incluye un RenderFrame(frame) que es llamado cuando un nuevo fotograma de vídeo está disponible. En tu implementación de este método, usa el objeto frame pasado al método para crear una imagen a renderizar. Además, al final de la implementación de este método, asegúrate de llamar al método Dispose() método del frame objeto, para evitar fugas de memoria.

Al instanciar un objeto Editor o Suscriptor, puede pasar el objeto renderizador de vídeo personalizado a la función Publisher() o Subscriber() constructor (como el renderer parámetro).