Canales de publicación — Web

Una vez que haya conectado a una sesiónpuede publicar un flujo que otros clientes conectados a la sesión puedan ver.

Este tema incluye las siguientes secciones:

Publicar un flujo

Para publicar un flujo, añada un componente OTPublisher como hijo del objeto OTSession:

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

El publicador inicia el streaming cuando el cliente se conecta a la sesión. El objeto OTPublisher envía un streamCreated evento cuando comienza a transmitir a la sesión. Envía un error en caso de que se produzca un error al publicar. Establece un eventHandlers del componente OTPublisher, y establezca la propiedad streamCreated y error de ese objeto a funciones de devolución de llamada:

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

Comprobar si un cliente tiene capacidades de publicación

Una vez que te hayas conectado a una sesión, puedes comprobar si el cliente puede publicar. Establece una referencia al objeto OTSession y llama a su getCapabilites() en el método sessionConnected controlador de eventos. Este método devuelve una promesa con un objeto que incluye un canPublish propiedad. A continuación, puede publicar condicionalmente en función de ese 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, el cliente debe conectarse a la sesión con un token al que se le haya asignado un función que apoya la publicación.

Configuración de la cámara utilizada por la editorial

Puede hacer que el editor utilice la cámara trasera del dispositivo estableciendo un properties prop del componente OTPublisher y configurando el cameraPosition propiedad de ese objeto a "back":

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

Ten en cuenta que también puedes publicar una transmisión compartida de pantalla, es decir, una en la que la fuente sea la pantalla del cliente, y no una cámara. Para obtener más información, consulta Compartir pantalla.

Impedir que un editor transmita en streaming a una sesión

Puedes impedir que el editor transmita a la sesión desmontándolo (eliminándolo del componente OTSession principal). Por ejemplo, el siguiente código deja de publicar una transmisión tras 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;

Ten en cuenta que puedes dejar de enviar vídeo o audio de forma individual (sin dejar de publicar). Para obtener más información, consulta Ajustar el audio y el vídeo.

Detectar cuándo un flujo publicado abandona una sesión

El objeto OTPublisher envía un streamDestroyed evento que se activa cuando deja de transmitir a la sesión:

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

Configuración de la resolución de vídeo de una transmisión

Para establecer una resolución de vídeo recomendada para una transmisión publicada, configura el resolution propiedad del properties el parámetro que pasas al OTPublisher componente:

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

El resolution es una cadena que define la resolución deseada del vídeo. El formato de la cadena es _width_x_height, donde la anchura y la altura se expresan en píxeles. Los valores válidos son «1920x1080», «1280x720», «640x480» y «320x240». El vídeo publicado solo utilizará la resolución deseada si la configuración del cliente la admite. Algunos dispositivos y clientes no admiten todas estas configuraciones de resolución.

Nota: Consulta el Guía del desarrollador 1080p para conocer los aspectos que hay que tener en cuenta a la hora de utilizar una resolución de 1080p.

Ajuste de la frecuencia de imagen de un flujo

Para establecer una resolución de vídeo recomendada para una transmisión publicada, configura el frameRate propiedad del properties el parámetro que pasas al OTPublisher componente:

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

Establece el valor en la frecuencia de fotogramas deseada, en fotogramas por segundo, del vídeo. Los valores válidos son 30, 15, 7 y 1.

