Transmissões de publicação — Web

Depois de conectado a uma sessão, você pode publicar um stream que outros clientes conectados à sessão possam visualizar.

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

Publicação de um stream

Para publicar um stream, adicione um componente OTPublisher como filho do objeto OTSession:

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

O publisher inicia a transmissão quando o cliente se conecta à sessão. O objeto OTPublisher despacha um streamCreated evento quando começa a transmitir para a sessão. Ele dispara um error caso ocorra um erro na publicação. Defina um eventHandlers propriedade do componente OTPublisher e defina o streamCreated e error propriedades desse objeto para as funções de retorno de chamada:

<OTPublisher
eventHandlers={{
  streamCreated: () => {
    console.log('The publisher started streaming.');
  },
  error: event => {
    console.log('Publisher error:', event);
  },
}}/>

Verificar se um cliente possui recursos de publicação

Depois de se conectar a uma sessão, você pode verificar se o cliente pode publicar. Defina uma referência ao objeto OTSession e chame seu getCapabilites() método no sessionConnected manipulador de eventos. Este método retorna uma promessa com um objeto que inclui um canPublish propriedade. Você pode, então, publicar condicionalmente com base nesse valor:

import React, {Component} from 'react';
import {View} from 'react-native';
import {OTSession, OTPublisher, OTSubscriber} from 'opentok-react-native';

class App extends Component {
  constructor(props) {
    super(props);
    this.apiKey = 'your API key';
    this.sessionId = 'a session ID';
    this.token = 'a valid token';
    this.state = {canPublish: false};

    this.sessionEventHandlers = {
      sessionConnected: event => {
        this.connectionCount++;
        this.session.getCapabilities().then(capabilities => {
          this.setState({canPublish: capabilities.canPublish});
        });
      },
    };
  }

  render() {
    return (
      <View
        <OTSession
          apiKey={this.apiKey}
          sessionId={this.sessionId}
          token={this.token}
          ref={instance => {
            this.session = instance;
          }}
          eventHandlers={this.sessionEventHandlers}>
          {this.state.canPublish ? (
            <OTPublisher/>
          ) : null}
          <OTSubscriber/>
        </OTSession>
      </View>
    );
  }
}

export default App;

Para publicar, o cliente deve se conectar à sessão com um token ao qual foi atribuído um função que oferece suporte à publicação.

Configurando a câmera utilizada pelo editor

Você pode fazer com que o desenvolvedor utilize a câmera traseira do dispositivo configurando um properties prop do componente OTPublisher e definindo o cameraPosition propriedade desse objeto para "back":

<OTPublisher
  properties={{
    cameraPosition: 'back',
  }}
/>

Observe que você também pode publicar uma transmissão de compartilhamento de tela — na qual a fonte é a tela do cliente, e não uma câmera. Para mais detalhes, consulte Compartilhamento de tela.

Impedir que um editor transmita para uma sessão

É possível impedir que o publisher transmita para a sessão desmontando-o (removendo-o do componente OTSession pai). Por exemplo, o código a seguir cancela a publicação de um stream após 30 segundos:

import React, {Component} from 'react';
import {View} from 'react-native';
import {OTSession, OTPublisher} from 'opentok-react-native';

class App extends Component {
  constructor(props) {
    super(props);
    this.apiKey = 'your-api-key';
    this.sessionId = 'valid-session-id';
    this.token = 'valid-token';
    this.publisherOptions = {
      publishCaptions: true,
      publishVideo: true,
      publishAudio: false,
    };
    this.state = {
      publishing: true,
    };
    this.publisherEventHandlers = {
      streamCreated: event => {
        setTimeout(
          function () {
            console.log(10);
            this.setState({publishing: false});
          }.bind(this),
          10000,
        );
      },
    };
  }

