Observabilidade do cliente: React Native

O SDK do React Native disponibiliza métricas detalhadas sobre a qualidade do fluxo por meio de uma API de estatísticas de alto nível — recomendada para a maioria dos casos de uso —, que fornece estatísticas de áudio, vídeo, rede e do lado do remetente de forma unificada e sensível à sessão, mantendo-se estável durante as transições entre conexões entre pares. Para depuração avançada, o SDK também oferece acesso ao relatório de estatísticas brutas do WebRTC, que reflete dados não processados das conexões entre pares.

API de Estatísticas de Áudio e Vídeo

O SDK do React Native envia estatísticas periódicas de rede de áudio e vídeo tanto para emissores quanto para assinantes. Essas estatísticas incluem contagem de pacotes, taxas de bits, dados de taxa de quadros, métricas de pausa/congelamento, informações sobre codecs e, opcionalmente, estimativas de rede do lado do remetente.

Como obter estatísticas para uma editora

O EditorÁudioRedeEstatísticasEvento e EditoraVídeoRedeEstatísticasEvento Os eventos fornecem a você uma matriz de objetos que definem as estatísticas atuais de áudio e vídeo do editor. Para um editor em uma sessão roteada (aquela que utiliza o OpenTok Roteador de mídia), esse array inclui um objeto, que define as estatísticas do único fluxo de áudio e vídeo enviado ao Vonage Video Media Router. Em uma sessão retransmitida, o array inclui um objeto para cada assinante do fluxo publicado.

O código a seguir registra algumas métricas do fluxo do editor:

<OTPublisher
  eventHandlers={{
    audioNetworkStats: event => {
      console.log('publisher audioNetworkStats event', event);
    },
    videoNetworkStats: event => {
      console.log('publisher videoNetworkStats event', event);
    },
  }}
/>

Como obter estatísticas de um assinante

O Estatísticas da Rede de Áudio e Evento de Estatísticas da Rede de Vídeos Os eventos fornecem informações sobre o fluxo do assinante.

O código a seguir registra várias métricas do fluxo do assinante:

<OTSubscriber
  eventHandlers={{
    audioNetworkStats: event => {
      console.log('subscriber audioNetworkStats event', event);
    },
    videoNetworkStats: event => {
      console.log('subscriber videoNetworkStats event', event);
    },
  }}
/>

Estatística e Estruturas de Dados

Esta seção descreve os objetos e as propriedades fornecidos pela API de estatísticas de áudio e vídeo. Embora todas as plataformas do SDK de vídeo apresentem o mesmo conjunto de estatísticas, pode haver pequenas diferenças na forma como cada plataforma estrutura ou nomeia os campos individuais. Essas variações refletem convenções de design do SDK específicas de cada plataforma, e não diferenças nas métricas subjacentes.

Para obter uma explicação independente de plataforma sobre as estatísticas disponíveis e o que elas representam, consulte Visão geral da observabilidade do cliente.

Estatísticas da editora

Fornece estatísticas sobre um editor.

Estatísticas de áudio da editora (PublisherAudioNetworkStatsEvent)

Fornece estatísticas sobre a faixa de áudio de um editor.

  • connectionId — O ID exclusivo da conexão do cliente, que corresponde à propriedade id do connection propriedade do connectionCreated evento que o objeto Session enviou para o cliente remoto (disponível apenas em sessões retransmitidas).
  • subscriberId — O ID exclusivo do assinante, que corresponde à propriedade id do Subscriber objeto no aplicativo do cliente assinante (disponível apenas em sessões retransmitidas).
  • audioBytesSent — Total de bytes de áudio enviados.
  • audioPacketsLost — Total de pacotes de áudio que não chegaram ao assinante ou ao Media Router.
  • audioPacketsSent — Total de pacotes de áudio enviados.
  • timeStamp — Carimbo de data/hora do Unix (ms) em que as estatísticas foram coletadas.

Estatísticas de vídeo do editor (PublisherVideoNetworkStatsEvent)

Esses campos representam o desempenho atual dos vídeos do editor:

  • connectionId — O ID exclusivo da conexão do cliente, que corresponde à propriedade id do connection propriedade do connectionCreated evento que o objeto Session enviou para o cliente remoto (disponível apenas em sessões retransmitidas).
  • subscriberId — O ID exclusivo do assinante, que corresponde à propriedade id do Subscriber objeto no aplicativo do cliente assinante (disponível apenas em sessões retransmitidas).
  • videoBytesSent — Total de bytes de vídeo enviados.
  • videoPacketsLost — Total de pacotes de vídeo que não chegaram ao assinante ou ao Media Router.
  • videoPacketsSent — Total de pacotes de vídeo enviados.
  • timestamp — Carimbo de data/hora do Unix (ms) em que as estatísticas foram coletadas.

