Überbrückung von Telefongesprächen zu Videokonferenzen

Mit der Video API von Vonage können Sie so gut wie jedes gewünschte Videoerlebnis erstellen. Oftmals befindet sich ein Teilnehmer in einem Gebiet, in dem die Internetabdeckung nicht gut ist, entweder aufgrund von Mobilfunk- oder ISP-Problemen, aber er muss trotzdem an einem Meeting teilnehmen. Wir zeigen Ihnen, wie Sie Nicht-Video-Teilnehmer in ein Meeting rufen und teilnehmen lassen können.

In diesem Lernprogramm

Mit der Video API von Vonage können Sie Nutzern die Möglichkeit geben, sich in ein Videomeeting einzuwählen oder einen Nutzer auszuwählen und ihn direkt teilnehmen zu lassen. Wir gehen darauf ein, wie Sie eine Demo mit unseren bestehenden Demos zum Laufen bringen, so dass Sie keinen Code schreiben müssen, aber wir werden auch erklären, was der Code im Hintergrund tut.

1. Siehe die Demo - Probieren Sie die Demo aus, ohne Code zu schreiben
2. Wie die Demo funktioniert - Die Client-Seite - Was der Code auf der Client-Seite macht
3. So funktioniert die Demo - Die Serverseite - Was der serverseitige Code macht

Voraussetzungen

Um das Tutorial abzuschließen, benötigen Sie:

• A Vonage-Konto - für Ihren API-Schlüssel und Ihr Geheimnis

Siehe die Demo

Wenn Sie die Demo ausprobieren möchten, bevor wir den Code schreiben, haben wir einen Beispiel-Webserver und JavaScript-Code, um zu testen, wie ein einfacher Videoanruf aussieht. Der gesamte Code ist quelloffen und öffentlich zugänglich, so dass Sie die Demo ausprobieren und dann den Code verwenden können, um Ihre eigenen Änderungen vorzunehmen.

Starten Sie den Node.js-Server

Die Video-Demo erfordert einen Backend-Server, der Dinge wie die Erstellung von Client-Tokens für die Autorisierung und die allgemeine Sitzungsverwaltung übernimmt. Sie können dies in jeder beliebigen Sprache erstellen, aber wir haben einen vorgefertigten Server, den Sie für den Anfang verwenden können, und zwar unter Vonage Video Learning Server (Node.js) auf Code Hub. Von der Dokumentation für EntwicklerKlicken Sie in der oberen Navigationsleiste auf "Code Hub" und scrollen Sie dann nach unten, um die Karte für "Vonage Video Learning Server (Node.js)" zu finden. Klicken Sie darauf, um sie zu öffnen.

Sie erhalten eine Beschreibung dessen, was dieses Projekt tut. Klicken wir zunächst auf "Code abrufen", damit wir ihn in den Code Hub Online-Editor laden können. Klicken Sie auf "Create a new development environment". Nennen Sie den Arbeitsbereich "Vonage Video Demo", da wir dieses Backend für mehrere Demos verwenden können. Dieser Demo muss eine Nummer zugewiesen werden, da der Lernserver Telefonanrufe über SIP unterstützt. Wir werden diese Funktion in dieser Demo nicht verwenden. Klicken Sie auf "Nummer zuweisen", um eine vorhandene Nummer von Vonage zuzuweisen, oder erwerben Sie eine neue Nummer, die Sie bei späteren Demos verwenden können.

Code Hub wird automatisch eine Anwendung für Sie erstellen, einschließlich der Einrichtung der öffentlichen und privaten Schlüssel, die unsere Anwendung verwenden wird. Sobald der Arbeitsbereich erstellt ist, werden Sie in den Code-Editor weitergeleitet, der eine Online-Version von Visual Studio Code ist. Sie können die weiteren Teile dieser Demo verfolgen, um den Code zu sehen, und Sie können diesen Code nach Bedarf für Ihre eigenen Projekte bearbeiten.

Um die Anwendung auszuführen, klicken Sie oben im Editor auf "Ansicht" und dann auf "Terminal". Dadurch wird eine Befehlszeile geöffnet, in der wir Befehle ausführen können. Alles, was wir tun müssen, ist Folgendes einzugeben vcr deploy und der Code wird bereitgestellt. Dies wird einige Augenblicke dauern, da der Code verpackt und auf den Vonage Code Hub Servern ausgeführt wird. Notieren Sie sich die "Instanz-Host-Adresse", die am Ende ausgegeben wird.

