Inscrição em streams — React Native

Depois de conectado a uma sessão, você pode se inscrever em transmissões na sessão. Ao se inscrever em uma transmissão, o vídeo dessa transmissão aparece na página do cliente e o áudio é reproduzido.

Este tópico inclui as seguintes seções:

Inscrever-se em um canal

Para se inscrever em todos os fluxos da sessão, adicione um objeto OTSubscriber como filho do objeto OTSession:

<OTSession
  apiKey="the API key"
  sessionId="the session ID"
  token="the token">
  <OTSubscriber/>
</OTSession>

Depois que o cliente se conecta à sessão, o objeto OTSubscriber adiciona visualizações para os vídeos dos assinantes quando as transmissões de outros clientes ficam disponíveis na sessão.

O objeto OTSubscriber dispara um connected evento que ocorre quando um assinante inicia com sucesso a transmissão. Ele dispara um error caso ocorra um erro na inscrição. Defina um eventHandlers propriedade do componente OTSubscriber e defina o connected e error propriedades desse objeto para as funções de retorno de chamada:

<OTSubscriber
eventHandlers={{
  connected: () => {
    console.log('The subscriber started streaming.');
  },
  error: () => {
    console.log('The subscriber failed.');
  }
}}/>

Definindo as propriedades do fluxo

Passe um properties prop para o objeto OTSubscriber, para definir propriedades todos assinantes:

<OTSubscriber
  properties={{
    subscribeToAudio: true,
    subscribeToVideo: false,
    subscribeToCaptions: true,
    preferredResolution: 30,
    preferredFrameRate: '352x288',
    audioVolume: 50,
  }}/>

Como alternativa, você pode definir o streamProperties A propriedade OTSubscriber aponta para um objeto que define configurações individuais para cada stream. As propriedades do objeto são pares chave-valor, tendo o ID do stream como chave e o valor definido como um objeto com subscribeToAudio, subscribeToVideo, subscribeToCaptions, preferredResolution, preferredFrameRate, e audioVolume substituições para o assinante do stream:

class App extends Component {
constructor(props) {
  super(props);
  this.state = {
    streamProperties: {},
  };

  this.subscriberProperties = {
    subscribeToAudio: false,
    subscribeToVideo: true,
    subscribeToCaptions: false,
  };

  this.sessionEventHandlers = {
    streamCreated: event => {
      const streamProperties = {...this.state.streamProperties, [event.streamId]: {
        subscribeToAudio: true,
        subscribeToVideo: false,
        style: {
          width: 400,
          height: 300,
        },
      }};
      this.setState({ streamProperties });
    },
  };
}

render() {
  return (
    <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token" eventHandlers={this.sessionEventHandlers}>
      <OTSubscriber
        properties={this.subscriberProperties}
        eventHandlers={this.subscriberEventHandlers}
        style={{ height: 100, width: 100 }}
        streamProperties={this.state.streamProperties}
      />
    </OTSession>
  );
}
}

O properties O objeto inclui as seguintes propriedades:

Exibição personalizada dos assinantes

Por padrão, o OTSubscriber adiciona visualizações filhas para os vídeos dos assinantes. No entanto, é possível adicionar uma função de renderização para que o objeto OTSubscriber inclua os assinantes. A função recebe como parâmetro um array de IDs de stream:

import { OTSubscriberView, OTSubscriber } from 'opentok-react-native'

// Render method:

<OTSubscriber>
  {streamIds => {
    if (streamIds.length === 0) {
      return null;
    }
    return streamIds.map(streamId => {
      return (
        <OTSubscriberView
          streamId={streamId}
          key={streamId}
          style={{
            width: 200,
            height: 150,
          }}
        />
      );
    });
  }}
</OTSubscriber>

Use o componente OTSubscriberView para renderizar fluxos individuais. O componente OTSubscriberView herda as propriedades (como style) do componente View do React Native. Além disso, ele possui um streamId prop que você usa para passar o ID do stream do assinante.

Observação: O streamProperties A propriedade do objeto OTSubscriber é ignorada se esses componentes filhos OTSubscriberView forem adicionados.

Detectar quando fluxos são criados em uma sessão

O objeto OTSession despacha um streamCreated evento que ocorre quando um novo fluxo (que não seja o seu) é criado em uma sessão. Um fluxo é criado quando um cliente publica um fluxo para a sessão. O streamCreated O evento também é disparado para cada stream existente na sessão quando você se conecta pela primeira vez.

<OTSession
eventHandlers={{
  streamCreated: () => {
    console.log('Stream created -- stream ID:', event.streamId);
  }
}}/>

O streamCreated O objeto de evento inclui detalhes sobre a transmissão, incluindo dados de conexão, tipo de fonte de vídeo (“câmera” ou “tela”) e muito mais. Você pode usar essas informações para determinar como as transmissões são organizadas (ou quais transmissões incluir) ao usar um

Cancelar a inscrição em um stream

