Suscribirse a flujos — React Native

Una vez que haya conectado a una sesión, puedes suscribirte a las transmisiones de la sesión. Cuando te suscribes a una transmisión, su vídeo aparece en la página del cliente y se reproduce su audio.

Este tema incluye las siguientes secciones:

Suscribirse a una transmisión

Para suscribirse a todas las transmisiones de la sesión, añade un objeto OTSubscriber como hijo del objeto OTSession:

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

Una vez que el cliente se conecta a la sesión, el objeto OTSubscriber añade vistas para los vídeos de los suscriptores cuando las transmisiones de otros clientes están disponibles en la sesión.

El objeto OTSubscriber envía un connected evento que se produce cuando un suscriptor inicia correctamente la transmisión. Envía un error en caso de que se produzca un error al suscribirse. Establece un eventHandlers prop del componente OTSubscriber, y establezca la propiedad connected y error de ese objeto a funciones de devolución de llamada:

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

Establecer las propiedades del flujo

Introduce un properties prop del objeto OTSubscriber para establecer las propiedades de todos suscriptores:

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

Como alternativa, puedes configurar el streamProperties La propiedad `OTSubscriber` apunta a un objeto que define la configuración individual de cada transmisión. Las propiedades del objeto son pares clave-valor, en los que la clave es el ID de la transmisión y el valor es un objeto con subscribeToAudio, subscribeToVideo, subscribeToCaptions, preferredResolution, preferredFrameRatey audioVolume anulaciones para el suscriptor de la transmisión:

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

El properties El objeto incluye las siguientes propiedades:

Representación personalizada de los abonados

De forma predeterminada, OTSubscriber añade vistas secundarias para los vídeos de los suscriptores. Sin embargo, puedes añadir una función de renderizado para que el objeto OTSubscriber añada suscriptores. A esta función se le pasa una matriz de identificadores de streaming:

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>

Utiliza el componente OTSubscriberView para mostrar flujos individuales. El componente OTSubscriberView hereda las propiedades (como style) del componente View de React Native. Además, cuenta con un streamId prop que se utiliza para pasar el ID de la transmisión del suscriptor.

Nota: En streamProperties La propiedad del objeto OTSubscriber se ignora si se añaden estos componentes secundarios OTSubscriberView.

Detectar cuándo se crean flujos en una sesión

El objeto OTSession envía un streamCreated evento que se produce cuando se crea un nuevo flujo (que no sea el tuyo) en una sesión. Se crea un flujo cuando un cliente publica un flujo a la sesión. El streamCreated Además, se envía un evento por cada flujo existente en la sesión en el momento de la primera conexión.

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

El streamCreated El objeto de evento incluye detalles sobre la transmisión, como los datos de conexión, el tipo de fuente de vídeo («cámara» o «pantalla») y otros datos. Puedes utilizar esta información para determinar cómo se organizan las transmisiones (o qué transmisiones incluir) al utilizar un

Darse de baja de un canal

Los suscriptores se eliminan automáticamente cuando el cliente de publicación deja de publicar. Para dejar de suscribirse a un flujo en curso, desmonta el componente OTSubscriberView correspondiente del componente OTSubscriber. Consulta Representación personalizada de los abonados.

Detectar cuándo los flujos abandonan una sesión

Cuando un flujo, que no sea el propio, abandona una sesión, el objeto OTSession envía un streamDestroyed evento:

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

El streamDestroyed El objeto «event» tiene las siguientes propiedades que definen el flujo:

  • connection � Un objeto correspondiente a la conexión que está publicando el flujo. Esto incluye un data propiedad que incluye datos de conexión (si se ha establecido alguno) para el cliente.

  • creationTime �La marca de tiempo (un número) correspondiente a la creación del flujo. Este valor se calcula en milisegundos.

  • hasAudio �(Booleano) Indica si la transmisión incluye audio. Esta propiedad puede cambiar si el emisor activa o desactiva el audio. Cuando esto ocurre, el objeto OTSession envía un streamPropertyChanged evento.

  • hasVideo (Booleano) Indica si la transmisión contiene vídeo.

  • name �(Cadena) El nombre del flujo, si se especificó alguno al publicarlo.

