Rejoindre une session

Dans ce guide, vous apprendrez à connecter votre application à une session vidéo.

Prérequis

Vous aurez besoin d'un Account Video API de Vonage valide, si vous n'en avez pas, vous pouvez s'inscrire pour un essai gratuit.

Vous devez également vous assurer que vous disposez a créé une session et a généré un jeton pour tous les utilisateurs concernés.

Initialisation d'un objet Session

Avant de pouvoir vous connecter à une session, vous devez instancier un objet session à l'aide de l'une des options suivantes SDK clients disponibles.

Instanciez un objet Session en appelant la fonction OT.initSession() avec votre identifiant d'application et l'identifiant de session approprié :

// Replace with your application ID and session ID:
var session = OT.initSession(applicationId, sessionId);

Les OT.initSession() renvoie un objet Session, par l'intermédiaire duquel les appels ultérieurs à l'API sont effectués.

Notez que l'appel à la fonction OT.initSession() n'est pas créer une session ; il crée un objet Session JavaScript, qui représente une session existante. Vous pouvez créer une session à l'aide du SDK côté serveur. Voir Création d'une session.

Si le navigateur de l'utilisateur ne prend pas en charge WebRTC, l'appel à OT.initSession() la page affiche un message à l'intention de l'utilisateur. Pour vérifier la prise en charge de WebRTC et empêcher l'affichage de ce message, vous pouvez appeler la fonction OT.checkSystemRequirements() avant d'appeler la méthode OT.initSession():

if (OT.checkSystemRequirements() == 1) {
  var session = OT.initSession(applicationId, sessionId);
} else {
  // The client does not support WebRTC.
  // You can display your own message.
}

Connexion à une session

Une fois que vous avez un identifiant de session et que vous avez initialisé un objet de session en l'utilisant, l'étape suivante consiste à se connecter à la session.

Découvrez comment vous connecter aux sessions ci-dessous en sélectionnant la plate-forme/langue de votre choix :

Lorsque vous ajoutez un composant OTSession, il se connecte automatiquement à la session API Video de Vonage.

<OTSession
  applicationId="your-application-ID"
  sessionId="your-session-id"
  token="your-session-token"
>
  <OTPublisher/>
  <OTSubscriber/>
</OTSession>

Remplacer your-application-ID, your-session-idet your-session-token avec votre Clé API, a ID de la sessionet un jeton pour la session.

Notez que vous ajoutez le OTPublisher et OTSubscriber et les enfants du OTSession de la composante.

Vous pouvez passer un error et sessionConnected dans les gestionnaires d'événements de la OTSession composant. Le gestionnaire d'événements d'erreur est appelé si le client ne parvient pas à se connecter à la session. Et le gestionnaire d'événement sessionConnected est appelé lorsque le client se connecte à la session :

<OTSession
  applicationId="your-application-ID"
  sessionId="your-session-id"
  token="your-session-token"
  eventHandlers={{
    error: event => {
        console.log('error', event);
      },
    sessionConnected: event => {
      console.log('session connected', event);
    },
  }}
>
  <OTPublisher style={{ width: 100, height: 100 }}/>
  <OTSubscriber style={{ width: 100, height: 100 }} />
</OTSession>

Déconnexion d'une session

Apprenez à déconnecter un utilisateur d'une session.

Le client se déconnecte de la session lorsque vous démontez le fichier OTSession de la composante.

Détection de la connexion et de la déconnexion des clients

Apprenez à détecter quand un client se connecte et se déconnecte d'une session.

Les OTSession envoie un connectionCreated lorsqu'un nouveau client (à l'exception du vôtre) se connecte à la session. L'objet OTSession envoie un connectionDestroyed lorsque d'autres clients quittent la session. Ces événements sont définis par la directive ConnectionEvent qui dispose d'une classe connection qui est un objet Connexion pour la connexion (créée ou détruite) liée à l'événement :

let this.connectionCount = 0;
const this.sessionEventHandlers = {
  connectionCreated: function (event) {
    connectionCount++;
    if (event.connection.connectionId != session.connection.connectionId) {
      console.log('Another client connected. ' + connectionCount + ' total.');
    }
  },
  connectionDestroyed: function connectionDestroyedHandler(event) {
    connectionCount--;
    console.log('A client disconnected. ' + connectionCount + ' total.');
  }
  sessionConnected: function (event) {
    // include your own client's connection in the count
    connectionCount++;
  },
};

// reference later in JSX:

<OTSession
  applicationId={this.apiKey}
  sessionId={this.sessionId}
  token={this.token}
  eventHandlers={this.sessionEventHandlers}
>
    {/* ... */}

Détection de la déconnexion

Vous configurez un EventListner pour exécuter une fonction si un utilisateur est déconnecté d'une session.

Par exemple, la fonction peut avertir l'utilisateur lorsqu'il perd la connexion et n'est plus connecté à la session.

Lorsque votre client se déconnecte d'une session, la fonction OTSession envoie un sessionDisconnected événement :

