Observabilidad del cliente: Web

El SDK de video de Vonage expone métricas detalladas de la calidad de la transmisión a través de una API de estadísticas de alto nivel, recomendada para la mayoría de los casos de uso, que proporciona estadísticas de audio, video, red y del lado del emisor en una forma unificada y consciente de la sesión que permanece estable a través de las transiciones de conexión entre pares. Para la depuración avanzada, el SDK también ofrece acceso al informe de estadísticas WebRTC sin procesar, que refleja los datos de la conexión entre pares sin procesar.

API de estadísticas de audio y Video

El Vonage Video Web SDK envía estadísticas periódicas de la red de audio y video para editores y suscriptores. Estas incluyen recuentos de paquetes, tasas de bits, datos de velocidad de fotogramas, métricas de pausa/congelación, información de códec y estimación de red del lado del remitente opcional.

Obtener estadísticas para una editorial

En Publisher.getStats() le proporciona una matriz de objetos que definen las estadísticas de audio y vídeo actuales del editor. Para un editor en una sesión enrutada (que utiliza el método OpenTok Router multimedia), esta matriz incluye un objeto que define las estadísticas para el flujo único de audio y video que se envía al enrutador de medios de video de Vonage. En una sesión retransmitida la matriz incluye un objeto para cada suscriptor del flujo publicado.

El siguiente código registra algunas métricas del flujo del editor cada segundo:

window.setInterval(() => {
  publisher.getStats((error, statsArray) => {
    if (error) {
      console.error(error);
      return;
    }

    statsArray.forEach(statsContainer => {
      const stats = statsContainer.stats;
      const connectionId = stats.connectionId || 'routed';

      console.log(`\nStats for ${connectionId}`);
      if (stats.video) {
        const video = stats.video;

        if (video.layers && video.layers.length > 0) {
          console.log(`Video layers: ${video.layers.length}`);

          video.layers.forEach((layer, index) => {
            console.log(` Layer ${index}: ${layer.width}x${layer.height}`);
            console.log(`   encodedFrameRate: ${layer.encodedFrameRate} fps`);
            console.log(`   bitrate: ${layer.bitrate} bps`);
            console.log(`   totalBitrate: ${layer.totalBitrate} bps`);
            console.log(`   codec: ${layer.codec}`);
            console.log(`   scalabilityMode: ${layer.scalabilityMode}`);
            if (layer.qualityLimitationReason) {
              console.log(`   qualityLimitationReason: ${layer.qualityLimitationReason}`);
            }
          });
        }

        if (stats.transportStats) {
          console.log(
            'transport estimated bandwidth:',
            stats.transportStats.connectionEstimatedBandwidth,
            'bps'
          );
        }
      }
    });
  });
}, 1000);

Recepción de eventos de calidad de vídeo en los editores

Además de sondear las estadísticas con Publisher.getStats()puede recibir notificaciones en tiempo real cuando el editor detecte un cambio significativo en la calidad del vídeo suscribiéndose a la función videoQualityChanged evento:

publisher.on('videoQualityChanged', ({ reason, statsContainer }) => {
  console.log('Video quality change reason:', reason);

  const { stats } = statsContainer;

  if (stats.video && stats.video.layers) {
    stats.video.layers.forEach((layer) => {
      console.log(
        `Resolution: ${layer.width}x${layer.height}, FPS: ${layer.frameRate}`
      );
    });
  }
});

Obtener estadísticas de un abonado

En getStats() de un objeto suscriptor le proporciona información sobre el flujo del suscriptor. del suscriptor.

El siguiente código registra varias métricas del flujo de abonados cada segundo:

window.setInterval(() => {
  subscriber.getStats((error, stats) => {
    if (error) {
      console.error('Error getting subscriber stats: ', error.message);
      return;
    }

    const video = stats.video;

    if (video) {
      console.log('video bitrate:', video.bitrate, 'bps');
      console.log('video totalBitrate:', video.totalBitrate, 'bps');
      console.log('decoded frame rate:', video.decodedFrameRate, 'fps');
      console.log('codec:', video.codec);
      console.log('res:', `${video.width}x${video.height}`);

      console.log('freezeCount:', video.freezeCount);
      console.log('totalFreezesDuration:', video.totalFreezesDuration, 'ms');
      console.log('pauseCount:', video.pauseCount);
      console.log('totalPausesDuration:', video.totalPausesDuration, 'ms');
    }
  });
}, 1000);