Wenn alles richtig funktioniert, sollten Sie die "Instance-Host-Adresse" aufrufen können und die folgende Seite angezeigt bekommen:

Testen Sie das Frontend

Der Backend-Server funktioniert direkt mit allen unseren vorgefertigten Demos, einschließlich dieser Einzel-Demo. Gehen Sie rüber zu https://github.com/Vonage-Community/video-api-web-samples/tree/main/SIPdas ist der Quellcode für den Front-End-Teil dieser Demo. Dieses Beispiel ermöglicht es mehreren Benutzern mit der URL, einem Voice-Chat über Video oder eine Telefonnummer beizutreten und einem Gastgeber zu erlauben, sich bei einer Nummer einzuwählen.

Der einfachste Weg, diese Demo zu starten, ist ein Klick auf die Schaltfläche "Open in Stackblitz" in der README.

Dadurch wird das Projekt in Stackblitz geöffnet. Wie beim Backend-Server können Sie hier den Code durchsuchen und ändern, wenn Sie möchten. Für diese Demo müssen wir nur das Projekt js/config.js Datei und fügen Sie die URL der Code Hub-Instanz in die SAMPLE_SERVER_BASE_URL variabel:

Sobald Sie die Datei gespeichert haben, können Sie die Demo-Ansicht auf der rechten Seite von Stackblitz aktualisieren und Ihr Browser sollte Sie auffordern, Ihr Mikrofon und Ihre Kamera zuzulassen. Sobald Sie dies zulassen, sollte Ihr Bild in der unteren Ecke der Seitenleiste erscheinen. Wenn Sie die Stackblitz-URL oberhalb des Demo-Fensters kopieren und auf Ihrem mobilen Gerät oder einem anderen Computer aufrufen oder einem Freund geben, sollte jeder, der sich anmeldet, mit Ihrer Demo verbunden werden!

So funktioniert die Demo

Konfigurieren einer Vonage-Applikation

Damit unsere Videoanwendung funktioniert, müssen unser Client und unser Server mit den Vonage-Servern kommunizieren können. Code Hub konfiguriert dies für uns, aber wenn Sie den Code lokal ausführen oder wissen möchten, was das bedeutet, wird eine Video-App wie eine andere API konfiguriert. Wir müssen eine Vonage Application einrichten, die die gesamte Konfiguration für unsere Anwendung enthält und uns dabei hilft, die notwendigen Elemente für die Authentifizierung zu generieren.

Gehen Sie zu Ihrem Vonage Kunden Dashboard und melden Sie sich an. Sobald Sie eingeloggt sind:

1. Klicken Sie auf "Applications" unter "Build".
2. Klicken Sie auf "Eine neue Anwendung erstellen".
3. Geben Sie der Anwendung einen Namen, z. B. "Basic Video Demo".
4. Klicken Sie auf "Öffentlichen und privaten Schlüssel generieren", woraufhin Sie eine Datei namens private.key. Bewahren Sie diese Datei für später auf.
5. Scrollen Sie nach unten und schalten Sie "Video" ein. Wir lassen diese Werte vorerst leer.
6. Klicken Sie auf "Neue Anwendung generieren", um die Anwendung zu erstellen.

Sobald die Anwendung erstellt ist, notieren Sie sich die Application ID. Wenn Sie den Code lokal ausführen, benötigen wir diese zur Konfiguration des Backends. Wenn Sie Code Hub verwenden, hat der Servercode bereits Zugriff auf die Application ID und den Private Key.

Die Kundenseite

Der clientseitige Teil der Demo besteht aus mehreren Teilen - einigen HTML-Elementen, um die Video-Feeds einzubinden, einigen JavaScript-Elementen, um Anmeldeinformationen abzurufen und mit den Vonage Video-Servern zu kommunizieren, und einigen JavaScript-Elementen, um den Backend-Server für die Anwahl aufzurufen.