  render() {
    return (
      <View>
        <OTSession
          apiKey={this.apiKey}
          sessionId={this.sessionId}
          token={this.token}
          {this.state.publishing ? (
            <OTPublisher
              eventHandlers={this.publisherEventHandlers}
              ref={instance => {
                this.publisher = instance;
              }}
            />
          ) : null}
        </OTSession>
      </View>
    );
  }
}

export default App;

Observe que é possível interromper individualmente o envio de vídeo ou áudio (mesmo continuando a transmissão). Para obter mais informações, consulte Ajustando o áudio e o vídeo.

Detectar quando um stream publicado sai de uma sessão

O objeto OTPublisher dispara um streamDestroyed evento quando ele interrompe a transmissão para a sessão:

<OTPublisher
  eventHandlers={{
    streamDestroyed: function() {
      console.log('The publisher stopped streaming.');
    },
  }}
/>

Definindo a resolução de vídeo de uma transmissão

Para definir uma resolução de vídeo recomendada para uma transmissão publicada, defina o resolution propriedade do properties parâmetro que você passa para o OTPublisher componente:

<OTPublisher
  properties={{
    resolution: '320x240',
    // other properties
  }}
/>

O resolution A propriedade é uma string que define a resolução desejada do vídeo. O formato da string é _width_x_height, onde a largura e a altura são representadas em pixels. Os valores válidos são “1920x1080”, “1280x720”, “640x480” e “320x240”. O vídeo publicado só utilizará a resolução desejada se a configuração do cliente for compatível com ela. Alguns dispositivos e clientes não oferecem suporte a todas essas configurações de resolução.

Observação: Veja o Guia para desenvolvedores sobre 1080p para considerações sobre o uso da resolução 1080p.

Configurando a taxa de quadros de uma transmissão

Para definir uma resolução de vídeo recomendada para uma transmissão publicada, defina o frameRate propriedade do properties parâmetro que você passa para o OTPublisher componente:

<OTPublisher
  properties={{
    frameRate: 7,
    // other properties
  }}
/>

Defina o valor para a taxa de quadros desejada, em quadros por segundo, do vídeo. Os valores válidos são 30, 15, 7 e 1.

