S'abonner à des flux — React Native

Une fois que vous avez connecté à une session, vous pouvez vous abonner aux flux de la session. Lorsque vous vous abonnez à un flux, son flux vidéo s'affiche sur la page du client et son audio est lu.

Cette rubrique comprend les sections suivantes :

S'abonner à un flux

Pour s'abonner à tous les flux de la session, ajoutez un objet OTSubscriber en tant que chile de l'objet OTSession :

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

Une fois le client connecté à la session, l'objet OTSubscriber ajoute des vues pour les vidéos d'abonnés lorsque les flux d'autres clients deviennent disponibles dans la session.

L'objet OTSubscriber envoie un connected événement déclenché lorsqu'un abonné parvient à lancer la diffusion en continu. Il déclenche un error même en cas d'erreur lors de l'abonnement. Définissez un eventHandlers du composant OTSubscriber, et définir la propriété connected et error de cet objet à des fonctions de rappel :

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

Définition des propriétés du flux

Transmettre un properties propriété de l'objet OTSubscriber permettant de définir des propriétés pour tous abonnés :

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

Vous pouvez également définir le streamProperties La propriété OTSubscriber renvoie un objet qui définit les paramètres individuels pour chaque flux. Les propriétés de cet objet sont des paires clé-valeur, dont la clé correspond à l'identifiant du flux et dont la valeur est un objet contenant subscribeToAudio, subscribeToVideo, subscribeToCaptions, preferredResolution, preferredFrameRateet audioVolume règles de remplacement pour l'abonné au flux :

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

Les properties L'objet comprend les propriétés suivantes :

Rendu personnalisé des abonnés

Par défaut, l'OTSubscriber ajoute des vues enfants pour les vidéos des abonnés. Cependant, vous pouvez ajouter une fonction de rendu afin que l'objet OTSubscriber ajoute des abonnés. Cette fonction reçoit en paramètre un tableau d'identifiants de flux :

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>

Utilisez le composant OTSubscriberView pour afficher les flux individuels. Le composant OTSubscriberView hérite des propriétés (telles que style) du composant View de React Native. De plus, il dispose d'un streamId prop que vous utilisez pour transmettre l'identifiant du flux de l'abonné.

Remarque : Les streamProperties La propriété de l'objet OTSubscriber est ignorée si ces composants enfants OTSubscriberView sont ajoutés.

Détecter la création de flux au cours d'une session

L'objet OTSession envoie un streamCreated lorsqu'un nouveau flux (autre que le vôtre) est créé dans une session. Un flux est créé lorsqu'un client publie un flux vers la session. Les streamCreated Un événement est également déclenché pour chaque flux existant dans la session lors de la première connexion.

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

Les streamCreated L'objet « event » contient des informations détaillées sur le flux, notamment les données de connexion, le type de source vidéo (« caméra » ou « écran »), etc. Vous pouvez utiliser ces informations pour déterminer comment les flux sont organisés (ou quels flux inclure) lorsque vous utilisez un

Se désabonner d'un flux

Les abonnés sont automatiquement supprimés lorsque le client de publication cesse de publier. Pour vous désabonner d'un flux en cours, démontez le composant OTSubscriberView correspondant du composant OTSubscriber. Voir Rendu personnalisé des abonnés.

Détecter quand les flux quittent une session

Lorsqu'un flux, autre que le vôtre, quitte une session, l'objet OTSession déclenche un streamDestroyed événement :

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

Les streamDestroyed L'objet « event » possède les propriétés suivantes qui définissent le flux :

  • connection � Un objet correspondant à la connexion qui diffuse le flux. Cela inclut un data bien immobilier comprenant données de connexion (si une valeur a été définie) pour le client.

  • creationTime �L'horodatage (un nombre) correspondant à la création du flux. Cette valeur est exprimée en millisecondes.

  • hasAudio �(Booléen) Indique si le flux contient du son. Cette propriété peut changer si l'éditeur active ou désactive le son. Lorsque cela se produit, l'objet OTSession envoie un streamPropertyChanged événement.

  • hasVideo (Booléen) Indique si le flux contient de la vidéo.

  • name �(Chaîne) Le nom du flux, s'il a été défini lors de sa publication.

