SIP-Anrufe zu WebRTC-Video-Sitzungen hinzufügen

Wir leben in einer Zeit der Videokonferenzen. Ob in der Schule, bei der Arbeit oder bei Familienfeiern - Videokonferenzen sind für viele zum Alltag geworden, aber manchmal ist es nicht möglich, von einem Computer aus teilzunehmen. In diesem Tutorial erfahren Sie, wie Sie Teilnehmern die Teilnahme an Ihren Vonage Video API-Sitzungen per Telefon ermöglichen.

Möchten Sie zum Ende springen? Sie finden den gesamten Quellcode für dieses Tutorial auf GitHub.

Wie funktioniert es?

Von der Video API-Sitzung aus rufen wir die Voice API auf. Dieser Aufruf löst den Antwort-Webhook in unserer Anwendung aus, der ein Voice-Gespräch erstellt. Dieses Gespräch wird der Video-Sitzung als weiterer Stream hinzugefügt.

Wenn die Benutzer die Konferenznummer wählen, werden sie zur Eingabe einer PIN aufgefordert. Wenn der Benutzer die richtige PIN eingibt, nimmt er an der Sprachkonversation teil. Zu diesem Zeitpunkt kann der Benutzer alle Teilnehmer der Videositzung hören und diese wiederum die Stimme der anderen Teilnehmer hören.

Sobald die Sitzung beendet ist, sollte der Anruf aufgelegt werden, um zusätzliche Gebühren für Voice oder Video API zu vermeiden.

Voraussetzungen

Für dieses Tutorial benötigen Sie Folgendes:

• Ein Vonage Video API Account. Klicken Sie hier um ein kostenloses Konto zu erhalten.

• Fakultativ: Ngrok für lokale Tests

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

In diesem Lernprogramm wird auch eine virtuelle Telefonnummer verwendet. Um eine zu erwerben, gehen Sie zu Rufnummern > Rufnummern kaufen und suchen Sie nach einer Nummer, die Ihren Anforderungen entspricht.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Aufbau des Frontends

Unser Frontend wird Express mit einer EJS-Vorlage verwenden. In diesem Artikel gehen wir nicht darauf ein, wie eine Video API-Sitzung erstellt wird, aber Sie können sich den Code im Repository ansehen, um zu sehen, wie wir das machen. Wir werden uns ausschließlich darauf konzentrieren, wie man SIP-Anrufe zu einer bestehenden Sitzung hinzufügt.

Fügen Sie in der Vorlage für die Video-Sitzung die beiden folgenden JavaScript-Funktionen hinzu:

const dialOut = () => {
  fetch(`/dial-out?roomId=${roomId}`)
    .then(response => response.json())
    .then((sipData) => {
      connectionId = sipData.connectionId;
    }).catch((error) => {
      alert(`There was an error dialing-out`);
    })
};
const hangUp = () => {
  fetch(`/hang-up?roomId=${roomId}`)
    .then(response => response)
    .then((data) => {
      console.log('dial-out-hang-up-complete');
    }).catch((error) => {
      alert(`There was an error hanging up`);
    })
  };

Diese beiden Funktionen rufen Routen in unserem Express-Backend auf. Die dialOut Methode initiiert die Voice-Konferenz und fügt sie als Stream in die Video-Sitzung ein. Die Funktion hangUp Funktion wird am Ende der Sitzung verwendet, um die Sprachkonferenz von der Sitzung zu trennen. In unserem HTML-Code müssen wir zwei Schaltflächen hinzufügen, um diese Funktionen8 aufzurufen.

<button onclick="dialOut()">Click here to dial-out to the Vonage Conference</button>
<button onclick="hangUp()">Click here to hang-up</button>

Schnellspur zum Backend

Da unser Frontend nun einsatzbereit ist, müssen wir unser Backend so einrichten, dass es eine Verbindung zur Vonage Voice API über SIP herstellen kann.

Hilfsfunktionen

Wir brauchen einige Hilfsfunktionen, bevor wir Wählvorgänge und Auflegen behandeln.

/**
 * Generates a random 4 digit PIN
 */
const generatePin = () => {
  const pin = Math.floor(Math.random() * 9000) + 1000;
  if (app.get(pin)) {
    return generatePin();
  }
  return pin;
};

/**
 * Creates a Video API user token
 * @param {String} sessionId Id of the Video API session the user wishes to join
 * @param {String} sipTokenData Data associated with the SIP connection
*/
const generateToken = (sessionId, sipTokenData = '') => OT.generateToken(sessionId, {
  role: 'publisher',
  data: sipTokenData,
});

/**
 * Properties for the OT.dial API call
 * @returns {Object}
*/
const setSipOptions = () => ({
  auth: {
    username: config.voiceApiKey,
    password: config.voiceApiSecret,
  },
  secure: false
});

Die Funktion generatePin Funktion generiert eine zufällige 4-stellige PIN, die wir verwenden, um eine eindeutige PIN für jede Videositzung zu erstellen. Anrufer, die an der Sitzung teilnehmen möchten, werden nach dieser PIN gefragt, bevor sie der Sitzung beitreten können.

Die Funktion generateToken Funktion wird verwendet, um ein Video API-Token mit dem SIP

Die Funktion setSipOptions Funktion erstellt ein Objekt, das wir beim Wählen der SIP-Verbindung verwenden werden. Es enthält Authentifizierungsinformationen, die für die Teilnahme an der Voice-Konferenz erforderlich sind.

Antwort an das Frontend

