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.

El SDK también expone métricas del estado de la red que proporcionan una evaluación de alto nivel del estado de la conexión tanto para editores como para abonados. Estas métricas incluyen una puntuación del estado de la red, el motivo de dicha puntuación y, para los abonados, una fuente de degradación que indica qué lado de la conexión es responsable de cualquier problema observado. Véase Estado de la red y fuente de degradación para más detalles.

API de estadísticas de audio, vídeo y enlaces multimedia

El Vonage Video Web SDK envía estadísticas periódicas de audio, video y enlaces multimedia tanto para editores como para suscriptores. Estas incluyen recuentos de paquetes, velocidades de bits, datos de velocidad de fotogramas, métricas de pausa/congelación, información de códec y métricas de red a nivel de transporte, como estimación de ancho de banda y puntuación del estado de la red.

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

        console.log('transport estimated bandwidth:', stats.mediaLink.transport.connectionEstimatedBandwidth, 'bps');
        console.log('network condition:', stats.mediaLink.transport.networkCondition);
        console.log('network condition reason:', stats.mediaLink.transport.networkConditionReason);
      }
    });
  });
}, 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}`
      );
    });
  }
});

Recepción de eventos de estado de la red en los editores

Para recibir eventos de cambio de estado de la red para el editor, escuche el comando networkConditionChanged evento:

publisher.on('networkConditionChanged', ({ reason, statsContainer }) => {
  const { stats } = statsContainer;
  console.log('Network condition changed.');
  console.log(`Network Condition: ${stats.mediaLink.transport.networkCondition}, Reason: ${stats.mediaLink.transport.networkConditionReason}`);
});

Este evento se activa cuando se detecta un cambio significativo en las condiciones de la red para el editor. La dirección statsContainer incluye las estadísticas del enlace multimedia del abonado afectado. En las sesiones retransmitidas, sólo se incluyen en el evento las estadísticas del abonado afectado.

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

Recepción de eventos de estado de la red en los abonados

Para recibir eventos de cambio de estado de la red para el abonado, escuche el comando networkConditionChanged evento:

subscriber.on('networkConditionChanged', ({ reason, stats }) => {
  console.log('Network condition changed.');
  console.log(`Degradation source: ${stats.mediaLink.networkDegradationSource}`);
  if (stats.mediaLink.networkDegradationSource === 'local') {
    console.log(`Network Condition: ${stats.mediaLink.transport.networkCondition}, Reason: ${stats.mediaLink.transport.networkConditionReason}`);
  } else if (stats.mediaLink.networkDegradationSource === 'remote') {
    console.log(`Network Condition: ${stats.mediaLink.remotePublisherTransport.networkCondition}, Reason: ${stats.mediaLink.remotePublisherTransport.networkConditionReason}`);
  }
});

Este evento se activa cuando se detecta un cambio significativo en las condiciones de la red para el abonado o el editor remoto. La dirección stats incluye las estadísticas del enlace multimedia con métricas de transporte local y remoto y la fuente de degradación.

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.

Para una explicación independiente de la plataforma de las estadísticas disponibles y lo que representan, consulte visión general de la observabilidad del cliente.

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 enlaces multimedia de editores (stats.mediaLink.transport)

En transport 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).
  • networkCondition - Puntuación del estado actual de la red ("unknown", "critical", "warning", "fair", "good"o "excellent").
  • networkConditionReason - Razón principal que afecta al estado de la red ("none", "unknown", "bandwidth"o "packetLoss").

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

En mediaLink proporciona información sobre el nivel de transporte y la degradación de la red para la conexión de un abonado. Tiene la misma estructura que el objeto mediaLink.transport para los transportes local y remoto, además de un indicador de fuente de degradación:

  • transport - Estadísticas de transporte local para la conexión de enlace descendente de este abonado (misma estructura que la del editor stats.mediaLink.transport). Puede estar limitado si las estadísticas del lado del emisor y/o el audio fallback están desactivados.
  • remotePublisherTransport - Estadísticas de transporte del editor remoto para la conexión de enlace ascendente (la misma estructura que la del editor stats.mediaLink.transport). Puede estar limitado si las estadísticas del lado del emisor y/o el audio fallback están desactivados.
  • networkDegradationSource - Indica qué lado causó la degradación de la red, si la hubo. Valores posibles: "none", "local", "remote"o "bothOrUnclear". Puede estar limitado si las estadísticas del lado del emisor y/o el audio fallback están desactivados.

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.

Recepción de estadísticas del lado del remitente

Si el editor ha activado las estadísticas del lado del remitente, los abonados las reciben automáticamente a través de Subscriber.getStats() descrito anteriormente. En senderStats del objeto stats devuelto proporciona dos métricas:

  • connectionMaxAllocatedBitrate - El bitrate máximo que se puede estimar para la conexión (bps)
  • connectionEstimatedBandwidth - El ancho de banda actual estimado para la conexión (bps)

Estas métricas se calculan por paquete de audio y vídeo, por lo que aparecen los mismos valores en las estadísticas de vídeo y audio. Tenga en cuenta que la primera llamada a getStats puede no incluir las estadísticas del remitente debido a la latencia de la red.

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

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.

Estado y degradación de la red Fuente

El SDK proporciona métricas del estado de la red en tiempo real tanto para editores como para suscriptores, incluyendo una puntuación del estado, la razón que impulsa esa puntuación y una fuente de degradación para los suscriptores. Para obtener una explicación completa del modelo de estado de la red, las puntuaciones, los motivos y cómo activarlo, consulte la página visión general de la observabilidad del cliente.

Los datos sobre el estado de la red están disponibles a través de dos canales:

  • Estadísticas periódicas: Los eventos de estadísticas de enlaces multimedia incluyen métricas de transporte con connectionEstimatedBandwidth, networkCondition y networkConditionReason. Las estadísticas de los abonados también exponen remotePublisherTransport y networkDegradationSource.
  • Eventos de cambio de estado de la red: Actos dedicados a ambos editor y abonado se activan cuando se detecta un cambio significativo en el estado de la red.

El siguiente ejemplo muestra cómo utilizar los datos de estado de la red del abonado para identificar la fuente de degradación:

subscriber.on('networkConditionChanged', ({ reason, stats }) => {
  console.log('Network condition changed.');
  console.log(`Degradation source: ${stats.mediaLink.networkDegradationSource}`);
  if (stats.mediaLink.networkDegradationSource === 'local') {
    console.log(`Network Condition: ${stats.mediaLink.transport.networkCondition}, Reason: ${stats.mediaLink.transport.networkConditionReason}`);
  } else if (stats.mediaLink.networkDegradationSource === 'remote') {
    console.log(`Network Condition: ${stats.mediaLink.remotePublisherTransport.networkCondition}, Reason: ${stats.mediaLink.remotePublisherTransport.networkConditionReason}`);
});

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