Estatísticas de áudio dos assinantes (AudioNetworkStats)

Fornece estatísticas sobre a trilha de áudio de um assinante.

  • audioBytesReceived — Total de bytes de áudio recebidos.
  • audioPacketsLost — Total de pacotes de áudio que não chegaram ao assinante.
  • audioPacketsReceived — Total de pacotes de áudio recebidos com sucesso.
  • timeStamp — Carimbo de data/hora do Unix (ms) em que essas estatísticas foram coletadas.

Estatísticas de vídeo dos inscritos (VideoNetworkStatsEvent)

Esses campos descrevem o desempenho do assinante na recepção e decodificação de vídeo em tempo real:

  • videoBytesReceived — Total de bytes de vídeo recebidos.
  • videoPacketsLost — Total de pacotes de vídeo que não chegaram ao assinante.
  • videoPacketsReceived — Total de pacotes de vídeo recebidos.
  • timestamp — Carimbo de data/hora do Unix (ms) em que as estatísticas foram coletadas.

As métricas a seguir fornecem estimativas de largura de banda relatadas para a conexão de saída do remetente:

  • senderStats.connectionMaxAllocatedBitrate — Taxa de bits máxima alocada estimada para o remetente (bps).
  • senderStats.connectionEstimatedBandwidth — Largura de banda estimada atual do uplink para o remetente (bps).

Estatísticas do lado do remetente

Veja o Visão geral das estatísticas do lado do remetente.

Ativação das estatísticas do remetente

As estatísticas do remetente são recebidas pelos assinantes. Para receber essas estatísticas, habilite-as para o editor do fluxo, passando o publishSenderStats propriedade definida como true nas propriedades do editor:

class App extends Component {
  constructor(props) {
    super(props);

    this.publisherProperties = {
      publishSenderStats: true
    };

    this.publisherEventHandlers = {
      streamCreated: event => {
        console.log('Publisher stream created!', event);
      },
      streamDestroyed: event => {
        console.log('Publisher stream destroyed!', event);
      }
    };
  }

  render() {
    return (
      <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token">
        <OTPublisher
          properties={this.publisherProperties}
          eventHandlers={this.publisherEventHandlers}
          style={{ height: 100, width: 100 }}
        />
      </OTSession>
    );
  }
}

Se publishSenderStats Se não estiver habilitado, nenhum canal de estatísticas do remetente será publicado para esse editor. O valor padrão é false.

Inscrição nas estatísticas do remetente

Os assinantes recebem automaticamente as estatísticas do remetente somente se o editor tiver ativado essa função.

Não são necessários eventos ou métodos adicionais; as estatísticas do remetente estão incluídas no Evento de Estatísticas da Rede de Vídeos objeto de evento.

Eventos de estatísticas de recepção

As estatísticas do lado do remetente estão incluídas como um recurso opcional senderStats objeto dentro do objeto passado para o videoNetworkStats callback. O senderStats O objeto contém duas propriedades:

  • connectionMaxAllocatedBitrate — A taxa de bits máxima que pode ser estimada para a conexão (em bits por segundo)
  • connectionEstimatedBandwidth — A largura de banda estimada atual para a conexão (em bits por segundo)
<OTSubscriber
  eventHandlers={{
    videoNetworkStats: event => {
      if (event.senderStats) {
        console.log('subscriber videoNetworkStats event', event.senderStats.connectionMaxAllocatedBitrate);
        console.log('subscriber videoNetworkStats event', event.senderStats.connectionEstimatedBandwidth);
      }
    }
  }}
/>

Relatório de Estatísticas da RTC

Para obter estatísticas de conexão entre pares de baixo nível para um editor, use o OTPublisher.getRtcStatsReport() método. Em resposta à chamada do OTPublisher.getRtcStatsReport() método da editora rtcStatsReport o manipulador de eventos é chamado. Consulte o PublisherRtcStatsReportEvent evento para obter mais informações.

<OTPublisher
  eventHandlers={{
    rtcStatsReport: event => {
      console.log('publisher rtcStatsReport event', event);
    }
  }}

Para obter estatísticas de conexão entre pares de baixo nível para um assinante, use o OTSubscriber.getRtcStatsReport() método. Em resposta à chamada do OTSubscriber.getRtcStatsReport() método do assinante rtcStatsReport o manipulador de eventos é chamado. Consulte o Evento de Relatório de Estatísticas de RTC do Assinante evento para obter mais informações.

<OTSubscriber
  eventHandlers={{
    rtcStatsReport: event => {
      console.log('subscriber rtcStatsReport event', event);
    }
  }}