Os assinantes são automaticamente eliminados quando o cliente de publicação interrompe a publicação. Para cancelar a assinatura de um fluxo em andamento, desmonte o componente OTSubscriberView correspondente do componente OTSubscriber. Consulte Exibição personalizada dos assinantes.

Detectar quando os fluxos saem de uma sessão

Quando um stream, que não seja o seu, sai de uma sessão, o objeto OTSession dispara um streamDestroyed evento:

<OTSession
eventHandlers={{
  streamDestroyed: (event) => {
    console.log('Stream destroyed -- stream ID:', event.streamId);
  }
}}/>

O streamDestroyed O objeto de evento possui as seguintes propriedades que definem o fluxo:

  • connection � Um objeto correspondente à conexão que está publicando o fluxo. Isso inclui um data propriedade que inclui dados de conexão (caso tenha sido definido) para o cliente.

  • creationTime �O carimbo de data/hora (um número) correspondente à criação do fluxo. Esse valor é calculado em milissegundos.

  • hasAudio �(Booleano) Indica se a transmissão possui áudio. Essa propriedade pode mudar caso o emissor ative ou desative o áudio. Quando isso ocorre, o objeto OTSession dispara um streamPropertyChanged evento.

  • hasVideo �(Booleano) Se o stream contém vídeo.

  • name �(String) O nome do stream, caso tenha sido definido no momento da publicação do stream.

videoDimensions — Este objeto possui duas propriedades: width e height. Ambas são valores numéricos. A propriedade width é a largura do fluxo codificado; a propriedade height é a altura do fluxo codificado. (Essas propriedades são independentes da largura real dos objetos Publisher e Subscriber correspondentes ao fluxo.) Essa propriedade pode mudar se um fluxo publicado a partir de um dispositivo móvel for redimensionado, com base em uma mudança na orientação do dispositivo.

  • videoType �O tipo de vídeo: “câmera” ou “tela”. Um vídeo do tipo “tela” utiliza o compartilhamento de tela no editor como fonte de vídeo. Essa propriedade pode mudar se a transmissão publicada passar de uma fonte de vídeo de câmera para uma de compartilhamento de tela. Para obter mais informações, consulteCompartilhamento de tela — React Native.

O hasAudio, hasVideo, videoDimensions, e videoType as propriedades podem sofrer alterações (por exemplo, quando o editor ativa ou desativa o vídeo). Quando isso ocorre, o objeto OTSession dispara um streamPropertyChanged evento.

Reconexão automática

Se um cliente perder a conexão com um fluxo assinado (por exemplo, devido a uma queda na conectividade de rede em qualquer um dos clientes), ele tentará se reconectar automaticamente ao fluxo. Quando a conexão com o fluxo é perdida e o cliente tenta se reconectar, o objeto OTSubscriber dispara um disconnected evento. Quando o fluxo é restaurado, o objeto OTSubscriber dispara um connected evento. Se o cliente não conseguir restaurar o fluxo, o objeto OTSubscriber dispara um destroyed evento.

Em resposta a esses eventos, seu aplicativo pode (opcionalmente) exibir notificações na interface do usuário indicando os estados de desconexão temporária, reconexão e destruição:

<OTSubscriber
  eventHandlers={{
    disconnected: (event) => {
      console.log('stream disconnected -- stream ID:', event.streamId);
      // Display a user interface notification.
    },
    connected: (event) => {
      console.log('stream connected -- stream ID:', event.streamId);
      // Adjust user interface.
    },
    destroyed: (event) => {
      console.log('stream destroyed -- stream ID:', event.streamId);
      // Adjust user interface.
    }
  }}/>

Como definir a taxa de quadros e a resolução preferidas

Ao assinar um stream que utiliza o recurso de vídeo escalável, é possível definir a taxa de quadros e a resolução preferidas para a transmissão que o cliente assinante recebe do OpenTok Media Router.

<OTSubscriber
    properties={{
      preferredFrameRate: 7,
      preferredResolution: '352x288',
  }}/>

  • preferredFrameRate — A taxa de quadros preferencial, em quadros por segundo. Os valores válidos são 30, 15, 7 e 1. Deixe esse campo em branco para remover a taxa de quadros preferencial; nesse caso, o cliente utilizará a taxa de quadros mais alta disponível.

  • preferredResolution — A resolução preferencial. Os valores válidos são “1280x720”, “640x480” e “352x288”. Deixe esse campo em branco para remover a resolução preferencial; assim, o cliente utilizará a taxa de quadros mais alta disponível.

Detectar quando o vídeo de um assinante está desativado

Quando o vídeo de um assinante é desativado, o objeto OTSubscriber dispara um videoDisabled evento:

<OTSubscriber
  eventHandlers={{
    videoDisabled: (event) => {
      console.log('stream video disabled -- stream ID:', event.streamId);
      // Display a user interface notification.
    },
  }}/>

Quando o OpenTok Media Router desativa o vídeo de um assinante, talvez seja necessário ajustar a interface do usuário relacionada a esse assinante.

