Guide de migration Twilio (Web)

Ce guide vous explique comment migrer votre implémentation Twilio Video existante vers le SDK vidéo de Vonage. Il se concentre sur le SDK Vonage Video API et fait correspondre les concepts Twilio à leurs équivalents Vonage afin que vous puissiez déplacer votre application avec un minimum de friction.

Vue d'ensemble

Les API Video de Twilio et de Vonage ont des concepts très similaires. Ce guide de démarrage a pour but de vous aider à migrer votre application vidéo. La principale différence est qu'avec Twilio, vous devez créer une salle SID alors que dans Vonage, vous créez un sessionId. Vous créez ensuite des jetons d'authentification qui sont utilisés du côté client pour se connecter aux salles dans Twilio ou aux sessions dans Vonage. Les diagrammes suivants détaillent les principales différences :

Obtenir les informations d'identification du SDK vidéo

Créer un Compte de développeur vidéo pour accéder au tableau de bord client de l'API de Vonage. Une fois inscrit, vous devrez créer une Applications Vonage avec la capacité vidéo activée. Une fois que vous êtes connecté au tableau de bord du client :

Allez dans "Construire et gérer", puis dans "Construire et gérer".Applications'.
Cliquez sur '+ Créer une nouvelle application.'
Saisissez un nom pour l'application.
Si nécessaire, modifiez la clé API pour le compte auquel cette application sera enregistrée. Pour la plupart des clients, vous pouvez laisser le paramètre présélectionné.
Sous "Authentification", cliquez sur "Générer une clé publique et privée". Un téléchargement démarre pour la clé privée, qui sera utilisée pour authentifier votre Account lorsque vous accéderez à nos API. Par exemple, vous l'utiliserez avec l'API SDK de serveur pour gérer vos sessions vidéo.
Faites défiler vers le bas et activez l'option "Video". Nous n'avons pas besoin de saisir d'URL ou de paramètres à ce stade, mais si vous souhaitez activer différents rappels pour les événements, vous pouvez saisir les URL pour votre application ici.
Faites défiler vers le bas et cliquez sur "Générer une nouvelle demande".
En haut de la page Applications figure l'identifiant de l'application que vous venez de créer. Cliquez sur l'icône Copier pour l'enregistrer pour plus tard.

Installer

Installez le Vonage Client SDK pour JS :

npm install @vonage/client-sdk-video

Vous pouvez également utiliser la balise de script CDN :

Authentification