videoDimensions : cet objet possède deux propriétés : width et height. Toutes deux sont des nombres. La propriété « width » correspond à la largeur du flux encodé ; la propriété « height » correspond à la hauteur du flux encodé. (Ces valeurs sont indépendantes de la largeur réelle des objets Publisher et Subscriber correspondant au flux.) Ces propriétés peuvent changer si un flux publié depuis un appareil mobile est redimensionné, en fonction d'un changement d'orientation de l'appareil.

  • videoType �Le type de vidéo : soit « caméra », soit « écran ». Une vidéo de type « écran » utilise le partage d'écran du diffuseur comme source vidéo. Cette propriété peut changer si le flux diffusé passe d'une source vidéo « caméra » à une source « partage d'écran ». Pour plus d'informations, consultezPartage d'écran — React Native.

Les hasAudio, hasVideo, videoDimensionset videoType certaines propriétés peuvent changer (par exemple, lorsque l'éditeur active ou désactive la vidéo). Lorsque cela se produit, l'objet OTSession envoie un streamPropertyChanged événement.

Reconnexion automatique

Si un client interrompt sa connexion à un flux souscrit (par exemple, en raison d'une interruption de la connectivité réseau de l'un ou l'autre des clients), il tentera de se reconnecter automatiquement au flux. Lorsque le flux est interrompu et que le client tente de se reconnecter, l'objet OTSubscriber envoie une commande disconnected événement. Lorsque le flux est rétabli, l'objet OTSubscriber envoie un événement connected (événement). Si le client ne peut pas restaurer le flux, l'objet OTSubscriber envoie un événement destroyed événement.

En réponse à ces événements, votre application peut (éventuellement) afficher des notifications d'interface utilisateur indiquant les états de déconnexion temporaire, de reconnexion et de destruction :

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

Réglage de la fréquence d'images et de la résolution

Lors de l'abonnement à un flux qui utilise le fonctionnalité vidéo adaptative, vous pouvez définir la fréquence d'images et la résolution souhaitées pour le flux que le client abonné reçoit depuis le routeur multimédia OpenTok.

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

  • preferredFrameRate — La fréquence d'images souhaitée, exprimée en images par seconde. Les valeurs autorisées sont 30, 15, 7 et 1. Si vous ne définissez pas cette valeur, la fréquence d'images souhaitée sera désactivée et le client utilisera la fréquence d'images la plus élevée disponible.

  • preferredResolution — La résolution préférée. Les valeurs valides sont « 1280x720 », « 640x480 » et « 352x288 ». Si vous ne définissez pas cette valeur, la résolution préférée sera désactivée et le client utilisera la fréquence d'images la plus élevée disponible.

Détection de la désactivation de la vidéo d'un abonné

Lorsque la vidéo d'un abonné est désactivée, l'objet OTSubscriber envoie un message de type videoDisabled événement :

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

Lorsque le routeur multimédia OpenTok désactive la vidéo d'un abonné, vous pouvez souhaiter adapter l'interface utilisateur associée à cet abonné.

La propriété « reason » de l'objet d'événement « videoDisabled » définit la raison pour laquelle la vidéo a été désactivée. Elle peut prendre l'une des valeurs suivantes :

  • "PublisherPropertyChanged" - L'éditeur a cessé de publier des vidéos.

  • "QualityChanged" — Le routeur multimédia OpenTok a cessé d'envoyer la vidéo à l'abonné en raison d'une dégradation de la qualité du flux. Cette fonctionnalité du routeur multimédia OpenTok entraîne la coupure du flux vidéo pour l'abonné lorsque la connexion se détériore. (L'abonné continue de recevoir le flux audio, le cas échéant.)

    Avant d'envoyer cet événement, lorsque la qualité du flux de l'abonné se détériore à un niveau suffisamment bas pour que le flux vidéo risque d'être désactivé, l'objet OTSubscriber déclenche un videoDisableWarning événement.

    Si la connexion s'améliore et permet à nouveau la diffusion de vidéos, l'objet OTSubscriber déclenche un videoEnabled et l'abonné reprend la réception de la vidéo.

    Cette fonctionnalité n'est disponible que dans les sessions utilisant OpenTok Media Router (sessions avec le mode média (réglé sur « routed »), et non dans les sessions dont le mode multimédia est réglé sur « relayed ».

    Lorsque vous publiez un flux, vous pouvez éviter que sa vidéo soit désactivée en raison de la qualité du flux. Définir audioFallbackEnabled à false dans le properties dans le composant OTPublisher.

  • "SubscriberPropertyChanged" - L'abonné a commencé ou arrêté de s'abonner à la vidéo, en définissant subscribeToVideo à « false » dans le properties prop transmis au composant OTSubscriber.

  • "CodecNotSupported" - L'abonné a cessé de s'abonner à la vidéo en raison d'un codec incompatible (voir la section Codecs vidéo guide du développeur).

L'objet OTSubscriber déclenche videoEnabled lorsque la vidéo reprend :

Les reason La propriété de l'objet d'événement `videoEnabled` définit la raison pour laquelle la vidéo a été activée. Elle peut prendre l'une des valeurs suivantes :

  • "PublisherPropertyChanged" - L'éditeur a repris la publication de la vidéo.

  • "QualityChanged" — Le routeur multimédia OpenTok a repris la diffusion de la vidéo à l'abonné en fonction des variations de qualité du flux. Cette fonctionnalité du routeur multimédia OpenTok permet à l'abonné d'interrompre la diffusion du flux vidéo lorsque la connexion se détériore, puis de la reprendre si la qualité du flux s'améliore.

    Cette fonctionnalité n'est disponible que dans les sessions utilisant OpenTok Media Router (sessions avec le mode média (réglé sur « routed »), et non dans les sessions dont le mode multimédia est réglé sur « relayed ».

  • "SubscriberPropertyChanged" - L'abonné a commencé ou arrêté de s'abonner à la vidéo, en définissant subscribeToVideo à « false » dans le properties prop transmis au composant OTSubscriber.

  • « CodecNotSupported » — La vidéo de l'abonné a été activée après un changement de codec à partir d'un codec incompatible (voir la Codecs vidéo guide du développeur).

Détecter les changements de dimensions d'un flux vidéo

Les dimensions d'une vidéo diffusée en direct peuvent changer si la vidéo diffusée depuis un appareil mobile est redimensionnée, en raison d'un changement d'orientation de l'appareil. Cela peut également se produire si la source vidéo est une fenêtre de partage d'écran et que l'utilisateur qui diffuse la vidéo redimensionne la fenêtre servant de source à la diffusion.

Lorsque les dimensions d'une vidéo en streaming changent, l'objet Session déclenche un événement `streamPropertyChanged`, avec le changedProperty propriété de l'événement définie sur "videoDemensions".

Obtenir des statistiques sur les flux

Pour obtenir des statistiques audio et vidéo pour les abonnés, ajoutez des gestionnaires d'événements pour la fonction audioNetworkStats et videoNetworkStats envoyés par l'OTSubscriber. Ces événements fournissent des informations sur le flux de l'abonné, notamment les suivantes :

  • Le nombre total de paquets audio et vidéo perdus
  • Nombre total de paquets audio et vidéo reçus
  • Nombre total d'octets audio et vidéo reçus
  • Taux de rafraîchissement moyen de la vidéo
<OTSubscriber
  eventHandlers={{
    audioNetworkStats: event => {
      console.log('subscriber audioNetworkStats event', event);
    },
    videoNetworkStats: event => {
      console.log('subscriber videoNetworkStats event', event);
    },
  }}
/>

Pour obtenir des statistiques plus détaillées sur le flux, utilisez la méthode `Subscriber.getRtcStatsReport()` de l'objet `OTSubscriber`. Elle renvoie une promesse qui, en cas de succès, se résout en une représentation JSON d'un RtcStatsReport pour le flux souscrit :

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