Diffusion de flux — Web

Une fois que vous avez connecté à une sessionvous pouvez publier un flux que les autres clients connectés à la session peuvent visualiser.

Cette rubrique comprend les sections suivantes :

Publication d'un flux

Pour publier un flux, ajoutez un composant OTPublisher en tant qu'enfant de l'objet OTSession :

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

L'éditeur démarre la diffusion en continu lorsque le client se connecte à la session. L'objet OTPublisher envoie une commande streamCreated lorsqu'il commence à diffuser des informations dans la session. Il envoie un error même en cas d'erreur lors de la publication. Définissez un eventHandlers du composant OTPublisher, et définir la propriété streamCreated et error de cet objet à des fonctions de rappel :

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

Vérifier si un client dispose de capacités de publication

Une fois connecté à une session, vous pouvez vérifier si le client est en mesure de publier. Créez une référence à l'objet OTSession, puis appelez sa méthode getCapabilites() dans la méthode sessionConnected gestionnaire d'événements. Cette méthode renvoie une promesse contenant un objet qui inclut un canPublish de la propriété. Vous pouvez ensuite procéder à une publication conditionnelle en fonction de cette valeur :

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;

Pour publier, le client doit se connecter à la session à l'aide d'un jeton auquel est attribué un code rôle qui soutient la publication.

Configuration de la caméra utilisée par l'éditeur

Vous pouvez demander à l'éditeur d'utiliser l'appareil photo orienté vers l'arrière de l'appareil en définissant une valeur de properties du composant OTPublisher et en définissant la propriété cameraPosition de cet objet à "back":

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

Notez que vous pouvez également diffuser un flux de partage d'écran, c'est-à-dire un flux dont la source est l'écran du client et non une caméra. Pour plus d'informations, consultez Partage d'écran.

Empêcher un éditeur de diffuser en continu vers une session