Recepción de eventos de calidad de vídeo en los abonados

Los abonados pueden escuchar el videoQualityChanged para recibir una notificación cuando se detecten interrupciones o cambios significativos en la calidad de vídeo.

subscriber.on('videoQualityChanged', ({ reason, stats }) => {
  if (reason === 'videoInterruption') {
    console.warn('Video playback was interrupted');

    if (stats.video.freezeCount > 0) {
      console.log(`Freeze count: ${stats.video.freezeCount}`);
    }

    if (stats.video.pauseCount > 0) {
      console.log(`Pause count: ${stats.video.pauseCount}`);
    }
  }
});

Problemas conocidos

Los valores y condiciones reales que activan las limitaciones de calidad son específicos de cada implementación y pueden variar entre navegadores y plataformas. Por ejemplo:

  • Los flujos de vídeo de pantalla compartida nunca activan el videoQualityChanged evento.
  • Firefox no admite qualityLimitationReasonpor lo que esta propiedad no está presente en las estadísticas del editor. También, videoQualityChanged eventos con motivos bandwidth, cpu y other no son compatibles con este navegador.
  • La codificación de vídeo acelerada por hardware y los codificadores de vídeo dedicados evitan que macOS active cpu limitaciones.

Estructuras de datos estadísticos

En esta sección se describen las estructuras y propiedades proporcionadas por la API de estadísticas de audio y vídeo web. Aunque todas las plataformas Video SDK exponen el mismo conjunto de estadísticas, puede haber pequeñas diferencias en la forma en que cada plataforma estructura o nombra los campos individuales. Estas variaciones reflejan convenciones de diseño del SDK específicas de cada plataforma más que diferencias en las métricas subyacentes.

Estadísticas de editores (stats)

Proporciona estadísticas sobre un editor.

  • connectionId - El identificador único de la conexión del cliente, que coincide con la propiedad id del archivo connection propiedad del connectionCreated que el objeto Session envió para el cliente remoto (sólo disponible en sesiones retransmitidas).
  • subscriberId - El identificador único del abonado, que coincide con la propiedad id del archivo Subscriber en la aplicación del cliente suscriptor (sólo disponible en sesiones retransmitidas).

Estadísticas de audio del editor (stats.audio)

Proporciona estadísticas sobre la pista de audio de un editor.

  • bytesSent - Total de bytes de audio enviados.
  • packetsLost - Total de paquetes de audio que no llegaron al abonado o al Media Router.
  • packetsSent - Total de paquetes de audio enviados.
  • timestamp - Marca de tiempo Unix (ms) en la que se recopilaron las estadísticas.

Estadísticas de vídeo del editor (stats.video)

Estos campos representan el rendimiento de vídeo actual del editor:

  • bytesSent - Total de bytes de vídeo enviados.
  • packetsLost - Total de paquetes de vídeo que no llegaron al abonado o al Media Router.
  • packetsSent - Total de paquetes de vídeo enviados.
  • layers - Una lista ordenada de las capas de codificación de vídeo activas de mayor a menor resolución.

Estadísticas de la capa de vídeo del editor (stats.video.layers)

Representa una capa de emisión simultánea o capa SVC.

  • width - Anchura codificada en píxeles.
  • height - Altura codificada en píxeles.
  • encodedFrameRate- Frecuencia de imagen real de codificación para esta capa.
  • bitrate - Tasa de bits de carga útil (bps).
  • totalBitrate - Bitrate incluyendo cabeceras RTP y relleno (bps).
  • scalabilityMode- Configuración de escalabilidad (por ejemplo, "L1T3" para SVC o "L3T3" para simulcast).
  • codec - Codec utilizado para esta capa.
  • qualityLimitationReason - Indica por qué el codificador ajustó la calidad ('ancho de banda', 'cpu', 'otros').