Le SDK vidéo de Vonage utilise des jetons pour authentifier les utilisateurs. Lors de la génération d'un jeton, vous pouvez définir le rôle de l'utilisateur (abonné, éditeur ou modérateur). En option, vous pouvez également assigner une chaîne de métadonnées au jeton (c'est-à-dire pour identifier le client connecté). Veuillez vous référer à notre Créer un jeton Article de présentation pour connaître toutes les options que vous pouvez utiliser lors de la génération de jetons. Les jetons doivent être générés côté serveur et envoyés côté client à la demande.

Créer une session vidéo

A "Session" est comme un "chambre". Tous les clients utilisant le même identifiant de session pourront communiquer entre eux.

Comme les jetons, les sessions sont créées côté serveur. Veuillez vous référer à notre Article de présentation de la création de session pour plus de détails, y compris les différentes options de configuration disponibles.

Pour créer une session et générer un jeton, nous vous recommandons d'utiliser l'un de nos produits SDK serveur.

Cet extrait de code en NodeJS montre comment vous pouvez créer une API simple pour générer des jetons et des identifiants de session dans votre backend.

const { Auth } = require('@vonage/auth');
const { Video } = require('@vonage/server-sdk');

const credentials = new Auth({
  applicationId: process.env.VONAGE_APPLICATION_ID,
  privateKey: process.env.PRIVATE_KEY_PATH,
});

/**
 * Mapping of room names to session IDs
 * ie:
 *   sessions = {
 *     'room1': '12312312-3811-4726-b508-e41a0f96c68f',
 *     'my-room': '7c0680fc-6274-4de5-a66f-d0648e8d3ac2'
 *   }
 */
let sessions = {};

app.get('/sessionInfo', async (request, response) => {
  try {
    const { identity, roomName } = request.query;

    // Token options, this is optional
    let tokenOptions = {
      role: 'publisher', // subscriber, publisher or moderator
      data: `username=${identity}`, // metadata describing the connection
      expireTime: new Date().getTime() / 1000 + 5 * 60 , // Token expired after five minutes
    };

    // Check if we already have a session ID for this room
    if (sessions[roomName]) {
      const token = videoClient.generateClientToken(sessions[roomName], tokenOptions);

      return response.json({
        applicationId: process.env.VONAGE_APPLICATION_ID,
        sessionId: sessions[roomName],
        token
      });
    } else {
      // Create a new session since we do not have one cached by that name
      const session = await videoClient.createSession({ mediaMode: 'routed' });
      sessions[roomName] = session.sessionId;

      // Generate a token.
      const token = videoClient.generateClientToken(session.sessionId, tokenOptions);

      response.json({
        applicationId: process.env.VONAGE_APPLICATION_ID,
        sessionId: session.sessionId,
        token
      });
    }
  } catch (e) {
    console.log('Error creating session or token' + e);
  }

});

Les applicationID, sessionIdet jeton du côté du serveur sera utilisé du côté du client pour authentifier la session du client.

Se connecter à une session vidéo

Pour connecter un point d'extrémité client à une session Vonage Video, vous avez besoin d'un ID d'application, d'un ID de session et d'un jeton.

Twilio

import * as TwilioVideo from 'twilio-video';

var twilioVideo = TwilioVideo;
var twilioRoom;

twilioVideo
  .connect(TOKEN, {
    name: 'yourName',
    audio: false,
    video: false,
    dominantSpeaker: true,
  })
  .then(room => {
    twilioRoom = room;
  });

Vonage

const session = OT.initSession(applicationId, sessionId);

session.connect(token, error => {
  if (error) {
    handleError(error);
  }
});

Vidéo d'édition

Les SDK vidéo de Vonage gèrent la qualité vidéo automatiquement, en fonction des conditions du réseau et des capacités de l'appareil. Cela dit, vous pouvez configurer certaines propriétés, telles que la résolution, la fréquence d'images et le repli audio. Pour plus d'informations, veuillez consulter la liste exhaustive des SDK de Vonage. toutes les options configurables par l'éditeur.

Remarque : un seul objet éditeur peut gérer à la fois l'audio et la vidéo. Vous pouvez contrôler sélectivement l'audio ou la vidéo en utilisant les méthodes fournies par cet objet.

Allumer l'appareil photo

Une fois que votre session est connectée, vous pouvez créer une piste vidéo pour montrer l'aperçu local - chez Vonage, nous appelons cela l'aperçu de l'éditeur.

Twilio

Vonage

À ce stade, vous devriez voir l'aperçu local, mais il n'est pas encore publié dans la session. Pour publier la vidéo dans la session, ajoutez la ligne de code suivante :

session.publish(publisher, handleError);

Mettre l'appareil hors tension

Le SDK de Vonage offre des méthodes simples pour contrôler la caméra.

Twilio

twilioRoom.localParticipant.videoTracks.forEach(publication => {
  publication.unpublish();
  publication.track.stop();
  var selfTwilioVideo = document.getElementById('twilio-self-view-div');
  selfTwilioVideo?.querySelector('video')?.remove();
});

Vonage

Cela ne fera qu'arrêter la publication de la vidéo dans la session. Vous pouvez toujours voir votre aperçu local

publisher.publishVideo(false);

// This will only stop publishing all media (audio and video) to the session. You can still see your local preview
session.unpublish(publisher);

// To completely destroy the publisher and remove the local preview
publisher.destroy();

Rendu d'une vidéo d'utilisateur distant

Semblable à celui de Twilio participantConnected et trackSubscribed Vonage déclenche également les événements connectionCreated et streamCreated lorsqu'un participant distant se connecte à la session et commence à envoyer de la vidéo.

Twilio

Vonage

Audio

Twilio Video est basé sur les pistes, ce qui signifie que vous devez parcourir en boucle chaque piste audio pour démarrer l'audio et ajouter l'élément audio au DOM. Vonage peut gérer à la fois l'audio et la vidéo à l'aide d'un seul objet Publisher. Lorsque vous commencez à publier avec les options par défaut, nous publions à la fois l'audio et la vidéo. Cependant, si vous préférez avoir une session uniquement audio, vous pouvez configurer l'éditeur pour qu'il ne publie pas la vidéo. Pour plus d'informations, veuillez consulter notre liste des options de l'éditeur.

Microphone muet

Lorsque vous utilisez Twilio, vous devez parcourir en boucle chaque piste audio pour couper le microphone. Vonage simplifie cette opération en fournissant une seule méthode invocable.

Twilio

twilioRoom.localParticipant.audioTracks.forEach(publication => {
  publication.track.disable();
});

Vonage

publisher.publishAudio(false);

Débrancher le microphone

Lorsque vous utilisez Twilio Video, vous devez parcourir en boucle chaque piste audio pour rétablir le microphone. Vonage simplifie cette opération en fournissant une seule méthode invocable.

Twilio

twilioRoom.localParticipant.audioTracks.forEach(publication => {
  publication.track.enable();
});

Vonage

publisher.publishAudio(true);

Chat textuel

Vous pouvez échanger des données (c'est-à-dire des messages de chat textuels ou des messages JSON personnalisés) entre les participants individuels d'une session, ainsi qu'avec tous les participants d'une session. Pour ce faire, vous pouvez utiliser notre Client SDK, comme indiqué ci-dessous :

//send data to specific end-point
session.signal({ to: connection1, data: 'hello' }, errorHandler);

//send data to all connected end-points
session.signal({ data: 'hello' }, errorHandler);

Établir des récepteurs d'événements pour recevoir un signal à ce point final.

session.on('signal', function (event) {
  console.log('Signal sent from connection ' + event.from.id);
  // Process the event.data property, if there is any data.
});

Écouteurs d'événements

Vonage et Twilio disposent de récepteurs d'événements pour vous aider à maintenir l'état de tous les participants connectés.

Modifications de la connexion des participants

Ces événements sont déclenchés lorsqu'un point final rejoint la session :

Twilio

twilioRoom.on('participantConnected', participant => {
  // user joined
});

twilioVideo.on('participantDisconnected', participant => {
  // user left
});

Vonage

session.on('connectionCreated', payload => {
  // end-point joined
});

session.on('connectionDestroyed', payload => {
  // end-point left
});

En outre, Vonage envoie des événements pour informer les participants des déconnexions temporaires du réseau et prend en charge reconnexion automatique si la connexion du client est perdue.

Quitter et terminer les sessions

Remplacer le fichier Twilio disconnect avec la fonction Vonage disconnect fonction.

Twilio

twilio.disconnect();

Vonage

session.disconnect();

Plus d'informations :

API REST de Vonage pour la modération de session, l'enregistrement, la diffusion, l'interconnexion SIP, le sous-titrage en direct, etc.
Exemples de Client SDK de Vonage JS
Exemple d'application avec salle d'attente et fonctions avancées.
Mettre en œuvre une application vidéo avec les hooks de React.
Meilleures pratiques pour les applications vidéo dans le bâtiment.

Navigation

Guide de migration Twilio (Web)

Vue d'ensemble

Obtenir les informations d'identification du SDK vidéo

Installer

Authentification

Créer une session vidéo

Se connecter à une session vidéo

Twilio

Vonage

Vidéo d'édition

Allumer l'appareil photo

Twilio

Vonage

Mettre l'appareil hors tension

Twilio

Vonage

Rendu d'une vidéo d'utilisateur distant

Twilio

Vonage

Audio

Microphone muet

Twilio

Vonage

Débrancher le microphone

Twilio

Vonage

Chat textuel

Écouteurs d'événements

Modifications de la connexion des participants

Twilio

Vonage

Quitter et terminer les sessions

Twilio

Vonage

Plus d'informations :