A propriedade `reason` do objeto do evento `videoDisabled` define o motivo pelo qual o vídeo foi desativado. Ela pode ser definida como um dos seguintes valores:

  • "PublisherPropertyChanged" — A editora deixou de publicar vídeos.

  • "QualityChanged" — O OpenTok Media Router interrompeu o envio de vídeo ao assinante devido a alterações na qualidade do stream. Esse recurso do OpenTok Media Router faz com que o assinante interrompa o stream de vídeo quando a conectividade se deteriora. (O assinante continua recebendo o stream de áudio, caso haja um.)

    Antes de enviar esse evento, quando a qualidade do stream do assinante se deteriora a um nível tão baixo que o stream de vídeo corre o risco de ser desativado, o objeto OTSubscriber dispara um videoDisableWarning evento.

    Se a conectividade melhorar a ponto de permitir novamente a exibição de vídeo, o objeto OTSubscriber dispara um videoEnabled evento, e o assinante volta a receber o vídeo.

    Esse recurso está disponível apenas em sessões que utilizam o OpenTok Media Router (sessões com o modo de mídia (configurado como “routed”), e não em sessões com o modo de mídia configurado como “relayed”.

    Ao publicar uma transmissão, você pode evitar que o vídeo seja desativado devido à qualidade da transmissão. Defina audioFallbackEnabled para false no properties passar o prop para o componente OTPublisher.

  • "SubscriberPropertyChanged" — O assinante iniciou ou cancelou a assinatura do vídeo, ao definir subscribeToVideo para “false” no properties prop passado para o componente OTSubscriber.

  • "CodecNotSupported" — O assinante interrompeu a assinatura do vídeo devido a um codec incompatível (consulte o Codecs de vídeo (guia do desenvolvedor).

O objeto OTSubscriber despacha videoEnabled evento quando o vídeo for retomado:

O reason A propriedade do objeto do evento `videoEnabled` define o motivo pelo qual o vídeo foi ativado. Ela pode ser definida com um dos seguintes valores:

  • "PublisherPropertyChanged" — A editora retomou a publicação de vídeos.

  • "QualityChanged" — O OpenTok Media Router retomou o envio de vídeo ao assinante com base nas mudanças na qualidade do stream. Esse recurso do OpenTok Media Router faz com que o assinante interrompa o stream de vídeo quando a conectividade se deteriora e, em seguida, retome o stream de vídeo caso a qualidade do stream melhore.

    Esse recurso está disponível apenas em sessões que utilizam o OpenTok Media Router (sessões com o modo de mídia (configurado como “routed”), e não em sessões com o modo de mídia configurado como “relayed”.

  • "SubscriberPropertyChanged" — O assinante iniciou ou cancelou a assinatura do vídeo, ao definir subscribeToVideo para “false” no properties prop passado para o componente OTSubscriber.

  • "CodecNotSupported" — O vídeo do assinante foi habilitado após uma mudança de codec a partir de um codec incompatível (consulte o Codecs de vídeo (guia do desenvolvedor).

Detectar quando as dimensões do vídeo de uma transmissão mudam

As dimensões do vídeo de uma transmissão podem mudar se uma transmissão publicada a partir de um dispositivo móvel for redimensionada, devido a uma mudança na orientação do dispositivo. Isso também pode ocorrer se a fonte do vídeo for uma janela de compartilhamento de tela e o usuário que está publicando a transmissão redimensionar a janela que serve de fonte para a transmissão.

Quando as dimensões do vídeo de uma transmissão são alteradas, o objeto Session dispara um evento streamPropertyChanged, com o changedProperty propriedade do evento definida como "videoDemensions".

Obtendo estatísticas de transmissão

Para obter estatísticas de áudio e vídeo dos assinantes, adicione manipuladores de eventos para o audioNetworkStats e videoNetworkStats evento disparado pelo OTSubscriber. Esses eventos fornecem informações sobre o fluxo do assinante, incluindo o seguinte:

  • O número total de pacotes de áudio e vídeo perdidos
  • O número total de pacotes de áudio e vídeo recebidos
  • O número total de bytes de áudio e vídeo recebidos
  • A taxa média atual de quadros por segundo do vídeo
<OTSubscriber
  eventHandlers={{
    audioNetworkStats: event => {
      console.log('subscriber audioNetworkStats event', event);
    },
    videoNetworkStats: event => {
      console.log('subscriber videoNetworkStats event', event);
    },
  }}
/>

Para obter estatísticas mais detalhadas do fluxo, use o método `Subscriber.getRtcStatsReport()` do objeto `OTSubscriber`. Ele retorna uma promessa que, em caso de sucesso, é resolvida com uma representação em JSON de um RtcStatsReport objeto para o fluxo assinado:

<OTSubscriber
  eventHandlers={{
    connected: event => {
      setTimeout(() => {
        this.subscriber.getRtcStatsReport();
      }, 4000);
    },
    rtcStatsReport: event => {
      console.log('subscriber rtcStatsReport event', event);
    },
  }}
/>