videoDimensions: este objeto tiene dos propiedades: width y height. Ambas son valores numéricos. La propiedad «width» es la anchura de la secuencia codificada; la propiedad «height» es la altura de la secuencia codificada. (Estas propiedades son independientes de la anchura real de los objetos Publisher y Subscriber correspondientes a la secuencia). Esta propiedad puede cambiar si una secuencia publicada desde un dispositivo móvil cambia de tamaño, en función de un cambio en la orientación del dispositivo.

  • videoType �El tipo de vídeo: «cámara» o «pantalla». Un vídeo de «pantalla» utiliza la función de compartir pantalla del editor como fuente de vídeo. Esta propiedad puede cambiar si la transmisión publicada pasa de una cámara a una fuente de vídeo de pantalla compartida. Para obtener más información, consultaCompartir pantalla — React Native.

El hasAudio, hasVideo, videoDimensionsy videoType Las propiedades pueden cambiar (por ejemplo, cuando el editor activa o desactiva el vídeo). Cuando esto ocurre, el objeto OTSession envía un streamPropertyChanged evento.

Reconexión automática

Si un cliente pierde la conexión a un flujo suscrito (por ejemplo, debido a una caída en la conectividad de red en cualquiera de los clientes), intentará reconectarse automáticamente al flujo. Cuando el flujo se cae y el cliente intenta volver a conectarse, el objeto OTSubscriber envía un comando disconnected evento. Cuando se restablece el flujo, el objeto OTSubscriber envía un evento connected evento. Si el cliente no puede restaurar el flujo, el objeto OTSubscriber envía un destroyed evento.

En respuesta a estos eventos, tu aplicación puede (opcionalmente) mostrar notificaciones en la interfaz de usuario indicando los estados de desconexión temporal, reconexión y destrucción:

<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.
    }
  }}/>

Ajuste de la frecuencia de imagen y la resolución preferidas

Al suscribirse a una transmisión que utiliza el función de vídeo escalable, puedes configurar la frecuencia de fotogramas y la resolución que prefieras para la transmisión que el cliente suscrito recibe del OpenTok Media Router.

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

  • preferredFrameRate — La frecuencia de fotogramas preferida, en fotogramas por segundo. Los valores válidos son 30, 15, 7 y 1. Si no se especifica ningún valor, se eliminará la frecuencia de fotogramas preferida y el cliente utilizará la frecuencia de fotogramas más alta disponible.

  • preferredResolution — La resolución preferida. Los valores válidos son «1280x720», «640x480» y «352x288». Si no se especifica ningún valor, se desactivará la resolución preferida y el cliente utilizará la frecuencia de fotogramas más alta disponible.

Detectar cuándo se desactiva el vídeo de un suscriptor

Cuando se desactiva el vídeo de un suscriptor, el objeto OTSubscriber envía un videoDisabled evento:

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

Cuando el OpenTok Media Router desactiva el vídeo de un suscriptor, es posible que desees ajustar la interfaz de usuario relacionada con dicho suscriptor.