Estadísticas de transporte de editores (stats.transport)

El objeto transportStats proporciona métricas de estimación de red a nivel de conexión entre pares que se aplican al transporte global de audio-vídeo, en lugar de a pistas o capas individuales.

  • connectionEstimatedBandwidth - Ancho de banda de enlace ascendente disponible estimado para la conexión (bps).

Estadísticas de audio de los abonados (stats.audio)

Proporciona estadísticas sobre la pista de audio de un abonado.

  • bytesReceived - Total de bytes de audio recibidos.
  • packetsLost - Total de paquetes de audio que no han llegado al abonado.
  • packetsReceived - Total de paquetes de audio recibidos correctamente.
  • timestamp - Marca de tiempo Unix (ms) en la que se recopilaron estas estadísticas.

Estadísticas de vídeo de abonados (stats.video)

Estos campos describen el rendimiento de recepción y descodificación de vídeo en tiempo real del abonado:

  • bytesReceived - Total de bytes de vídeo recibidos.
  • packetsLost - Total de paquetes de vídeo que no llegaron al abonado.
  • packetsReceived - Total de paquetes de vídeo recibidos.
  • timestamp - Marca de tiempo Unix (ms) en la que se recopilaron las estadísticas.
  • decodedFrameRate - Frecuencia de imagen real producida por el descodificador (fps).
  • bitrate - Tasa de bits de la carga útil en bits por segundo.
  • totalBitrate - Bitrate incluyendo cabeceras RTP y relleno (bps).
  • codec - Codec utilizado para este abonado.
  • pauseCount - Numbers of pauses where no frame was rendered for ≥5 seconds.
  • totalPausesDuration - Duración acumulada (ms) de todas las pausas.
  • freezeCount - Numbers of short freezes (from the WebRTC stats definition).
  • totalFreezesDuration - Duración acumulada (ms) de todas las congelaciones.

Estimación del lado del emisor del abonado (stats.senderStats)

Estas métricas proporcionan estimaciones de ancho de banda notificadas para la conexión saliente del remitente:

  • connectionMaxAllocatedBitrate - Tasa de bits máxima asignada estimada para el remitente (bps).
  • connectionEstimatedBandwidth - Ancho de banda de enlace ascendente actual estimado para el remitente (bps).

Supervisión de la calidad de las llamadas

Además de las API de estadísticas básicas, OpenTok.js ofrece funciones adicionales para supervisar y responder a los cambios en la calidad de las llamadas. Estas funciones ayudan a las aplicaciones a optimizar el rendimiento adaptándose a las limitaciones del dispositivo y a las condiciones de la red.

Supervisión del rendimiento de la CPU

Applications may run on various mobile and desktop devices on different platforms. Además, las especificaciones de hardware de los dispositivos no son homogéneas. Por ejemplo, algunos dispositivos móviles pueden tener mejor rendimiento de CPU que muchos dispositivos de sobremesa y viceversa.

El gran número de configuraciones de hardware posibles (CPU, GPU, RAM, codificadores/decodificadores de hardware, etc.) implica que puede ser necesario realizar algunos ajustes. Los dispositivos menos capaces pueden configurarse para desactivar las funciones más intensivas de la CPU, mientras que los más capaces pueden ofrecer por defecto una experiencia más envolvente.

Detección de cambios en el rendimiento de la CPU

Puede detectar cambios en la carga de la CPU del dispositivo monitorizando la Sesión cpuPerformanceChanged evento. El evento contiene un cpuPerformanceState que se establece en uno de los siguientes valores:

  • 'nominal' - El dispositivo puede asumir trabajo adicional.
  • 'fair' - El dispositivo puede seguir realizando trabajo adicional, pero la duración de la batería puede verse reducida; además, en el caso de los dispositivos con ventiladores, éstos pueden activarse y hacerse audibles.
  • 'serious' - El dispositivo está estresado, por lo que puede producirse un estrangulamiento de los recursos (por ejemplo, la CPU).
  • 'critical' - El dispositivo está muy estresado; si no se alivia, pueden surgir problemas.