En el caso de las sesiones que utilizan el OpenTok Media Router (sesiones con el modo multimedia (configurado en «routed»), al reducir la frecuencia de fotogramas se reduce proporcionalmente el ancho de banda máximo que puede utilizar la transmisión. Sin embargo, en sesión con el modo multimedia en retransmitido, la reducción de la frecuencia de imagen no reduce el ancho de banda del flujo.

Configuración de la velocidad de bits máxima para una transmisión

Puede establecer la tasa de bits máxima para un flujo publicado. Establecer la bitrate máximo puede ayudar a reducir el consumo de ancho de banda cuando un usuario está se conecta desde una conexión con contador. Consulte esta documentación.

Obtener estadísticas sobre la transmisión de un editor

OTPublisher audioNetworkStats y audioNetworkStats Los eventos proporcionan una matriz de objetos que definen las estadísticas actuales de audio o vídeo del emisor. En el caso de un emisor que se encuentre en una sesión enrutada (una que utilice el OpenTok Media Router), cada una de estas matrices de eventos incluye un objeto que define las estadísticas del audio o el vídeo que se envía al OpenTok Media Router. En una sesión retransmitida, la matriz incluye un objeto por cada suscriptor de la transmisión publicada. Cada objeto de la matriz tiene las siguientes propiedades:

  • videoBytesSent — El número total de bytes de audio y vídeo enviados
  • videoPacketsSent — El número total de paquetes de audio y vídeo enviados
  • videoPacketsSent — El número total de paquetes de audio y vídeo perdidos

Además, en el caso de un editor en una sesión retransmitida, cada objeto de la matriz contiene las dos propiedades siguientes:

  • connectionId — El identificador único de la conexión del cliente suscrito, que coincide con el connectionId propiedad del connectionCreated evento relacionado con la conexión de ese cliente.

  • subscriberId — El identificador único del abonado.

El siguiente código registra estas estadísticas de la transmisión del emisor cada segundo:

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

Para obtener estadísticas de flujo más detalladas, utilice la función OTPublisher.getRtcStatsReport() método. Al llamar a este método, la instancia de OTPublisher envía un rtcStatsReport evento:

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

En el caso de un editor en una sesión enrutada, la matriz de eventos incluye un objeto que define las estadísticas de la transmisión enviada al OpenTok Media Router. En una sesión retransmitida, la matriz incluye un objeto que define los informes de estadísticas RTC para cada suscriptor de la transmisión publicada. Cada objeto de la matriz tiene un jsonArrayOfReports propiedad que incluye los datos. La estructura del array JSON es similar al formato del objeto RtcStatsReport implementado en los navegadores web (véase la documentación de Mozilla). Véase también esta documentación del W3C.

Aplicar filtros y efectos a un vídeo publicado

Puedes aplicar filtros de vídeo a los vídeos publicados; consulta este tema.

Configuración de sugerencias de contenido de vídeo para mejorar el rendimiento del vídeo en determinadas situaciones

Puedes configurar una sugerencia de contenido de vídeo para mejorar la calidad y el rendimiento de un vídeo publicado. Esto puede resultar útil en determinadas situaciones:

  • Al publicar un vídeo de pantalla compartida que contenga principalmente texto o contenido de vídeo.

  • Cuando se utiliza una fuente de vídeo de cámara, si prefieres reducir la velocidad de fotogramas y mantener la resolución, puedes configurar la indicación de contenido como «texto» o «detalle». En una sesión enrutada, el emisor enviará una transmisión a resolución completa y baja frecuencia de fotogramas y —si las condiciones de la red lo permiten— una transmisión a resolución completa y frecuencia de fotogramas normal. El OpenTok Media Router reenviará una de esas transmisiones a los suscriptores.

Esto indica al cliente que utilice métodos de codificación o procesamiento más adecuados para el tipo de contenido que especifiques.

Fije el videoContentHint propiedad de OTPublisher properties prop:

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

Establece la indicación de contenido de vídeo en uno de los siguientes valores:

  • "" — No se proporciona ninguna indicación (valor por defecto). El cliente de publicación intentará determinar, en la medida de lo posible, cómo debe tratarse el contenido de vídeo.

  • «movimiento»: la pista debe tratarse como si contuviera vídeo en el que el movimiento sea importante. Por ejemplo, puedes utilizar esta configuración para una transmisión de vídeo de pantalla compartida que contenga imágenes de vídeo.

  • «detalle»: la pista debe tratarse como si los detalles del vídeo fueran especialmente importantes. Por ejemplo, puedes utilizar esta configuración para una transmisión de vídeo compartida en pantalla que contenga texto, dibujos o ilustraciones lineales.

  • «texto»: la pista debe tratarse como si los detalles del texto fueran especialmente importantes. Por ejemplo, puedes utilizar esta configuración para una transmisión de vídeo con pantalla compartida que contenga contenido de texto.

Con las indicaciones de contenido «text» y «detailed», el cliente intenta mantener una alta resolución, aunque para ello tenga que reducir la frecuencia de fotogramas del vídeo. En el caso de la indicación de contenido «motion», el cliente reduce la resolución para evitar que la frecuencia de fotogramas se ralentice.

Puedes obtener más información sobre estas opciones en el Borrador de trabajo del W3C.

Si no te importa que la velocidad de fotogramas sea baja, también podrías plantearte limitar la frecuencia de fotogramas de las transmisiones a las que se está suscrito.

Otras opciones de audio y vídeo

Consulta la guía para desarrolladores sobre Ajustar el audio y el vídeo.