Da es sich um eine Browser-Demo handelt, verwenden wir das JavaScript-SDK, das sich unter https://unpkg.com/@vonage/client-sdk-video@latest/dist/js/opentok.jsund fügen es in ein Skript-Tag in unserem HTML-Code ein. index.html.

Um Personen zu einem Raum hinzuzufügen, benötigen wir nur zwei Elemente - einen Platz für den aktuellen Benutzer, z. B. Sie, den wir "Herausgeber" nennen. Dann brauchen wir einen Platz für alle anderen, die hinzukommen und die Sie "abonnieren" werden. Wir werden sie in einem "Abonnenten"-Element unterbringen.

Wir werden zwei div Elemente und geben einem eine ID von publisher und die andere eine ID von subscriber. Wir verweisen auf diese Elemente im JavaScript, wenn die Seite besucht wird und wenn wir feststellen, dass ein anderer Benutzer den Videoanruf getätigt hat.

// index.html
<div>
    <h2 class="font-black text-2xl">Your Camera</h2>
    <div class="h-80 w-80" id="publisher"></div>
</div>

<div>
    <h2 class="font-black text-2xl">Guests</h2>
    <div class="h-80 w-80" id="subscriber"></div>
</div>

Wir haben dann zwei Gruppen von Steuerelementen. Das erste ermöglicht es unserer Videokonferenz, Einwahlfunktionen zu aktivieren. Wir werden zwei Schaltflächen erstellen, um diese Funktion zu aktivieren.

<div><h2 class="font-black text-2xl">Dial Options</h2></div>
<div>
    <h3 class="font-black text-xl">Phone Conference</h3>
    <p>You can start a phone conference to let people dial in directly. They can call the following number to join once you have started the conference:</p>

    <p id="conference-number" class="text-center pb-4"></p>
</div>
<div>
    <button id="btn-dial-conference" class="bg-blue-500 bold text-white p-4 rounded">Create Phone Conference</button>
    <button id="btn-disconnect-conference" class="bg-red-500 bold text-white p-4 rounded">Disconnect Phone Conference</button>
</div>

Dann haben wir eine Reihe von Steuerelementen, mit denen wir einen Benutzer anwählen können. Sie können eine Telefonnummer eingeben und unser System wählt den Benutzer an, und wenn er den Anruf annimmt, wird er in die Konferenz geschaltet.

<div>
    <h3 class="font-black text-xl">Direct Dial</h3>
    <p>Directly dial a phone number and add them to the conference. They will appear as an additional guest and be automatically added to the conference call if you have already started one.</p>
</div>
<div>
    <label for="phone">Number to call:</label>
    <input name="phone" id="phone" type="text" placeholder="15554441234" class="border border-black p-4 w-full">
    <button id="btn-dial-number" class="bg-blue-500 bold text-white p-4 rounded">Call Number</button>
</div>

Handhabung Video

Auf der JavaScript-Seite werden wir zunächst einige Informationen über den Videoaufruf selbst erhalten. Um eine Verbindung mit dem Videoanruf herzustellen, benötigen wir eine Application ID, eine Session ID und ein Token.

• Die Applikation ID ist ein Bezeichner, den das Client SDK verwendet, um verschiedene Einstellungen für unsere Video-App auf der Vonage-Seite zu referenzieren.
• Die Sitzungs-ID ist eine bestimmte Videositzung, zu der wir eine Verbindung herstellen möchten, da eine einzelne Applikation mehrere gleichzeitige Videositzungen haben kann.
• Die Token ist ein JWT-Authentifizierungstoken, mit dem Sie einer bestimmten Sitzung mit bestimmten Rechten beitreten können.

Sie können die Sitzungs-ID und das Token zwar im Voraus generieren, aber in der Realität werden Sie diese bei Bedarf erzeugen. Unser Code stellt dar, wie Sie das tun würden. Wir werden in Kürze zeigen, wie die Informationen erstellt werden, aber wir werden diese Informationen vom Backend-Server abrufen, den wir bereitgestellt haben.

// src/app.js