Para sessões que utilizam o OpenTok Media Router (sessões com o modo de mídia (configurado como “routed”), a redução da taxa de quadros reduz proporcionalmente a largura de banda máxima que o stream pode utilizar. No entanto, na sessão com o modo de mídia Quando configurado para retransmissão, a redução da taxa de quadros não diminui a largura de banda da transmissão.

Definindo a taxa de bits máxima para uma transmissão

É possível definir a taxa de bits máxima para uma transmissão publicada. Definir a taxa de bits máxima pode ajudar a reduzir o consumo de largura de banda quando um usuário está se conectando por meio de uma conexão com limite de tráfego. Consulte esta documentação.

Como obter estatísticas sobre o stream de um editor

O OTPublisher audioNetworkStats e audioNetworkStats Os eventos fornecem uma matriz de objetos que definem as estatísticas atuais de áudio ou vídeo do emissor. Para um emissor em uma sessão roteada (aquela que utiliza o Roteador de mídia OpenTok), cada uma dessas matrizes de eventos inclui um objeto, definindo as estatísticas do áudio ou vídeo enviado ao OpenTok Media Router. Em uma sessão retransmitida, a matriz inclui um objeto para cada assinante do fluxo publicado. Cada objeto na matriz possui as seguintes propriedades:

  • videoBytesSent — O número total de bytes de áudio e vídeo enviados
  • videoPacketsSent — O número total de pacotes de áudio e vídeo enviados
  • videoPacketsSent — O número total de pacotes de áudio e vídeo perdidos

Além disso, para um editor em uma sessão retransmitida, cada objeto na matriz contém as duas propriedades a seguir:

  • connectionId — O ID exclusivo da conexão do cliente assinante, que corresponde ao connectionId propriedade do connectionCreated evento para a conexão desse cliente.

  • subscriberId — O ID exclusivo do assinante.

O código a seguir registra essas estatísticas do stream do editor a cada segundo:

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

Para obter estatísticas mais detalhadas sobre a transmissão, use o OTPublisher.getRtcStatsReport() método. Ao chamar esse método, a instância do OTPublisher envia um rtcStatsReport evento:

<OTPublisher
  eventHandlers={{
    streamCreated: event => {
      console.log('publisher streamCreated', event);
      setTimeout(() => this.publisher.getRtcStatsReport(), 12000)
    },
    rtcStatsReport: event => {
      console.log('publisher rtcStatsReport event', event);
    },
  }}
/>

Para um editor em uma sessão roteada, a matriz de eventos inclui um objeto, que define as estatísticas do fluxo enviado ao OpenTok Media Router. Em uma sessão retransmitida, a matriz inclui um objeto que define os Relatórios de Estatísticas RTC para cada assinante do fluxo publicado. Cada objeto na matriz possui um jsonArrayOfReports propriedade que inclui os dados. A estrutura do array JSON é semelhante ao formato do objeto RtcStatsReport implementado nos navegadores da web (consulte a documentação da Mozilla). Veja também esta documentação do W3C.

Aplicando filtros e efeitos a vídeos publicados

É possível aplicar filtros de vídeo a vídeos publicados — consulte esse assunto.

Definição de dicas de conteúdo de vídeo para melhorar o desempenho do vídeo em determinadas situações

É possível definir uma dica de conteúdo de vídeo para melhorar a qualidade e o desempenho de um vídeo publicado. Isso pode ser útil em determinadas situações:

  • Ao publicar um vídeo de compartilhamento de tela que conterá principalmente texto ou conteúdo de vídeo.

  • Ao usar uma fonte de vídeo de câmera, se você preferir reduzir a taxa de quadros e manter a resolução, pode definir a sugestão de conteúdo como “texto” ou “detalhe”. Em uma sessão roteada, o emissor enviará um fluxo em resolução total com baixa taxa de quadros e — se as condições da rede permitirem — um fluxo em resolução total com taxa de quadros normal. O OpenTok Media Router encaminhará um desses fluxos aos assinantes.

Isso indica ao cliente que utilize métodos de codificação ou processamento mais adequados ao tipo de conteúdo que você especificar.

Defina o videoContentHint propriedade da OTPublisher properties prop:

<OTPublisher
  properties={{
    videoContentHint: 'text',
  }}
/>

Defina a dica de conteúdo de vídeo como um dos seguintes valores:

  • "" — Não é fornecida nenhuma indicação (configuração padrão). O cliente de publicação fará a melhor estimativa possível sobre como o conteúdo de vídeo deve ser tratado.

  • "movimento" — A trilha deve ser tratada como se contivesse vídeo em que o movimento seja importante. Por exemplo, você pode usar essa configuração para uma transmissão de vídeo com compartilhamento de tela que contenha imagens em movimento.

  • "detalhe" — A faixa deve ser tratada como se os detalhes do vídeo fossem extremamente importantes. Por exemplo, você pode usar essa configuração para uma transmissão de vídeo com compartilhamento de tela que contenha conteúdo de texto, pinturas ou desenhos a linha.

  • "texto" — A faixa deve ser tratada como se os detalhes do texto fossem extremamente importantes. Por exemplo, você pode usar essa configuração para uma transmissão de vídeo com compartilhamento de tela que contenha conteúdo de texto.

Com as dicas de conteúdo “texto” e “detalhado”, o cliente tenta manter uma alta resolução, mesmo que precise reduzir a taxa de quadros do vídeo. No caso da dica de conteúdo “movimento”, o cliente reduz a resolução para evitar que a taxa de quadros fique lenta.

Você pode ler mais sobre essas opções no Rascunho de Trabalho do W3C.

Se você não se importar com uma taxa de quadros baixa, também pode considerar restringir a taxa de quadros das transmissões assinadas.

Outras opções de áudio e vídeo

Consulte o guia do desenvolvedor para Ajustando o áudio e o vídeo.