<OTSession
  applicationId="your-api-key"
  sessionId="your-session-id"
  token="your-session-token"
  eventHandlers={{
    sessionDisconnected: event => {
        console.log('disconnected', event);
      },
    connected: event => {
      console.log('subscriber connected', event);
    },
  }}
>
  <OTPublisher style={{ width: 100, height: 100 }}/>
  <OTSubscriber style={{ width: 100, height: 100 }} />
</OTSession>

Reconnexion automatique

Les clients tenteront de se reconnecter automatiquement à une session qu'ils déconnectent inopinément (par exemple, en raison d'une interruption de la connectivité réseau).

Il n'est pas nécessaire d'ajouter du code pour que les clients se reconnectent automatiquement, à moins que vous ne souhaitiez répondre aux événements déclenchés lorsque votre client se déconnecte et se reconnecte.

Les clients tenteront de se reconnecter automatiquement à une session qu'ils déconnectent de manière inattendue (par exemple, en raison d'une perte de connectivité réseau). Il n'est pas nécessaire d'ajouter du code pour que les clients se reconnectent automatiquement, à moins que vous ne souhaitiez répondre aux événements envoyés lorsque votre client se déconnecte et se reconnecte.

Lorsque la connexion est interrompue et que le client tente de se reconnecter, la fonction OTSession envoie un sessionReconnecting événement. Lorsque la connexion est rétablie, le Session envoie un sessionReconnected. Si le client ne peut pas rétablir la connexion, il se déconnecte de la session et l'objet Session envoie la commande sessionDisconnected.

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 déconnexion :

<OTSession
  applicationId={this.apiKey}
  sessionId={this.sessionId}
  token={this.token}
  eventHandlers={{
    sessionReconnecting: event => {
      // Display a user interface notification.
    },
    sessionReconnected: event => {
      // Adjust user interface.
    },
    sessionDisconnected: event => {
      // Adjust user interface.
    },
  }
>
    {/* ... */}

Lorsque votre client se déconnecte temporairement d'une session, les objets Subscriber des clients souscrivant à un flux que vous publiez envoient des événements lorsque votre flux publié tombe et lorsque (et si) il reprend automatiquement. Pour plus d'informations, voir Reconnexion automatique.

Résolution des problèmes de connexion de session (JavaScript)

Les Session.connect() possède une fonction de rappel à laquelle est transmise une valeur facultative de error paramètre. Si ce paramètre est présent et défini (pas null ou undefined), une erreur s'est produite lors de la connexion. La recherche de cette erreur dans votre code vous aidera à comprendre pourquoi l'utilisateur final n'a pas pu se connecter :

session.connect(token, function(err) {
  if (err) {
    // handle error
  } else {
    // connection succeeded
  }
});

Un grand nombre d'erreurs qui reviennent lors d'une tentative de connexion sont dues à des jetons non valides ou expirés.

Une autre raison fréquente de l'échec de la connexion à une session est la connexion Internet de l'utilisateur final. Voici quelques exemples :

  • L'utilisateur final a perdu sa connexion internet
  • L'utilisateur final a des ports communs bloqués parce qu'il se trouve sur un réseau restrictif.

Il en résultera une erreur avec le code 1006. Nous vous recommandons de traiter cette erreur à l'aide du code ci-dessous. D'autres raisons peuvent expliquer l'échec de la connexion à une session, notamment le fait que les serveurs vidéo de Vonage soient hors service ou qu'une erreur inattendue se soit produite (telle qu'une erreur de niveau 500 dans le serveur). Bien que cela ne se produise pas souvent, c'est une bonne pratique de gérer ces erreurs.

Si vous suivez ces instructions, votre code de gestion des erreurs devrait ressembler à ce qui suit :

session.connect(token, function(err) {
  if (err) {
    if (err.name === "OT_NOT_CONNECTED") {
      showMessage('Failed to connect. Please check your connection and try connecting again.');
    } else {
      showMessage('An unknown error occurred connecting. Please try again later.');
    }
  }
});

Vous pouvez perdre votre connexion après vous être connecté avec succès à une session. Vous pouvez gérer ce cas en écoutant la commande sessionDisconnected avec pour motif "networkDisconnected" :

session.on({
  sessionDisconnected: function(event) {
    if (event.reason === 'networkDisconnected') {
      showMessage('You lost your internet connection.'
        + 'Please check your connection and try connecting again.');
    }
  }
});

Résolution des problèmes de connexion de session (React Native)

Un grand nombre d'erreurs qui reviennent lors d'une tentative de connexion sont dues à des jetons non valides ou expirés. Veillez à respecter les bonnes pratiques en matière de jetons décrites dans le document suivant ici.

Une autre raison fréquente de l'échec de la connexion à une session est la connexion Internet de l'utilisateur final. Voici quelques exemples :

  • L'utilisateur final a perdu sa connexion internet
  • L'utilisateur final a des ports communs bloqués parce qu'il se trouve sur un réseau restrictif.