Twilio-Migrationsanleitung (Web)

In diesem Leitfaden erfahren Sie, wie Sie Ihre bestehende Twilio Video-Implementierung auf das Vonage Video SDK migrieren können. Er konzentriert sich auf die Vonage Video API und ordnet Twilio-Konzepte ihren Vonage-Entsprechungen zu, so dass Sie Ihre Anwendung mit minimaler Reibung verschieben können.

Übersicht

Die Video APIs von Twilio und Vonage haben sehr ähnliche Konzepte. Dieser Leitfaden soll Sie bei der Migration Ihrer Videoanwendung unterstützen. Der Hauptunterschied besteht darin, dass Sie in Twilio einen Raum erstellen müssen SID während Sie bei Vonage eine sessionId. Anschließend erstellen Sie Authentifizierungstoken, die auf der Client-Seite verwendet werden, um eine Verbindung zu Räumen in Twilio oder Sitzungen in Vonage herzustellen. Die folgenden Diagramme zeigen die Hauptunterschiede auf:

Vonage Twilio migraiton illustration 1 Vonage Twilio migraiton illustration 1

Video SDK-Anmeldeinformationen abrufen

Erstellen einer Video-Entwickler-Account für den Zugang zum SDK das Vonage API Customer Dashboard. Sobald Sie sich angemeldet haben, müssen Sie eine Vonage Application mit aktivierter Videofähigkeit erstellen. Sobald Sie im Customer Dashboard angemeldet sind:

  1. Gehen Sie auf 'Erstellen und Verwalten' und dann auf 'Applications'.
  2. Klicken Sie auf '+ Erstellen einer neuen Applikation.'
  3. Geben Sie einen Namen für die Anwendung ein.
  4. Ändern Sie bei Bedarf den API-Schlüssel in den Account, für den diese Anwendung registriert werden soll. Bei den meisten Kunden können Sie dies bei der vorgewählten Einstellung belassen.
  5. Klicken Sie unter "Authentifizierung" auf "Öffentlichen und privaten Schlüssel generieren". Es wird ein Download für den privaten Schlüssel gestartet, der zur Authentifizierung Ihres Accounts beim Zugriff auf unsere APIs verwendet wird. Sie verwenden diesen Schlüssel zum Beispiel mit dem Server-SDKs zur Verwaltung Ihrer Videositzungen.
  6. Scrollen Sie nach unten und schalten Sie "Video" ein. An dieser Stelle müssen wir keine URLs oder Einstellungen eingeben. Wenn Sie jedoch verschiedene Rückrufe für Ereignisse aktivieren möchten, können Sie hier URLs für Ihre Anwendung eingeben.
  7. Blättern Sie nach unten und klicken Sie auf "Neue Bewerbung erstellen".
  8. Oben auf der Seite Applications wird die soeben erstellte Anwendungs-ID angezeigt. Klicken Sie auf das Symbol Kopieren, um sie für später zu speichern.

Installieren Sie

Installieren Sie das Vonage Video Client SDK für JS:

npm install @vonage/client-sdk-video

Oder Sie verwenden das CDN-Skript-Tag:

<script src="https://www.unpkg.com/@vonage/client-sdk-video@2.26.4/dist/js/opentok.min.js"><script>

Authentifizierung

Das Vonage Video SDK verwendet Token, um Benutzer zu authentifizieren. Bei der Erstellung eines Tokens können Sie die Rolle des Benutzers festlegen (Abonnent, Herausgeber oder Moderator). Optional können Sie auch dem Token eine Zeichenfolge von Metadaten zuweisen (d.h. zur Identifizierung des angeschlossenen Kunden). Bitte beachten Sie unsere Token erstellen Übersichtsartikel für alle Optionen, die Sie bei der Erzeugung von Token verwenden können. Token sollten auf der Serverseite erzeugt und bei Bedarf an die Clientseite gesendet werden.

Erstellen Sie eine Videositzung

A "Sitzung" ist wie ein "Zimmer". Alle Clients, die dieselbe Sitzungs-ID verwenden, können miteinander kommunizieren.

Wie Token werden auch Sessions serverseitig erstellt. Bitte beachten Sie unsere Sitzungserstellung Übersichtsartikel für weitere Einzelheiten, einschließlich der verschiedenen verfügbaren Konfigurationsoptionen.

Um eine Sitzung zu erstellen und ein Token zu generieren, empfehlen wir die Verwendung eines unserer Server-SDKs.

Dieses Code-Snippet in NodeJS zeigt, wie Sie eine einfache API erstellen können, um Token und Session-IDs in Ihrem Backend zu generieren.

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

});

Die applicationID, sessionIdund Token von der Server-Seite wird auf der Client-Seite zur Authentifizierung der Client-Sitzung verwendet.

Verbinden mit einer Videositzung

Um einen Client-Endpunkt mit einer Vonage Video-Sitzung zu verbinden, benötigen Sie eine Application ID, eine Session ID und ein Token.

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

Video veröffentlichen

Die Video-SDKs von Vonage regeln die Videoqualität automatisch, basierend auf den Netzwerkbedingungen und den Gerätefähigkeiten. Sie können jedoch bestimmte Eigenschaften konfigurieren, z. B. Auflösung, Framerate und Audio-Fallback. Weitere Informationen finden Sie in der ausführlichen Liste der alle vom Herausgeber konfigurierbaren Optionen.

Bitte beachten Sie: Ein einzelnes Publisher-Objekt kann sowohl Audio als auch Video verarbeiten. Sie können Audio oder Video selektiv steuern unter Verwendung der von diesem Objekt bereitgestellten Methoden.