Para más información, consulte esta especificación del W3C.

Optimización de una Aplicación Basada en Cambios en el Rendimiento de la CPU

En respuesta a este evento, una aplicación puede notificar a los usuarios sobre el consumo de recursos consumo de recursos o desactivar procesos costosos desde el punto de vista computacional, como transformadores de vídeo. Ver la Sesión cpuPerformanceChanged.

El siguiente código desactiva la captura de vídeo cuando la CPU entra en un 'critical' estado de rendimiento y vuelve a activarlo cuando el estado vuelve a ser 'fair' o mejor:

let isVideoDisabledByCPU = false;

session.on('cpuPerformanceChanged', (event) => {
  if (event.cpuPerformanceState === 'critical') {
    // The application should alert the user why their video is being disabled
    publisher.publishVideo(false);
    isVideoDisabledByCPU = true;
  } else if (event.cpuPerformanceState === 'nominal' || event.cpuPerformanceState === 'fair') {
    if (isVideoDisabledByCPU) {
      publisher.publishVideo(true);
      isVideoDisabledByCPU = false;
    }
  }
})

Puntuación media de opinión (MOS)

La calidad de la experiencia que un usuario percibe de un servicio puede calificarse utilizando Puntuación media de la opinión (MOS).

El sistema de clasificación

La MOS se expresa como un número positivo. La puntuación puede oscilar entre 1 (la peor calidad) y 5 (la mejor calidad):

  • 5 (Excelente) - Un hipotético límite superior a la mejor calidad que puede experimentar un usuario.
  • 4 (Bueno) - Una calificación más asequible. Los usuarios de Vonage pueden esperar recibir este nivel de calidad.
  • 3 (Regular) - La calidad es aceptable.
  • 2 (Pobre) - La calidad es inaceptable.
  • 1 (Malo) - La calidad es horrible.

El algoritmo

La clasificación MOS tiene en cuenta varios factores, todos los cuales afectan (y pueden degradar) la experiencia del usuario. Estos factores incluyen (pero no se limitan a) los siguientes:

  • Pérdida de paquetes: los paquetes perdidos degradan la calidad de los medios.
  • Tasa de bits: cuanto mayor sea la tasa de bits, mayor será la fidelidad potencial del soporte.
  • Latencia de la red: los paquetes que llegan demasiado tarde pueden perderse, lo que puede provocar que se pierda audio o que el vídeo salte.

Optimización de una Aplicación Basada en Cambios en la Calidad de la Llamada

Utilizar el abonado qualityScoreChanged para controlar los cambios en la calidad de audio y vídeo. Sin embargo, observar los cambios en la calidad de los medios no es suficiente. Dada la naturaleza en tiempo real de las aplicaciones de llamadas, también es necesario responder a los cambios observados ajustando la aplicación para ofrecer continuamente la mejor experiencia de usuario.

A continuación se muestra una heurística sencilla. Una aplicación se optimiza dinámicamente en función de las restricciones de recursos.

// We want to know if the CPU is overloaded. If it is, then we
// can disable certain features so that the best call possible
// can still take place.
let isCpuOverloaded = false;

session.on('cpuPerformanceChanged', (event) => {
  isCpuOverloaded = event.cpuPerformanceState === 'critical';
});

// We monitor for changes in call quality. This allows us to
// tune our application, taking into account multiple factors
// (inlined below)
subscriber.on('qualityScoreChanged', (event) => {
  const { qualityScore } = event;
  const isVideoQualityBad = qualityScore.video < 2;

  if (!isVideoQualityBad && !isCpuOverloaded) {
    // Subscribe to the highest quality video since the CPU isn't taxed
    // and the quality received is good
    subscriber.setPreferredResolution('1280x720');
    subscriber.setPreferredFrameRate(30);
  }
  else if (isVideoQualityBad && !isCpuOverloaded) {
    // Even though the CPU isn't taxed, the video quality received is
    // bad. This might be due to (hopefully) intermittent network issues, so
    // we subscribe to lower quality video.
    subscriber.setPreferredResolution('320x180');
    subscriber.setPreferredFrameRate(7);
  }
  else if (isVideoQualityBad && isCpuOverloaded) {
    // The video quality received is bad and the CPU not being overloaded.
    // Let's disable video for now.
    // We can enable video once conditions improve. See statement below.
    subscriber.subscribeToVideo(false);
  }
  else {
    // Enable video
    subscriber.subscribeToVideo(true);
  }
});

