Publier : Principes de base

Ce guide couvre les étapes essentielles de la publication d'un flux : création d'un éditeur, démarrage du flux dans une session, arrêt en toute sécurité et destruction des ressources lorsque vous avez terminé.

Un objet éditeur est utilisé pour capturer un flux audio-vidéo à partir du microphone et de la caméra du système pour l'utiliser dans une session vidéo Vonage.

Vous pouvez également utiliser un éditeur pour publier un partage d'écran flux vidéo.

Initialisation d'un objet éditeur

Les OT.initPublisher() initialise et renvoie un objet éditeur. L'objet Publisher représente la vue d'une vidéo que vous publiez :

var publisher;
var targetElement = 'publisherContainer';

publisher = OT.initPublisher(targetElement, null, function(error) {
  if (error) {
    // The client cannot publish.
    // You may want to notify the user.
  } else {
    console.log('Publisher initialized.');
  }
});

Les OT.initPublisher() prend trois paramètres :

  • targetElement- (Facultatif) Définit l'élément DOM que la vidéo de l'éditeur remplace.

  • properties- (Facultatif) Un ensemble de propriétés qui personnalisent l'éditeur. Les propriétés properties comprend également des options permettant de spécifier un périphérique d'entrée audio et vidéo utilisé par l'éditeur. Le paramètre properties comprend également des options permettant de personnaliser l'apparence de la vue dans la page HTML (voir Personnaliser l'interface utilisateur) et choisir de publier ou non des fichiers audio et vidéo (voir Publication d'audio ou de vidéo uniquementPour plus d'options de l'éditeur, voir la documentation de l'option properties de l'OT.initPublisher() méthode.

  • completionHandler- (Facultatif) Un gestionnaire d'achèvement qui spécifie si l'éditeur a été instancié avec succès ou avec une erreur.

Vous pouvez transmettre cet objet Publisher à la fonction Session.publish() pour publier un flux dans une session.

Avant d'appeler Session.publish()Vous pouvez utiliser cet objet Publisher pour tester le microphone et la caméra attachés au Publisher.

Les insertMode de la propriété properties du paramètre OT.initPublisher() spécifie comment l'objet Publisher sera inséré dans le DOM HTML, par rapport à l'objet targetElement paramètre. Ce paramètre peut prendre l'une des valeurs suivantes :

  • "replace" - L'objet Publisher remplace le contenu de l'élément targetElement. Il s'agit de la valeur par défaut.
  • "after" - L'objet Publisher est un nouvel élément inséré après l'élément cible dans le DOM HTML. (Le Publisher et le targetElement ont tous deux le même élément parent).
  • "before" - L'objet Publisher est un nouvel élément inséré avant l'élément cible dans le DOM HTML. (Le Publisher et le targetElement ont tous deux le même élément parent).
  • "append" - L'objet Publisher est un nouvel élément ajouté en tant qu'enfant de l'élément cible. S'il existe d'autres éléments enfants, l'objet Publisher est ajouté en tant que dernier élément enfant de l'élément cible.

Par exemple, le code suivant ajoute un nouvel objet Publisher en tant qu'enfant d'un objet publisherContainer Élément DOM :

// Try setting insertMode to other values: "replace", "after", or "before":
var publisherProperties = {insertMode: "append"};
var publisher = OT.initPublisher('publisherContainer', publisherProperties, function (error) {
  if (error) {
    console.log(error);
  } else {
    console.log("Publisher initialized.");
  }
});

Publication d'un flux

Une fois que vous avez un objet Publisher et un sessionl'étape suivante consiste à le transmettre à l'objet session pour commencer la diffusion en continu.

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

<OTSession
  applicationId="your-application-id"
  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 s'il y a un événement error l'édition. Fixer 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);
  },
}}/>

Définir une préférence de dégradation de l'éditeur

Lorsque la bande passante ou l'unité centrale sont limitées, le moteur vidéo peut réduire la fréquence d'images et/ou la résolution de la vidéo de l'éditeur pour s'adapter à ces limitations.

La préférence de dégradation est un paramètre de configuration qui permet de modifier ce comportement.

Les développeurs sont chargés de définir et d'appliquer les préférences de dégradation en fonction de leur cas d'utilisation et de leurs exigences.

Il s'agit d'une préférence, ce qui signifie que le moteur vidéo essaiera de suivre la préférence sélectionnée, mais il n'y a aucune garantie quant au résultat.

Cette préférence peut se comporter différemment lors de l'utilisation de vidéo évolutiveoù le moteur vidéo peut décider de supprimer des couches au lieu de dégrader la résolution.

Indice de contenu et la préférence de dégradation ont des objectifs différents mais liés : L'indication de contenu décrit le type de contenu transmis, tandis que la préférence de dégradation contrôle la stratégie d'encodage. Lorsque vous définissez une indication de contenu, le moteur vidéo détermine automatiquement la préférence de dégradation appropriée (par exemple, "texte" sélectionne automatiquement le maintien de la résolution). Une préférence de dégradation explicitement définie remplacera cette sélection automatique.

Setting the degradation preference

Pour définir la préférence de dégradation de l'éditeur, utilisez publisher.setDegradationPreference avec l'une des options disponibles dans DegradationPreference:

publisher.setDegradationPreference(DegradationPreference.DegradationPreferenceMaintainResolution);

Le texte suivant DegradationPreference sont disponibles :

  • DegradationPreferenceNotSet: Valeur par défaut. Le moteur vidéo décidera de la préférence de dégradation optimale.

  • DegradationPreferenceMaintainFrameRateAndResolution: Le moteur vidéo essaiera de maintenir la fréquence d'images stable et de ne pas réduire la résolution.

  • DegradationPreferenceMaintainFrameRate: Le moteur vidéo s'efforce de maintenir la fréquence d'images constante, mais peut réduire la résolution si nécessaire.

  • DegradationPreferenceMaintainResolution: Le moteur vidéo ne réduit pas la résolution mais peut réduire la fréquence d'images si nécessaire.

  • DegradationPreferenceBalanced: Le moteur vidéo tente de trouver un équilibre entre la réduction de la résolution et de la fréquence d'images lorsque cela est nécessaire.

Getting the current degradation preference

Pour récupérer la préférence de dégradation de l'éditeur actuellement configurée, utilisez publisher.getDegradationPreference:

DegradationPreference preference = publisher.getDegradationPreference();

Empêcher un éditeur de diffuser en continu

Contrôlez qui peut publier et empêchez un éditeur de diffuser en continu vers une session lorsque cela est nécessaire.

Vous pouvez empêcher l'éditeur de diffuser des flux vers la session en le démontant (en le supprimant du composant OTSession parent). Par exemple, le code suivant arrête la publication 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
          applicationId={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 arrêter individuellement l'envoi de vidéo ou d'audio (tout en continuant à publier).

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

L'objet OTPublisher envoie un streamDestroyed lorsqu'il cesse d'alimenter la session :

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

Suppression d'un éditeur (nettoyage)

Vous pouvez supprimer un éditeur en appelant son destroy() méthode. Appeler destroy() supprime l'objet Publisher et le retire du DOM HTML :

publisher.destroy();