Einschalten der Kamera

Sobald Ihre Sitzung verbunden ist, können Sie eine Videospur erstellen, um die lokale Vorschau zu zeigen - bei Vonage nennen wir dies die Publisher-Vorschau.

Twilio

<div class="twilio-local"></div>

<script>
  twilioVideo.createLocalVideoTrack({
     height: { ideal: 720, min: 480, max: 1080 },
     width:  { ideal: 1280, min: 640, max: 1920 },
     aspectRatio: 16/9,
  }).then((localVideoTrack) => {
     twilioRoom.localParticipant.publishTrack(localVideoTrack)
     const localMediaContainer = document.getElementById('twilio-local')
     localMediaContainer!.appendChild(localVideoTrack.attach())
  });
</script>

Vonage

<div id="vonage-local"></div>
<script>
  const publisherOptions = {
      insertMode: 'append',
      width: '100%',
      height: '100%'
    };

    const publisher = OT.initPublisher(‘vonage-local’, publisherOptions, handleError);
</script>

Zu diesem Zeitpunkt sollten Sie die lokale Vorschau sehen, aber sie ist noch nicht in der Sitzung veröffentlicht. Um das Video in der Sitzung zu veröffentlichen, fügen Sie die folgende Codezeile hinzu:

session.publish(publisher, handleError);

Schalten Sie die Kamera aus

Das Vonage SDK bietet einfache Methoden zur Steuerung der Kamera.

Twilio

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

Vonage

Damit wird nur die Veröffentlichung von Videos in der Sitzung gestoppt. Sie können weiterhin Ihre lokale Vorschau sehen

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

Rendering eines Fernbedienungsvideos

Ähnlich wie die Twilio participantConnected und trackSubscribed Ereignis-Listener löst Vonage auch die Ereignisse connectionCreated und streamCreated aus, wenn ein entfernter Teilnehmer eine Verbindung zur Sitzung herstellt und mit dem Senden von Videos beginnt.

Twilio

<div class="twilio-remote-user"></div>

<style>
  #twilio-user-view-div video {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
</style>

<script>
  twilioRoom.on('participantConnected', participant => {
    participant.on('trackSubscribed', track => {
      // a user turned on their video, render it_
      document.getElementById('twilio-remote-user').appendChild(track.attach());
    });

    participant.on('trackUnsubscribed', track => {
      // a user turned off their video, stop rendering it_
      var selfTwilioVideo = document.getElementById('twilio-remote-user');

      selfTwilioVideo.querySelector('video').remove();
    });
  });
</script>

Vonage

<div id="vonage-remote-user"></div>

<script>
  session.on('streamCreated', event => {
    const subscriberOptions = {
      insertMode: 'append',
      width: '100%',
      height: '100%',
    };

    session.subscribe(event.stream, 'vonage-remote-user', subscriberOptions, handleError);
  });
</script>

Audio

Twilio Video ist spurbasiert, d. h. Sie müssen jede Audiospur in einer Schleife durchlaufen, um den Ton zu starten, und das Audioelement zum DOM hinzufügen. Vonage kann sowohl Audio als auch Video mit einem einzigen Publisher-Objekt verwalten. Wenn Sie die Veröffentlichung mit den Standardoptionen starten, werden sowohl Audio als auch Video veröffentlicht. Wenn Sie jedoch eine reine Audio-Sitzung bevorzugen, können Sie den Publisher so konfigurieren, dass er kein Video veröffentlicht. Weitere Informationen finden Sie in unserer Liste der Verlagsoptionen.

Mikrofon stummschalten

Bei der Verwendung von Twilio müssen Sie eine Schleife durch jede Audiospur ziehen, um das Mikrofon stumm zu schalten. Vonage vereinfacht dies durch die Bereitstellung einer einzigen aufrufbaren Methode.

Twilio

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

Vonage

publisher.publishAudio(false);

Mikrofon stumm schalten

Bei der Verwendung von Twilio Video müssen Sie eine Schleife durch jede Audiospur ziehen, um die Stummschaltung des Mikrofons aufzuheben. Vonage vereinfacht dies durch die Bereitstellung einer einzigen aufrufbaren Methode.

Twilio

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

Vonage

publisher.publishAudio(true);

Text-Chat

Sie können Daten (d.h. Text-Chat-Nachrichten oder benutzerdefinierte JSON-Nachrichten) zwischen einzelnen Teilnehmern einer Sitzung sowie zwischen allen Teilnehmern einer Sitzung austauschen. Dies geschieht mit unserem Client SDK, wie unten gezeigt:

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

Richten Sie Ereignis-Listener ein, um ein Signal an diesem Endpunkt zu empfangen.

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

Ereignis-Listener

Vonage und Twilio verfügen über Ereignis-Listener, die Ihnen helfen, den Status für alle verbundenen Teilnehmer zu erhalten.

Verbindungsänderungen der Teilnehmer

Diese Ereignisse werden ausgelöst, wenn ein Endpunkt der Sitzung beitritt:

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

Darüber hinaus sendet Vonage Ereignisse, um Teilnehmer über vorübergehende Netzunterbrechungen zu informieren und unterstützt automatische Wiederverbindung wenn die Client-Verbindung unterbrochen wird.

Sitzungen verlassen und beenden

Ersetzen Sie die Twilio disconnect Funktion mit der Vonage disconnect Funktion.

Twilio

twilio.disconnect();

Vonage

session.disconnect();

Weitere Informationen: