Alternativa de audio — Web

Utiliza la API de respaldo de audio de OpenTok para priorizar dinámicamente el audio en función de la calidad de la red.

Para obtener información conceptual, consulte el visión general del fallback de audio.

Nota: En audioFallbackEnabled de las opciones introducidas en el campo OT.initPublisher() quedará obsoleto. Utilice el método audioFallback.subscriber del objeto options.

Este tema incluye las siguientes secciones:

Activación y desactivación de la opción de «solo audio» como alternativa

Al inicializar el objeto Publisher, establezca el parámetro audioFallback propiedad de la opción que pasas a la OT.initPublisher() método:

// Enable publisher audio fallback
const publisher = OT.initPublisher('target', {
  audioFallback: {
    publisher: true,
  }
});

// Enable publisher audio fallback and disable subscriber audio fallback
const publisher = OT.initPublisher('target', {
  audioFallback: {
    publisher: true,
    subscriber: false,
  }
});

// Enable subscriber audio fallback and disable publisher audio fallback
const publisher = OT.initPublisher('target', {
  audioFallback: {
    publisher: false,
    subscriber: true,
  }
});

El audioFallback propiedad de las opciones que pasas a la OT.initPublisher() incluye dos propiedades booleanas:

  • publisher - Si se activa (true) o desactivar (false) editor de audio fallback. Por defecto es false (La opción de audio alternativo del editor está desactivada).
  • subscriber - Si se activa (true) o desactivar (false) alternativa de audio para el suscriptor. Esta configuración solo se aplica en sesiones enrutadas (sesiones que utilizan el Router multimedia de vídeo de Vonage). La opción de audio alternativo para el suscriptor no es compatible en sesiones retransmitidas. El valor por defecto es true (la opción de audio alternativo para los suscriptores está activada). Esta configuración sustituye a la audioFallbackEnabled propiedad, que quedará obsoleta.

Eventos de alternativa de audio e indicadores de la interfaz de usuario

Cuando el editor de audio fallback está habilitado, el objeto Publisher envía estos eventos en respuesta a los cambios en las condiciones de calidad:

  • videoDisableWarning - Se envía cuando el Editor determina que la calidad del flujo se ha degradado y el vídeo se desactivará si la calidad se degrada más.
  • videoDisableWarningLifted — Se envía cuando el editor determina que la calidad de la transmisión ha mejorado hasta el punto de que el vídeo que se va a desactivar ya no supone un riesgo inmediato.
  • videoDisabled — Se envía cuando el editor determina que la calidad de la transmisión se ha deteriorado y se ha desactivado el transporte de vídeo saliente. Nota: aunque el vídeo esté desactivado, el editor sigue mostrando el vídeo del editor (como la imagen de la cámara) en la interfaz de usuario del cliente de publicación.
  • videoEnabled — Enviado con el motivo: «calidad» cuando el editor determina que la calidad de la transmisión ha mejorado y se ha reactivado el transporte de vídeo saliente.

Por defecto, el Editor muestra iconos cuando el videoDisableWarning y videoDisabled ocurren los acontecimientos.

El style propiedad del options parámetro para OT.initPublisher() ahora incluye un videoDisabledDisplayMode propiedad. Puedes configurar la videoDisabledDisplayMode La asignación de esta propiedad a uno de los siguientes valores de cadena determina cómo se muestran los elementos predeterminados de la interfaz de usuario:

  • auto (por defecto) — Los iconos se muestran automáticamente cuando el vídeo está desactivado o corre el riesgo de desactivarse debido a una mala calidad de la transmisión.
  • off — Los iconos no se muestran. Puedes mostrar tus propias notificaciones en la interfaz de usuario en función de los eventos descritos anteriormente.
  • on — Los iconos aparecen automáticamente cuando el vídeo se desactiva o corre el riesgo de desactivarse debido a una mala calidad de la transmisión.

Por ejemplo, el siguiente código desactiva los elementos predeterminados de la interfaz de usuario relacionados con el vídeo y gestiona los eventos correspondientes (para que puedas proporcionar tus propias notificaciones en la interfaz de usuario):

// Enabled
const publisher = OT.initPublisher('target', {
  audioFallback: {
    publisher: true,
  },
  style: {
    videoDisabledDisplayMode: 'off',
  }
});

publisher.on({
  videoDisableWarning: () => {
    // Custom action — for example, add custom UI notification
  },
  videoDisableWarningLifted: () => {
    // Custom action — for example, remove custom UI notification
  },
  videoDisabled: () => {
    // Custom action — for example, add custom UI notification
  },
  videoEnabled: () => {
    // Custom action — for example, remove custom UI notification
  },
});

También puede ajustar el videoDisabledDisplayMode estilo de forma dinámica llamando a la función Publisher.setStyle() método:

publisher.setStyle('videoDisabledDisplayMode', 'off');

// Alternately:

publisher.setStyle({
  videoDisabledDisplayMode: 'off',
  // other styles ...
});

Desde la perspectiva del suscriptor, los siguientes eventos indican que se ha producido un cambio a audio alternativo. Aunque estos eventos están vinculados al suscriptor, pueden producirse tanto debido a un cambio a audio alternativo por parte del suscriptor como a raíz de un cambio a audio alternativo por parte del editor. En otras palabras, la diferencia entre la conmutación de audio del editor y la del suscriptor radica en que, en el caso del editor, el cliente editor puede activar la conmutación de audio en función de la degradación de su propia transmisión, razón por la cual se envían eventos adicionales por parte del editor. En el caso de la conmutación de audio del suscriptor, el Vonage Video Media Router evalúa la degradación de la red que afecta al suscriptor. En ambos casos, tras la conmutación de audio del editor o del suscriptor, siempre se envían eventos del suscriptor para indicar que se ha producido una conmutación de audio para el receptor.

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 envía cuando se ha activado el vídeo después de haberlo desactivado previamente.
  • videoDisabled — Se envía cuando se ha desactivado el vídeo. El 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 se detecta que la calidad de la transmisión se ha deteriorado; el vídeo se desactivará si la calidad sigue empeorando. Si la calidad sigue empeorando, el suscriptor desactiva el vídeo y envía un videoDisabled evento. Este evento también puede activarse al utilizar la función beta de recurso alternativo de audio del emisor, en caso de que la calidad de la transmisión del emisor se vea reducida.
  • videoDisableWarningLifted - El vídeo se ha activado después de que anteriormente estuviera desactivado.

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:

const indicatorBlinker = new IndicatorBlinker(subscriber);

const IndicatorBlinker = function(subscriber) {
  const timer;
  const indicatorOn = false;
  subscriber.on({
    videoDisabled: function(event) {
      start();
    },
    videoDisableWarning: function(event) {
      start();
    },
    videoDisableWarningLifted: function(event) {
      stop();
    },
    videoEnabled: function(event) {
      stop();
    }
  });
  const 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;
  };
  const stop = function() {
    if (timer) {
      clearInterval(timer);
    }
  };
};

También puede ajustar el videoDisabledDisplayMode estilo a 'off' y añada sus propios elementos de interfaz de usuario basados en el videoDisableWarning, videoDisabled, videoDisableWarningLiftedy videoEnabled eventos.