// ...
} else if (SAMPLE_SERVER_BASE_URL) {
  // Make a GET request to get the Vonage Video Application ID, session ID, and token from the server
  fetch(SAMPLE_SERVER_BASE_URL + '/session')
  .then((response) => response.json())
  .then((json) => {
    applicationId = json.applicationId;
    sessionId = json.sessionId;
    token = json.token;
    // Initialize a Vonage Video Session object
    initializeSession();
  }).catch((error) => {
    handleError(error);
    alert('Failed to get Vonage Video sessionId and token. Make sure you have updated the config.js file.');
  });
}

Sobald wir alle Verbindungsinformationen haben, können wir das Vonage Video JavaScript SDK aufrufen, das die Verbindung zur Vonage Video API am Frontend herstellt. Zuerst holen wir uns ein Sitzungsobjekt mit OT.initSession(). Wir beginnen dann mit dem Abhören der streamCreated Veranstaltung mit session.on(). Dies ermöglicht es uns, einen Callback zu setzen, der ausgeführt wird, wenn ein Stream von einem anderen Publisher erstellt wird. In diesem Fall verwenden wir session.subscribe() um eine Verbindung zu dem eingehenden Ereignis herzustellen und es in die subscriber div, das wir in der HTML-Datei eingerichtet haben. Wir achten auch auf die sessionDisconnected Ereignis, um zu wissen, wann der andere Benutzer die Verbindung trennt, aber in dieser Demo protokollieren wir nur, dass er gegangen ist.

Dann erstellen wir die publisher Objekt mit OT.initPublisher(). Wir sagen ihm, an welches div es anhängen soll (publisher), und einige grundlegende Formatierungsoptionen. Dadurch werden Ihre Kamera und Ihr Mikrofon mit der Video API verbunden.

Wir rufen dann session.connect() um sich mit der Sitzung zu verbinden, wobei das JWT-Token verwendet wird, das wir vom Server erhalten haben. Das ist alles, was zwei Personen brauchen, um einem Raum beizutreten!

// src/app.js

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

  // Subscribe to a newly created stream
  session.on('streamCreated', (event) => {
    const subscriberOptions = {
      insertMode: 'append',
      width: '100%',
      height: '100%'
    };
    session.subscribe(event.stream, 'subscriber', subscriberOptions, handleError);
  });

  session.on('sessionDisconnected', (event) => {
    console.log('You were disconnected from the session.', event.reason);
  });

  // initialize the publisher
  const publisherOptions = {
    insertMode: 'append',
    width: '100%',
    height: '100%',
    resolution: '1280x720'
  };
  const publisher = OT.initPublisher('publisher', publisherOptions, handleError);

  // Connect to the session
  session.connect(token, (error) => {
    if (error) {
      handleError(error);
    } else {
      // If the connection is successful, publish the publisher to the session
      session.publish(publisher, handleError);
    }
  });
}

Umgang mit Telefonanrufen

Die gesamte Schwerstarbeit für die Unterstützung von Anrufen wird von der Video API selbst und unserem Backend-Server übernommen. Der clientseitige Code greift lediglich auf einige Routen auf dem Backend-Server zu, um den SIP-Anruf zu aktivieren und die Verbindung zur Telefonkonferenz zu trennen, wenn wir fertig sind. Die Aktivierung der Telefonie erfolgt durch Drücken der /sip/session/dial Route auf unserem Backend-Server, auf die wir später näher eingehen werden.

// js/index.js
document.getElementById('btn-dial-conference').addEventListener('click', async () => {
    const resp = await fetch(`${SAMPLE_SERVER_BASE_URL}/sip/session/dial`, {
        method: "POST"
    })
    .then(res => res.json())

    console.log(resp);
})

Dieselbe Route kann für die Anwahl eines bestimmten Benutzers verwendet werden. Wir leiten einfach die Telefonnummer weiter, die in die Client-Benutzeroberfläche eingegeben wurde:

// js/index.js
document.getElementById('btn-dial-number').addEventListener('click', async () => {
    const msisdn = document.getElementById('phone').value;
    const resp = await fetch(`${SAMPLE_SERVER_BASE_URL}/sip/session/dial`, {
        method: "POST",
        body: JSON.stringify({
            msisdn
        }),
        headers: {
            "Content-Type": "application/json"
        }
    })
    .then(res => res.json())

    console.log(resp);
})