Mit diesen Funktionen fügen wir nun Routen hinzu, die auf unser Frontend reagieren. Die dial-out wird die Video API verwenden, um eine Verbindung zu einer SIP-Konferenz herzustellen. Später werden wir die Voice API so einrichten, dass sie weiß, wie sie auf diese Anrufe reagieren soll.

/**
 * When the dial-out get request is made, the dial method of the 
 * OpenTok Dial API is invoked
*/
app.get('/dial-out', (req, res) => {
  const { roomId } = req.query;
  const { conferenceNumber } = config;
  const sipTokenData = `{"sip":true, "role":"client", "name":"'${conferenceNumber}'"}`;
  const sessionId = app.get(roomId);
  const token = generateToken(sessionId, sipTokenData);
  const options = setSipOptions();
  const sipUri = `sip:${conferenceNumber}@sip.nexmo.com;transport=tls`;
  OT.dial(sessionId, token, sipUri, options, (error, sipCall) => {
    if (error) {
      console.dir(error)
      res.status(500).send('There was an error dialing out');
    } else {
      app.set(conferenceNumber + roomId, sipCall.connectionId);
      res.json(sipCall);
    }
  });
});

/**
 * When the hang-up get request is made, the forceDisconnect method 
 * of the OpenTok API is invoked
*/
app.get('/hang-up', (req, res) => {
  const { roomId } = req.query;
  const { conferenceNumber } = config;
  if (app.get(roomId) + app.get(conferenceNumber + roomId)) {
    const sessionId = app.get(roomId);
    const connectionId = app.get(conferenceNumber + roomId);
    OT.forceDisconnect(sessionId, connectionId, (error) => {
      if (error) {
        res.status(500).send('There was an error hanging up');
      } else {
        res.status(200).send('Ok');
      }
    });
  } else {
    res.status(400).send('There was an error hanging up');
  }
});

Die hang-up Route trennt die Sprachkonferenz von der Video API-Sitzung. Das Auflegen des Anrufs am Ende eines Meetings ist von entscheidender Bedeutung. Andernfalls bleibt die Voice-Konferenz offen und mit der Video-Sitzung verbunden. Dies würde dazu führen, dass in beiden Fällen weiterhin Gebühren anfallen.

Voice API Webhooks

Wenn Sie eine Voice-Applikation erstellen, müssen Sie eine Answer Url und eine Event Url angeben. Wenn Sie die Anwendung lokal ausführen, sollten Sie ngrok verwenden, um einen externen Endpunkt bereitzustellen. Geben Sie entweder Ihre ngrok Url oder Heroku Url mit Routen /voice-answer für die Answer Url und /voice-events für die Ereignis-Url.

app.get('/voice-events', (req, res) => {
  res.status(200).send();
});

app.post('/voice-answer', (req, res) => {
  const { serverUrl } = config;
  const ncco = [];
  if (req.body['SipHeader_X-OpenTok-SessionId']) {
    ncco.push({
      action: 'conversation',
      name: req.body['SipHeader_X-OpenTok-SessionId'],
    });
  } else {
    ncco.push(
      {
        action: 'talk',
        text: 'Please enter a pin code to join the session'
      },
      {
        action: 'input',
        eventUrl: [`${serverUrl}/voice-dtmf`]
      }
    )
  }

  res.json(ncco);
});

app.post('/voice-dtmf', (req, res) => {
  const { dtmf } = req.body;
  let sessionId;

  if (app.get(dtmf)) {
    sessionId = app.get(dtmf);
  }

  const ncco = [
    {
      action: 'conversation',
      name: sessionId,
    }];

  res.json(ncco)
})

Die /voice-answer Route erstellt ein Gespräch, wenn sie durch unsere Anwahl ausgelöst wird. Wenn andere Teilnehmer anrufen, werden sie aufgefordert, die vierstellige PIN für die Sitzung einzugeben. Die Eingaben des Anrufers werden an die Route weitergeleitet /voice-dtmf Route weitergeleitet, um der Sitzung möglicherweise beizutreten.

Einstellungen konfigurieren

Beginnen wir mit der Erstellung einer .env Datei. Sie können die .env-sample Datei innerhalb des Repo als Vorlage verwenden. Ihr Inhalt sollte sein:

videoApiKey=
videoApiSecret=
voiceApiKey=
voiceApiSecret=
conferenceNumber=
serverUrl=

Zum Einstellen videoApiKey und videoApiSecreteinzustellen, erstellen Sie ein neues Projekt im Dashboard der Video API.

Project created dialog within the Vonage Video API dashboard

Kopieren Sie nach der Erstellung den API-Schlüssel und das Geheimnis und fügen Sie sie in Ihre .env Datei als die videoApiKey und videoApiSecret ein.

Erstellen Sie nun eine Sprachanwendung und verwenden Sie den API-Schlüssel und das Geheimnis als voiceApiKey und voiceApiSecret. Sie müssen eine Nummer erwerben und diese mit Ihrer Voice-Anwendung verknüpfen. Verwenden Sie diese Nummer als die conferenceNumber Variable.

Geben Sie schließlich die ngrok- oder Heroku-URL als serverUrl ein.

Jetzt können Sie einer Videositzung beitreten und andere können Ihre Nummer wählen und einen PIN-Code eingeben, um der Sitzung beizutreten. Es ist wichtig zu betonen, dass Sie den Anruf am Ende der Videositzung auflegen müssen, um zu verhindern, dass die Video- und Voice-Accounts verwendet werden, wenn Sie fertig sind.

Weitere Lektüre

Möchten Sie mehr über die SIP-Interconnect-Funktion der Video API erfahren? Hier finden Sie einige Links, die für Sie nützlich sein könnten.

• SIP Interconnect Handbuch für Entwickler

• Vonage Voice SIP-Beispiele