Vous pouvez empêcher un éditeur de diffuser en continu vers la session en le démontant (c'est-à-dire en le supprimant du composant OTSession parent). Par exemple, le code suivant désactive la diffusion d'un flux après 30 secondes :

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;

Notez que vous pouvez interrompre séparément la diffusion de la vidéo ou de l'audio (tout en continuant à diffuser). Pour plus d'informations, consultez Réglage de l'audio et de la vidéo.

Détection de la sortie d'une session d'un flux publié

L'objet OTPublisher envoie un streamDestroyed événement déclenché lorsque la diffusion vers la session s'arrête :

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

Réglage de la résolution vidéo d'un flux

Pour définir une résolution vidéo recommandée pour un flux publié, définissez le paramètre resolution de la propriété properties vous passez dans le OTPublisher de la composante :

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

Les resolution est une chaîne de caractères définissant la résolution souhaitée pour la vidéo. Le format de la chaîne est le suivant _width_x_height, où la largeur et la hauteur sont exprimées en pixels. Les valeurs valides sont « 1920x1080 », « 1280x720 », « 640x480 » et « 320x240 ». La vidéo publiée n'utilisera la résolution souhaitée que si la configuration du client la prend en charge. Certains appareils et clients ne prennent pas en charge l'ensemble de ces paramètres de résolution.

Remarque : Voir le Guide du développeur 1080p pour les considérations relatives à l'utilisation de la résolution 1080p.

Réglage de la fréquence d'images d'un flux

Pour définir une résolution vidéo recommandée pour un flux publié, définissez le paramètre frameRate de la propriété properties vous passez dans le OTPublisher de la composante :

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

Définissez la valeur correspondant à la fréquence d'images souhaitée, en images par seconde, pour la vidéo. Les valeurs valides sont 30, 15, 7 et 1.

Pour les sessions qui utilisent OpenTok Media Router (sessions avec le mode média (réglé sur « routed »), la réduction du nombre d'images par seconde diminue proportionnellement la bande passante maximale que le flux peut utiliser. Cependant, lors d'une session avec le mode média est réglé sur relayed, la réduction de la fréquence d'images ne réduit pas la bande passante du flux.

Définition du débit maximal d'un flux

Vous pouvez définir le débit maximum d'un flux publié. La définition du maximum peut aider à réduire la consommation de bande passante lorsqu'un utilisateur se se connecte à partir d'une connexion payante. Voir cette documentation.

Obtenir des statistiques sur le flux d'un éditeur

OTPublisher audioNetworkStats et audioNetworkStats Les événements fournissent un tableau d'objets définissant les statistiques audio ou vidéo actuelles de l'éditeur. Pour un éditeur participant à une session acheminée (c'est-à-dire une session qui utilise le Routeur multimédia OpenTok), ces tableaux d'événements contiennent chacun un objet définissant les statistiques relatives au flux audio ou vidéo envoyé au routeur multimédia OpenTok. Dans une session relayée, le tableau contient un objet pour chaque abonné au flux publié. Chaque objet du tableau possède les propriétés suivantes :

  • videoBytesSent — Nombre total d'octets audio et vidéo envoyés
  • videoPacketsSent — Nombre total de paquets audio et vidéo envoyés
  • videoPacketsSent — Nombre total de paquets audio et vidéo perdus

De plus, pour un éditeur dans une session relayée, chaque objet du tableau contient les deux propriétés suivantes :

  • connectionId — L'identifiant unique de la connexion du client abonné, qui correspond à l' connectionId de la propriété connectionCreated événement lié à la connexion de ce client.

  • subscriberId — L'identifiant unique de l'abonné.

Le code suivant enregistre ces statistiques pour le flux de l'éditeur toutes les secondes :

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

Pour obtenir des statistiques plus détaillées sur les flux, utilisez la fonction OTPublisher.getRtcStatsReport() méthode. L'appel de cette méthode entraîne l'envoi par l'instance OTPublisher d'un rtcStatsReport événement :

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

Pour un éditeur dans une session acheminée, le tableau d'événements comprend un objet définissant les statistiques du flux envoyé au routeur multimédia OpenTok. Dans une session relayée, le tableau comprend un objet définissant les rapports de statistiques RTC pour chaque abonné au flux publié. Chaque objet du tableau possède un jsonArrayOfReports propriété qui contient les données. La structure du tableau JSON est similaire au format de l'objet RtcStatsReport implémenté dans les navigateurs Web (voir la documentation Mozilla). Voir également cette documentation du W3C.

Appliquer des filtres et des effets à une vidéo publiée

Vous pouvez appliquer des filtres vidéo à une vidéo publiée — voir ce sujet.

Définition de conseils sur le contenu vidéo pour améliorer les performances de la vidéo dans certaines situations

Vous pouvez définir un indice de contenu vidéo afin d'améliorer la qualité et les performances d'une vidéo publiée. Cela peut s'avérer utile dans certaines situations :

  • Lors de la publication d'une vidéo de partage d'écran, celle-ci contiendra principalement du texte ou du contenu vidéo.

  • Lorsque vous utilisez une source vidéo provenant d'une caméra, si vous préférez réduire la fréquence d'images tout en conservant la résolution, vous pouvez définir l'indicateur de contenu sur « texte » ou « détail ». Dans une session acheminée, l’éditeur enverra un flux en pleine résolution à faible fréquence d’images et, si les conditions réseau le permettent, un flux en pleine résolution à fréquence d’images normale. L’OpenTok Media Router transmettra l’un de ces flux aux abonnés.

Cela indique au client d'utiliser des méthodes d'encodage ou de traitement mieux adaptées au type de contenu que vous spécifiez.

Régler le videoContentHint propriété d'OTPublisher properties prop :

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

Définissez le paramètre « video content hint » sur l'une des valeurs suivantes :

  • "" — Aucune indication n'est fournie (valeur par défaut). Le client de publication déterminera, au mieux, comment le contenu vidéo doit être traité.

  • « mouvement » — La piste doit être traitée comme si elle contenait une vidéo dans laquelle le mouvement joue un rôle important. Vous pouvez, par exemple, utiliser ce paramètre pour un flux vidéo de partage d'écran contenant des séquences vidéo.

  • « détail » — La piste doit être traitée comme si les détails de la vidéo revêtaient une importance particulière. Vous pouvez, par exemple, utiliser ce paramètre pour un flux vidéo de partage d'écran contenant du texte, des peintures ou des dessins au trait.

  • « texte » — La piste doit être traitée comme si les éléments textuels revêtaient une importance particulière. Vous pouvez, par exemple, utiliser ce paramètre pour un flux vidéo de partage d'écran contenant du contenu textuel.

Avec les indications de contenu « text » et « detailed », le client s'efforce de conserver une haute résolution, même s'il doit pour cela réduire la fréquence d'images de la vidéo. Avec l'indication de contenu « motion », le client réduit la résolution afin d'éviter que la fréquence d'images ne ralentisse.

Pour en savoir plus sur ces options, consultez le Projet de travail du W3C.

Si vous pouvez vous accommoder d'une fréquence d'images réduite, vous pouvez également envisager limiter la fréquence d'images des flux auxquels on est abonné.

Autres options audio et vidéo

Consultez le guide du développeur pour Réglage de l'audio et de la vidéo.