Wenn ein Benutzer der Telefonkonferenz beitritt oder wir eine direkte Verbindung zu ihm herstellen, wird ein neuer Teilnehmer zur Teilnehmerliste hinzugefügt. Die Video API leitet den Ton der SIP-Verbindung automatisch an alle Teilnehmer der Videositzung weiter.

Schließlich können wir beide Arten von Anrufen beenden, indem wir auf die Funktion /sip/session/hangup Route auf unserem Backend-Server:

// js/index.js
 document.getElementById('btn-disconnect-conference').addEventListener('click', async () => {
    const resp = await fetch(`${SAMPLE_SERVER_BASE_URL}/sip/session/hangup`, {
        method: "POST"
    })
        .then(res => res.json())

    console.log(resp);
})

Die Server-Seite

Der serverseitige Teil jeder Vonage Video-Anwendung dient der Erstellung von Sitzungen, der Erzeugung von Authentifizierungstoken und administrativen Aufgaben wie dem Starten und Stoppen von Archiven. In dieser Demo geht es nur um die Erstellung von Sitzungen und Token, damit Benutzer dem Raum beitreten können. Obwohl die API selbst eine REST-API ist und nach Belieben aufgerufen werden kann, empfehlen wir Ihnen die Verwendung der Vonage Node SDK die alle Authentifizierungs- und HTTP-Aufrufe für Sie erledigt. Sie können es in Ihrer eigenen Anwendung mit installieren:

npm install -s @vonage/server-sdk

Im Democode ist es bereits vorinstalliert. Wenn Sie den Code lokal ausführen, müssen Sie ihn ausführen:

npm install

um alle Abhängigkeiten herunterzuladen, und kopieren Sie dann .envcopy in eine neue Datei mit dem Namen .env. Sie müssen die geforderten Informationen in folgende Felder eintragen .env wie die Application ID, den Speicherort des privaten Schlüssels auf der Festplatte und Ihren Vonage API-Schlüssel und -Geheimnis.

Erstellung einer Sitzung und Beitritt zur Sitzung

Als Erstes schauen wir nach, ob es bereits eine Sitzung für den Raum gibt, den wir erstellen. Wir halten ein In-Memory-Wörterbuch in roomToSessionIdDictionaryund wenn der Raum bereits eine Sitzung hat, ziehen wir die Sitzung einfach aus dem Wörterbuch. Anschließend verwenden wir das Vonage Video Node SDK, um ein Client-Token zu erstellen, indem wir vonage.video.generateClientToken()und übergibt ihm die Sitzungs-ID und ein Objekt mit einer Konfiguration. Im Moment ist alles, was wir tun, den Benutzer auf eine moderator Rolle für diese einfache Demo. Anschließend werden die konfigurierte Application ID, Session ID und das Token an das Frontend zurückgegeben.

Wenn die Sitzung nicht existiert, wird eine neue Sitzung mit vonage.video.createSession(). Dadurch wird die Vonage-API kontaktiert und eine Sitzung erstellt, mit der sich die Benutzer verbinden können. Wir haben keine spezifischen Einstellungen für diese Sitzung, aber hier würden wir Dinge wie Archivierungsregeln einrichten und wie die Sitzung behandelt werden soll, wie Routing oder Peer-to-Peer. Dann erstellen wir wie zuvor ein Token und senden all diese Informationen zurück an den Browser.

// routes/index.js

async function createSession(response, roomName, sessionProperties = {}, role = 'moderator') {
  let sessionId;
  let token;
  console.log(`Creating ${role} creds for ${roomName}`);

  if (roomToSessionIdDictionary[roomName]) {
    sessionId = roomToSessionIdDictionary[roomName];
    // generate token for user
    token = vonage.video.generateClientToken(sessionId, { role })
    response.setHeader('Content-Type', 'application/json');
    response.send({
      applicationId: appId,
      sessionId: sessionId,
      token: token
    });
  } else {
    try {
      // Create the session
      const session = await vonage.video.createSession(sessionProperties);
      roomToSessionIdDictionary[roomName] = session.sessionId;

      // generate token for user
      token = vonage.video.generateClientToken(session.sessionId, { role });
      response.setHeader('Content-Type', 'application/json');
      response.send({
        applicationId: appId,
        sessionId: session.sessionId,
        token: token
      });
    } catch(error) {
      console.error("Error creating session: ", error);
      response.status(500).send({ error: 'createSession error:' + error });
    }
  }
}