Estimación de la calidad de la llamada en una prueba previa a la llamada

Puedes usar Vonage Video Biblioteca de pruebas de red para Web para ver si el cliente admite la publicación de audio y vídeo e informa de las puntuaciones MOS de audio y vídeo estimadas para la transmisión publicada de un cliente. Esta biblioteca utiliza el módulo Publisher.getRtcStatsReport() y Subscriber.subscriber.getStats() métodos para calcular la puntuación MOS.

Estadísticas del remitente

Véase el estadísticas del lado del remitente.

Activación de las estadísticas del lado del remitente

Las estadísticas del lado del emisor se reciben en los abonados. Para recibir las estadísticas del lado del emisor, habilítelas para el editor del flujo pasando el parámetro publishSenderStats con el valor true en el OT.initPublisher llamar:

const publisher = OT.initPublisher({
  publishSenderStats: true
});

Si publishSenderStats no está activado, no se publicará ningún canal de estadísticas del remitente para este editor. El valor por defecto es false.

Suscripción a las estadísticas del lado del remitente

Los suscriptores reciben automáticamente las estadísticas del remitente sólo si el editor las ha activado y si el usuario llama a Subscriber.getStats() al menos una vez. Tenga en cuenta que, debido a la latencia de la red, la primera llamada a getStats puede no incluir las estadísticas del remitente. Es más probable que las llamadas posteriores devuelvan estos datos.

No se requieren eventos o métodos adicionales; las estadísticas del remitente se incluyen en las ya existentes stats devuelto por getStats().

Recepción de eventos estadísticos

Las estadísticas del lado del remitente se incluyen de forma opcional senderStats dentro del objeto stats pasado al objeto Subscriber.getStats() devolución de llamada. La dirección senderStats contiene dos propiedades:

  • connectionMaxAllocatedBitrate - El bitrate máximo que se puede estimar para la conexión (en bits por segundo)

  • connectionEstimatedBandwidth - El ancho de banda actual estimado para la conexión (en bits por segundo)

Estas dos métricas se calculan por paquete de audio y vídeo, por lo que los mismos valores aparecen en las estadísticas de vídeo y audio. Como reflejan el transporte y no las pistas individuales, las métricas se comparten tanto en audio como en vídeo.

subscriber.getStats((stats) => {
  if (stats.senderStats) {
    console.log(`Connection max allocated bitrate: ${stats.senderStats.connectionMaxAllocatedBitrate} bps`);
    console.log(`Connection current estimated bandwidth: ${stats.senderStats.connectionEstimatedBandwidth} bps`);
  } else {
    console.log("Sender stats not available yet.");
  }
});

Problemas conocidos

En algunos casos, cuando la sesión se retransmite -o en determinadas configuraciones enrutadas con sólo dos participantes- y el Editor utiliza Firefox, es posible que las estadísticas del lado del remitente no estén disponibles debido a las limitaciones del navegador.

Informe de estadísticas de RTC

Para obtener estadísticas de conexión entre pares de bajo nivel para un editor, utilice la función Publisher.getRtcStatsReport() método. Devuelve una promesa que, en caso de éxito, se resuelve con un RtcStatsReport para el flujo suscrito:

publisher.getRtcStatsReport()
  .then((stats) => stats.forEach(console.log))
  .catch(console.log);

Para obtener estadísticas de conexión entre pares de bajo nivel para un abonado, utilice la función Subscriber.getRtcStatsReport() método. Devuelve una promesa que, en caso de éxito, se resuelve con un RtcStatsReport para el flujo suscrito:

subscriber.getRtcStatsReport()
  .then((stats) => stats.forEach(console.log))
  .catch(console.log);