La propiedad «reason» del objeto del evento «videoDisabled» define el motivo por el que se ha desactivado el vídeo. Se puede establecer en uno de los siguientes valores:

  • "PublisherPropertyChanged" - El editor dejó de publicar vídeos.

  • "QualityChanged" — El OpenTok Media Router ha dejado de enviar vídeo al suscriptor debido a cambios en la calidad de la transmisión. Esta función del OpenTok Media Router hace que el suscriptor interrumpa la transmisión de vídeo cuando la conectividad se deteriora. (El suscriptor sigue recibiendo la transmisión de audio, si la hay.)

    Antes de enviar este evento, cuando la calidad de la transmisión del suscriptor se deteriora hasta un nivel tan bajo que la transmisión de vídeo corre el riesgo de desactivarse, el objeto OTSubscriber envía un videoDisableWarning evento.

    Si la conectividad mejora y vuelve a permitir la transmisión de vídeo, el objeto OTSubscriber envía un videoEnabled y el abonado reanuda la recepción de vídeo.

    Esta función solo está disponible en las sesiones que utilizan OpenTok Media Router (sesiones con el modo multimedia (configurado en «enrutado»), no en sesiones en las que el modo multimedia esté configurado en «retransmitido».

    Al publicar un flujo, puede evitar que se desactive su vídeo debido a la calidad del flujo. Establezca audioFallbackEnabled a false en el properties Pasar el objeto «prop» al componente OTPublisher.

  • "SubscriberPropertyChanged" — El suscriptor ha activado o desactivado su suscripción al canal de vídeo, configurando subscribeToVideo a «false» en el properties prop pasado al componente OTSubscriber.

  • "CodecNotSupported" - El abonado ha dejado de abonarse al vídeo debido a un códec incompatible (consulte la sección Códecs de vídeo (Guía para desarrolladores).

El objeto OTSubscriber gestiona videoEnabled cuando se reanude el vídeo:

El reason La propiedad del objeto del evento `videoEnabled` define el motivo por el que se ha activado el vídeo. Se puede establecer en uno de los siguientes valores:

  • "PublisherPropertyChanged" — La editorial ha reanudado la publicación de vídeos.

  • "QualityChanged" — El OpenTok Media Router reanudó el envío de vídeo al suscriptor en función de los cambios en la calidad de la transmisión. Esta función del OpenTok Media Router hace que el suscriptor interrumpa la transmisión de vídeo cuando la conectividad se deteriora y la reanude si la calidad de la transmisión mejora.

    Esta función solo está disponible en las sesiones que utilizan OpenTok Media Router (sesiones con el modo multimedia (configurado en «enrutado»), no en sesiones en las que el modo multimedia esté configurado en «retransmitido».

  • "SubscriberPropertyChanged" — El suscriptor ha activado o desactivado su suscripción al canal de vídeo, configurando subscribeToVideo a «false» en el properties prop pasado al componente OTSubscriber.

  • «CodecNotSupported» — El vídeo del suscriptor se activó tras un cambio de códec desde uno incompatible (véase el Códecs de vídeo (Guía para desarrolladores).

Detectar cuándo cambian las dimensiones del vídeo de una transmisión

Las dimensiones del vídeo de una retransmisión pueden cambiar si se modifica el tamaño de una retransmisión publicada desde un dispositivo móvil, debido a un cambio en la orientación del dispositivo. También puede ocurrir si la fuente del vídeo es una ventana de pantalla compartida y el usuario que publica la retransmisión cambia el tamaño de la ventana que sirve de fuente para la retransmisión.

Cuando cambian las dimensiones del vídeo de una transmisión, el objeto Session emite un evento «streamPropertyChanged», con el changedProperty propiedad del evento establecida en "videoDemensions".

Obtener estadísticas de flujos

Para obtener las estadísticas de audio y vídeo de los abonados, añada controladores de eventos para los botones audioNetworkStats y videoNetworkStats enviados por el OTSubscriber. Proporcionan información sobre el flujo del suscriptor, incluyendo lo siguiente:

  • Número total de paquetes de audio y vídeo perdidos
  • Número total de paquetes de audio y vídeo recibidos
  • Número total de bytes de audio y vídeo recibidos
  • La frecuencia de fotogramas media actual de los vídeos
<OTSubscriber
  eventHandlers={{
    audioNetworkStats: event => {
      console.log('subscriber audioNetworkStats event', event);
    },
    videoNetworkStats: event => {
      console.log('subscriber videoNetworkStats event', event);
    },
  }}
/>

Para obtener estadísticas más detalladas sobre la transmisión, utiliza el método `Subscriber.getRtcStatsReport()` del objeto `OTSubscriber`. Este método devuelve una promesa que, si se ejecuta correctamente, se resuelve con una representación JSON de un RtcStatsReport para el flujo suscrito:

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