Verbinden mit der SIP-Bridge

Vonage stellt eine SIP-Brücke zur Verfügung, die von der Video API genutzt werden kann. Alles, was Sie brauchen, ist eine Telefonnummer, die Sie über Ihr Vonage Customer Dashboard abonniert haben. Wir können dann diese Telefonnummer als SIP-Schnittstelle für eingehende Anrufe verwenden. Wir verwenden auch die Konversationsfunktionalität der Vonage Voice API, um mehrere Benutzer zu einer Audiokonferenz zusammenzuführen.

Als Erstes müssen wir unsere Videositzung in die Telefonkonferenz selbst einwählen. Wir erstellen ein Client-Token für die SIP-Verbindung, um der Videositzung beizutreten, und tätigen dann einen Anruf an vonage.video.initiateSIPCall() mit unserer SIP-Konfiguration, um alles miteinander zu verbinden.

// routes/index.js
const { msisdn } = req.body;
const sessionId = findSessionIdForRoom(req.params.room);
const conversation = findConversationFromSessionId(sessionId);
const token = vonage.video.generateClientToken(sessionId, {
  data: JSON.stringify({
    sip: true,
    role: 'client',
    name: conversation.conversationName,
  })
})

const options = {
  token, 
  sip: {
    auth: {
      username: process.env.VCR_API_ACCOUNT_ID, // Your Vonage API Key
      password: process.env.VCR_API_ACCOUNT_SECRET, // Your Vonage API Secret
    },
    uri: `sip:${process.env.CONFERENCE_NUMBER}@sip.nexmo.com;transport=tls`,
    secure: false,
  }
}

// ...

await vonage.video.intiateSIPCall(sessionId, options)
  .then(data => {
    // Update the conversation with connection data
    conversation.connectionId = data.connectionId;
    conversation.streamId = data.streamId;
    sipConversationToSessionIdDictionary[sessionId] = conversation;

    res.send(data)
  })

Wo wird die Konversation aufgebaut? Wenn wir den SIP-Anruf initiieren, wählt sich unsere SIP-Brücke über die Voice API zu einer Konferenznummer ein. Unsere Konferenznummer wird über das Customer Dashboard so konfiguriert, dass sie auf die /sip/vapi/answer Route in unserem Backend-Server. Wenn Sie Cloud Runtime verwenden, wird dies automatisch konfiguriert. Wenn Sie dies jedoch von Hand einrichten, müssen Sie die Anwendungseinstellungen für diese Anwendung aufrufen und die "Answer URL" auf https://your-domain.com/sip/vapi/answer, wobei your-domain ist der Name der Domäne, in der die Demo bereitgestellt wird.

Die Route liefert eine NCCO-Gesprächsaktion die eine Voice API Conversation erstellt, die alle Beteiligten miteinander verbindet.

// routes/index.js
router.get('/sip/vapi/answer', async function (req, res) {
  const ncco = new NCCOBuilder();
  const conversation = findConversationFromSessionId(findSessionIdForRoom('session'));

  // If the call is not from the SIP connector, then announce we are connecting
  // to the conference call
  if (!req.query['SipHeader_X-OpenTok-SessionId']) {
    ncco.addAction(new Talk('Please wait while we connect you'));
  }

  // Call an individual user
  if (req.query['SipHeader_X-learningserver-msisdn']) {
    ncco.addAction(new Connect({type: 'phone', number: req.query['SipHeader_X-learningserver-msisdn']}, process.env.CONFERENCE_NUMBER));
  } else {
    ncco.addAction(new Conversation(conversation.conversationName, null, true, true, false, null, null, false));
  }

  res.send(ncco.build());
});

An diesem Punkt kann sich ein Benutzer unter der Konferenznummer in die Konferenz einwählen, und die Voice API verbindet alles miteinander. Wenn ein Benutzer unsere Konferenznummer wählt, wird er an die Konferenznummer weitergeleitet. /sip/vapi/answer Endpunkt. Wir fügen eine zusätzliche Aktion hinzu, die dem Anrufer mitteilt, dass er mit der Konferenz verbunden wird, und dann wird er zugeschaltet.

Anwählen eines Benutzers

Im Großen und Ganzen ist der Prozess für die Anwahl eines Benutzers derselbe wie für das Einrichten einer Telefonkonferenz. Der einzige Unterschied besteht darin, dass wir eine zu wählende Nummer an den /sip/:room/dial Route, und wir fügen diese Nummer als Option zu den SIP-Headern hinzu.

// routes/index.js
router.post("/sip/:room/dial", async function (req, res) {
  // Set up client token and SIP options as before

  // Add a header that will get passed to the Voice API
  if (msisdn) {
    options.sip.headers = {
      "X-learningserver-msisdn": msisdn
    }
  }

  //Initiate the call as before
  await vonage.video.intiateSIPCall(sessionId, options)
    .then(data => {
      // Update the conversation with connection data
      conversation.connectionId = data.connectionId;
      conversation.streamId = data.streamId;
      sipConversationToSessionIdDictionary[sessionId] = conversation;

      res.send(data)
    })
});

Wenn der SIP-Anruf getätigt wird, wird diese zusätzliche X-learningserver-msisdn Header wird als Teil des Voice API-Aufrufs übergeben, den unser Backend-Server akzeptiert. Dies veranlasst unseren Code, einen zusätzlichen NCCO-Schritt hinzuzufügen, um zunächst die angeforderte Telefonnummer über eine NCCO-Aktion verbindenund wenn sie antworten, werden sie in das Gespräch einbezogen.

// routes/index.js

router.get('/sip/vapi/answer', async function (req, res) {
  // Find the conversation info as before

  // If this header exists, call the user to bridge them in
  if (req.query['SipHeader_X-learningserver-msisdn']) {
    ncco.addAction(new Connect({type: 'phone', number: req.query['SipHeader_X-learningserver-msisdn']}, process.env.CONFERENCE_NUMBER));
  } else {
    ncco.addAction(new Conversation(conversation.conversationName, null, true, true, false, null, null, false));
  }

  res.send(ncco.build());
});

Auflegen

Wenn wir fertig sind, gibt uns die Benutzeroberfläche die Möglichkeit, die Verbindung zum SIP-Anruf direkt zu trennen. Dies wird von der /sip/:room/hangup Route und trennt einfach die Verbindung des SIP-Anrufs von der Sitzung.

// routes/index.js

router.post("/sip/:room/hangup", async function (req, res) {
  // Get the session ID
  // Look up the connection from calls ID
  const sessionId = findSessionIdForRoom(req.params.room)
  const conversation = findConversationFromSessionId(sessionId);
  await vonage.video.disconnectClient(sessionId, conversation.connectionId)
    .then(data => 
      res.send(data)
    )
    .catch(error => res.status(500).send(error));
});

Wenn wir nicht manuell auflegen, achten wir auf Voice API-Ereignisse, die uns mitteilen, wann ein Gespräch beendet ist. Ein Gespräch wird automatisch beendet, wenn alle Teilnehmer die Verbindung getrennt haben. Wir warten, bis wir ein completed Ereignis, und wenn wir das tun, stellen wir sicher, dass wir die gleiche Trennung von der Sitzung wie oben durchführen.

// routes/index.js

// This must be all because VAPI sometimes sends events as POST no matter what
// your event URL config is set to. This is a known bug.
router.all('/sip/vapi/events', async function (req, res) {
  if (req.query.status === "completed") {
    const conversation = findConversationFromSessionId(findSessionIdForRoom('session'));
    await vonage.video.disconnectClient(findSessionIdForRoom('session'), conversation.connectionId)
      .then(data => res.send(data))
      .catch(error => res.status(500).send(error));
  } else {
    res.send();
  }
})

Schlussfolgerung

In diesem Tutorial haben Sie gesehen, was in den Backend-Server für die Übermittlung von Telefonanrufen über SIP eingeht, wie man einen Web-Client erstellt, mit dem Benutzer einer Sitzung beitreten und sich gegenseitig sehen und hören können, und wie einfach es ist, den Vonage Code Hub und Stack Blitz zum schnellen Testen von Beispielen zu verwenden.

Weitere Lektüre

• Vonage Video Entwickler Dokumentation
• Video API REST-Spezifikation
• Leitfäden