Telefonieren über einen Webbrowser mit Vue.js und Vonage

In diesem Blog-Beitrag zeigen wir Ihnen, wie Sie von einem Webbrowser aus ein Telefon anrufen können, und zwar mit Vonage In-App Voice unter Verwendung des Vonage Client SDK für JavaScript und Vue.JS. In-App Voice und In-App Messaging befinden sich in der Developer Preview, daher würden wir uns über Ihr Feedback sowohl zu den Entwicklungserfahrungen als auch zu den bereitgestellten Funktionen freuen. Sie können mit uns über die Vonage Entwickler-Community Slack.

Um einen Telefonanruf von einem Webbrowser aus tätigen zu können, benötigen wir eine Reihe von Komponenten in unserer Anwendung. Eine Vue.JS-Anwendung, die im Browser ausgeführt wird und das Vonage Client SDK für JavaScript verwendet, einen Anwendungsserver, der zur Authentifizierung des Anwendungsbenutzers bei Vonage verwendet wird, indem ein Benutzer-JWT generiert wird, und ein Telefon, um den Anruf zu empfangen.

Das untenstehende Sequenzdiagramm zeigt, wie die Dinge funktionieren werden, sobald wir unsere Anwendung erstellt haben. In diesem Blog-Beitrag werden wir zunächst die Vue.JS-Anwendung mit einer Benutzeroberfläche erstellen, die die Eingabe einer Telefonnummer ermöglicht. Anschließend erstellen wir einen Anwendungsserver, der den erforderlichen Benutzer-JWT generieren kann. Sobald der Anwendungsserver läuft, aktualisieren wir die Vue.JS-Anwendung, um das JWT abzurufen und es mit dem Vonage Client SDK für JavaScript zu verwenden, um sich bei der Vonage-Plattform anzumelden und den Telefonanruf zu initiieren. Dann müssen wir den App-Server aktualisieren, um eine GET-Anfrage zu verarbeiten, die Vonage stellt, um Anweisungen für den weiteren Verlauf des Telefonats zu erhalten. Diese Anweisungen teilen Vonage mit, dass der Anruf von der Vue.JS-Anwendung im Webbrowser an ein Telefon weitergeleitet werden soll.

/* https://bramp.github.io/js-sequence-diagrams/ Teilnehmer Vue.JS App als V Teilnehmer App Server als A Teilnehmer Nexmo als N Teilnehmer Telefon als P V->A: Get User JWT Hinweis rechts von V: In einer Produktionsapp<br/>sollte diese Anfrage<br/>authentisch sein A-->V: Benutzer JWT V -> V: Nexmo erstellen<br/>Gesprächs-Client V -> N: Login N --> V: Eingeloggt V -> N: Telefon anrufen N -> A: GET answer_url A --> N: NCCO connect N -> P: Anruf */

Call from Web Browser Sequence Diagram

Es sind also ein paar Schritte nötig, aber das Ergebnis lohnt sich.

Wenn Sie lieber direkt in den Code eintauchen möchten, finden Sie den Aufruf von Browser-Code auf GitHub.

Bevor wir beginnen

• Garn für die Paketverwaltung

• Die Vue CLI für das Gerüst unserer Anwendung und den Betrieb eines Entwicklungsservers

• A Nexmo Account damit wir das SDK nutzen und telefonieren können

• Die Nexmo CLI zur schnellen Erstellung und Einrichtung einer Nexmo-Anwendung über die Kommandozeile. Bitte verwenden Sie die Beta-Version des CLIs, z.B. npm install -g nexmo@beta

• Eine lokale Tunnellösung wie Ngrok so dass die Nexmo-Plattform einen lokal laufenden Webserver erreichen kann). Für diesen Blogbeitrag werden wir Ngrok verwenden.

Wenn diese Voraussetzungen erfüllt sind, können wir loslegen.

Gerüst für ein neues Vue.JS Projekt

Führen Sie den folgenden vue im Terminal aus und wählen Sie den Standardwert von (babel, eslint) wenn Sie dazu aufgefordert werden.

$ vue create call-from-browser

# navigate into the newly created Vue project folder
cd call-from-browser

Dadurch erhalten Sie die folgende Verzeichnisstruktur und Dateien:

call-from-browser
├── README.md
├── babel.config.js
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
└── yarn.lock

Wir werden eine CallFromBrowser Komponente erstellen, also benennen wir die Standard HelloWorld die erstellt wurde.

Damit sind wir bereit, mit der Erstellung der Benutzeroberfläche zu beginnen.

Erstellen einer einfachen Schnittstelle für die Eingabe und das Wählen von Telefonnummern

Vue.JS hat ein starkes und wachsendes Ökosystem, so dass es Sinn macht, bestehende Komponenten zu verwenden, wenn es welche gibt. Glücklicherweise gibt es ein paar Optionen und wir werden uns für die vue-tel-input Komponente von Steven Dao.

vue-tel-input example animation

Installieren Sie die Komponente:

Nun, da wir die Komponente haben, die uns bei der Überprüfung von Telefonnummern hilft, können wir sie zur CallFromBrowser Komponente hinzufügen. Öffnen Sie src/components/CallFromBrowser.vue in einem Code-Editor.

Aktualisieren Sie das <template> Element wie folgt:

<template>
  <main class="call-from-browser">
    <vue-tel-input @oninput="onInput">
    </vue-tel-input>
    <button class="call-control" v-bind:class="{'call-in-progress': callInProgress}" v-on:click="controlCallClick"></button>
    
    <p>{{infoMessage}}</p>
  </main>
</template>

Die Vorlage verwendet die <vue-tel-input> Komponente und setzt einen @onInput Handler. Wir haben eine <button> die eine call-in-progress Klasse, die auf der Grundlage eines callInProgress Eigenschaftswert und einen Click-Handler, der eine controlCallClick Methode aufruft. Die Vorlage hat auch eine <p>{{infoMessage}}</p> die es uns ermöglicht, ein Benutzerfeedback über eine data.infoMessage Eigenschaft, die wir gleich definieren werden.

Als nächstes aktualisieren wir den Inhalt des <script> Tags in derselben Datei.

<script>
import 'vue-tel-input/dist/vue-tel-input.css'
import VueTelInput from 'vue-tel-input'

export default {
  name: 'CallFromBrowser',
  components: {
      'vue-tel-input': VueTelInput
  },

...
</code></pre>
<p>This imports the CSS and the component definition for the telephone input component sets the name of the component to <code>CallFromBrowser</code> and registers the <code>vue-tel-input</code> component dependency so it can be used within the template.</p>
<p>Next let's set up some properties for data binding such as the <code>callInProgress</code> property relied upon by the <code>template</code> and add any methods that are expected to be in place, as show, in the template:</p>
<pre><code class="language-javascript">export default {
  name: 'CallFromBrowser',
  components: {
      'vue-tel-input': VueTelInput
  },
  
  data() {
    return {
      phone: {
        number: '',
        isValid: false,
        country: {}
      },
      infoMessage: "",
      callInProgress: false
    }
  },

  methods: {

    onInput({ number, isValid, country }) {
      this.phone.number = number;
      this.phone.isValid = isValid;
      this.phone.country = country;

      if(!isValid) {
        this.infoMessage = "Please enter a valid phone number"
      }
      else {
        this.infoMessage = `Thanks for entering a valid ${this.phone.country.name} phone number`
      }
    },

    controlCallClick() {
    }

  }
}
</script>

Die Funktion data Funktion gibt ein phone Objekt zurück, das wir in den onInput Handler einfügen. In diesem Handler setzen wir die Telefonnummer, die der Benutzer in die Komponente vue-tel-input Komponente eingegeben hat, sowie Eigenschaften, die die Gültigkeit der Telefonnummer und das Land, für das die Nummer gilt, darstellen.

Wir geben dem Benutzer auch eine Rückmeldung über die Gültigkeit der Rufnummer, indem wir die infoMessage Eigenschaft. Vue-Datenbindung bedeutet, dass der Wert, den wir hier einstellen, in der Benutzeroberfläche wiedergegeben wird.

Ein Stub controlCallClick Methode wird ebenfalls hinzugefügt, um das <button> angeklickt wird.

Ein letzter Schritt beim Einrichten der CallFromBrowser Komponente ist das Hinzufügen eines Stylings. Ersetzen Sie das bestehende <style> Element und den Inhalt durch das folgende:

<style scoped="">
.vue-tel-input {
  width: 200px;
  margin: auto;
}

.call-control {
  font-size: 11em; 
}

.call-control:before {
  content: '☎️';
}

.call-control.call-in-progress:before {
  content: '?'
}
</style>

Der Stil legt den Standard content des <button> auf das rote Telefon-Emoji (☎️). Wenn die call-in-progress Klasse vorhanden ist, dynamisch gesetzt, wenn die callInProgress Eigenschaft den Wert true dann wird das content stattdessen ein Telefonhörer-Emoji im alten Stil sein (?).

Der letzte Schritt zur Einrichtung der grundlegenden Benutzeroberfläche ist die Aktualisierung App.vue durch Ersetzen der template und script Tags. Lassen Sie das style Tag so wie es ist.

<template>
  <div id="app">
    <callfrombrowser>
  </callfrombrowser></div>
</template>

<script>
import CallFromBrowser from './components/CallFromBrowser.vue'

export default {
  name: 'app',
  components: {
    CallFromBrowser
  }
}
</script>

Ersetzen Sie <template> Inhalt, importieren die CallFromBrowser.vue Komponentendefinition und die Registrierung der importierten Komponente.

Jetzt können wir die Anwendung ausführen:

Wenn das Programm läuft, navigieren Sie in einem Browser zu http://localhost:8080 und probieren Sie die Eingabe von Telefonnummern in der vue-input-tel Komponente. Die Telefonnummer wird am unteren Rand der Benutzeroberfläche der App validiert.

Call from Browser simple user interface

Erstellen eines Benutzer-JWTs zur Anmeldung bei der Vonage-Plattform

Das Nexmo Stitch JavaScript SDK verbindet sich mit der Vonage-Plattform, um die In-App Voice-Funktionalität im Webbrowser zu ermöglichen. Um sich mit der Nexmo-Plattform zu verbinden, müssen wir login mit einem gültigen Benutzerauthentifizierungs-JWT (JSON Web Token) für den Anwendungsbenutzer, der die Berechtigungen dieses Benutzers definiert. Um ein Benutzer-JWT zu erstellen, müssen wir ein paar Dinge erstellen:

1. ein einfacher Server, der das User JWT generiert, das von der Vue.JS Komponente abgerufen werden kann CallFromBrowser Vue.JS-Komponente

2. eine Anwendung innerhalb der Vonage-Plattform - wir können dies mit der Nexmo CLI tun

3. ein Benutzer innerhalb der Anwendung für die aktuellen Benutzer der Webanwendung

Beginnen wir mit der Erstellung eines einfachen Servers. Erstellen Sie ein server Verzeichnis, installieren Sie ein paar Abhängigkeiten und erstellen Sie ein index.js und .env Dateien für die benötigten Funktionen.

Für den Server werden wir Folgendes verwenden Express.js mit der CORS- und Body-Parser-Middleware. dotenv wird verwendet, um die .env Datei zu laden, die ihrerseits Konfigurationen enthält, die wir nicht in der Versionskontrolle haben wollen. Wir haben auch die Nexmo Node.JS-Bibliothek installiert, die bei der Generierung von Benutzer-JWTs hilft.

Bevor wir uns den Servercode ansehen, müssen wir noch die Anwendung und den Benutzer für diese Anwendung erstellen. Wir können dies mit der Nexmo CLI tun:

Durch die Ausführung dieses Befehls wird eine Anwendungs-ID ausgegeben. Außerdem werden die Anwendungsdetails in eine .nexmo-app Datei hinzugefügt. Nehmen Sie die Anwendungs-ID und fügen Sie sie in die Datei .env Datei zusammen mit einer Variablen für den private.key Ort:

NEXMO_PRIVATE_KEY=private.key
NEXMO_APP_ID=YOUR_APPLICATION_ID

Der letzte Teil der Anwendungseinrichtung besteht darin, einen Benutzer innerhalb der Anwendung anzulegen. Es ist möglich, dies mit den Nexmo-Bibliotheken zu tun, aber in diesem Fall werden wir einen Benutzer mit der Nexmo-CLI einrichten:

Mit diesem Befehl wird der Benutzer für die Anwendungs-ID erstellt, die in der Datei .nexmo-app Datei. Fügen Sie eine Umgebungsvariable für den Benutzernamen in die Datei .env Datei hinzu.

NEXMO_PRIVATE_KEY=private.key
NEXMO_APP_ID=YOUR_APPLICATION_ID
NEXMO_APP_USER_NAME=demo

Öffnen Sie nun index.js um den grundlegenden Servercode hinzuzufügen:

// Load .env config
require('dotenv').config({
    path: __dirname + '/.env'
});

const Nexmo = require('nexmo')
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')

const app = express()
app.use(bodyParser.json())
app.use(cors())

// endpoint that doesn't authenticate the user
// it will simply return a JWT with every request
app.get('/no-auth', (req, res) => {
    res.json({userJwt: null})
})

app.listen(3000, () => console.log('Example app listening on port 3000!'))

Im obigen Code laden wir Express und richten es so ein, dass es eingehende Anfragen als JSON parst (wir werden dies später verwenden). Wir stellen Express auch so ein, dass es Cross-Origin Resource Sharing (CORS) unterstützt. Dies ist erforderlich, da die Vue.JS App auf localhost:8080 läuft und der JavaScript-Code im Browser einen Aufruf an diesen Server auf localhost:3000einem anderen Port läuft.

Sie können nun node index.js ausführen und dann auf http://localhost:3000/no-auth ausführen, um sicherzustellen, dass der Endpunkt das erwartete JSON zurückgibt.

User JWT with null value

Fügen wir nun den Code hinzu, um das User JWT zu generieren, das mit dem Vonage Client SDK für JavaScript verwendet werden soll.

const userAcl = {
    "paths": {
        "/v1/users/**": {},
        "/v1/conversations/**": {},
        "/v1/sessions/**": {},
        "/v1/knocking/**": {}
      }
}

// endpoint that doesn't authenticate the user
// it will simply return a JWT with every request
app.get('/no-auth', (req, res) => {
    const jwt = Nexmo.generateJwt(process.env.NEXMO_PRIVATE_KEY, {
        application_id: process.env.NEXMO_APP_ID,
        sub: process.env.NEXMO_APP_USER_NAME,
        exp: new Date().getTime() + 86400,
        acl: userAcl
    })

    res.json({userJwt: jwt})
})

Die userAcl Variablen liefern einen Satz von Ansprüchen oder Zugriffsregeln, die bei der Erstellung des JWT zusammen mit der Anwendungs-ID, einem sub für den Namen des Benutzers und eine exp als Verfallszeit für das JWT. Siehe die JWT und ACL Übersicht in Nexmo Developer für weitere Informationen.

Neustart des Knotens index.js Verarbeitung und Zugriff auf http://localhost:3000/no-auth zeigt an, dass ein echtes JWT generiert worden ist.

User JWT with real JWT value

Hinweis: Es kann manchmal nützlich sein, einen Blick auf JWT-Debugger um den Inhalt Ihres JWTs zu überprüfen.

Abrufen des Benutzer-JWT aus dem Webbrowser

Nachdem die JWT-Generierung abgeschlossen ist, können wir zum Client zurückkehren, um das auf dem Server erstellte Benutzer-JWT abzurufen.

Da es eine schlechte Praxis wäre, die Server-URL zu 100% hart zu kodieren, werden wir diese über eine Vue.JS-Eigenschaft mit einem Standardwert einstellen, der für unsere Entwicklungseinrichtung praktisch ist.

...

      callInProgress: false
    }
  },

  props: {
    jwtUrl: {
      type: String,
      default: process.env.VUE_APP_JWT_URL || "http://localhost:3000/no-auth"
    }
  },

Der jwtUrl Wert kann dann überschrieben werden, indem eine jwt-url Eigenschaft auf das <CallFromBrowser> Element überschrieben werden und die default kann geändert werden, wenn die Komponente gebaut wird, indem ein VUE_APP_JWT_URL Wert in einer .env Datei in unserem Top-Level-Verzeichnis. Für mehr Informationen siehe Vue.JS props und Vue CLI 3 Umgebungsvariablen und Modi.

Nachdem die Server-URL festgelegt wurde, können wir nun fetch den Benutzer-JWT erstellen. Vue.JS hat verschiedene Lebenszyklus-Hooks. Wir rufen das JWT innerhalb des created Hook. Um dies zu tun, definieren wir eine created Funktion innerhalb der CallFromBrowser Definition.

props: {
    jwtUrl: {
      type: String,
      default: process.env.VUE_APP_JWT_URL || "http://localhost:3000/no-auth"
    }
  },

  created() {
    fetch(this.$props.jwtUrl)
      .then(response => {
        return response.json();
      })
      .then(json => {
          console.log(json)
      })
      .catch(error => {
        console.error(error)
      })
  },

Stellen Sie sicher, dass Ihr Vue.JS Entwicklungsserver noch läuft (führen Sie yarn serve aus dem Verzeichnis call-from-browser Verzeichnis, falls nicht), navigieren Sie zu http://localhost:8080 und öffnen Sie Ihre Entwicklertools, um die Konsole zu überprüfen und stellen Sie sicher, dass der User JWT uns protokolliert.

JWT now present in browser and output via console.log

Hinzufügen des Vonage Client SDK für JavaScript

Mit dem User JWT im Client können wir dazu übergehen, das Vonage Client SDK für JavaScript einzubinden:

Als nächstes binden Sie das SDK in die CallFromBrowser.vue Komponente ein und importieren die ConversationClient Objektdefinition:

<script>
import 'vue-tel-input/dist/vue-tel-input.css'
import VueTelInput from 'vue-tel-input'

import ConversationClient from 'nexmo-stitch'

Sobald wir die erforderliche Definition aufgenommen haben, müssen wir eine neue Instanz der ConversationClient und login. Dies geschieht nach dem Abrufen des Benutzer-JWT:

created() {
    fetch(this.$props.jwtUrl)
      .then(response => {
        return response.json();
      })
      .then(json => {
        this.conversationClient = new ConversationClient({debug: true})

        return this.conversationClient.login(json.userJwt)
      })
      .then(app => {
        this.app = app

        // When the active member (the user) makes a call
        // keep a reference to the Call object so we can
        // hang up later
        this.app.on("member:call", (member, call) => {
            this.call = call
        });

        // Keep track of call status so we know how to
        // interact with the call e.g. hangup
        this.app.on("call:status:changed", (call) => {
          this.callInProgress =
            [
              "machine",
              "timeout",
              "unanswered",
              "rejected",
              "busy",
              "failed",
              "completed"
            ].indexOf(call.status) === -1;
        })
    })
    .catch(error => {
        console.error(error)
    })
  },

Nach der Auflösung des Login-Promise erhalten wir einen Verweis auf eine Darstellung der Anwendung über die app Variable. Wir behalten einen Verweis auf diese Anwendung für die zukünftige Verwendung (this.app) und binden auch an zwei Ereignisse der Anwendung.

Wir binden an member:call das ausgelöst wird, wenn der aktive Benutzer einen Anruf tätigt. Im Eventhandler speichern wir eine Referenz auf den aktuellen Aufruf mit this.call.

Wir binden auch an call:status:changed um den Status des Anrufstatus. Innerhalb des Event-Handlers aktualisieren wir die callInProgress Eigenschaft auf der Grundlage des Anrufstatus. Befindet sich der Anruf in einem der Endzustände, ist der Anruf nicht im Gange. Andernfalls ist der Anrufstatus "in Bearbeitung". Diese Zustände werden in der Eigenschaft <button> in der Vorlage widergespiegelt.

Telefonieren über den Webbrowser

Das letzte, was wir im Client tun müssen - bevor wir ein letztes Update auf dem Server durchführen und die App fertigstellen - ist die Handhabung des Benutzers, der auf die <button>.

    ...
    },

    controlCallClick() {
      if(this.callInProgress) {
        this.call.hangUp()
      }
      else if(this.phone.isValid) {
        this.app.callPhone(this.phone.number)
      }
    }

Oben haben wir die Logik controlCallClick mit der Logik, um zu prüfen, ob kein Anruf läuft und der Benutzer eine gültige Telefonnummer eingegeben hat, um den Anruf auszulösen. Wenn ein Anruf aktiv ist, sollte der Anruf aufgelegt werden. In beiden Fällen rufen wir die entsprechende Funktion mit der this.call Referenz auf, die in der member:call Ereignishandler gesetzt wurde.

Wenn alle clientseitigen Funktionen vorhanden sind, können Sie eine gültige Telefonnummer eingeben, auf die Schaltfläche "Anrufen" klicken und erhalten dann in der Konsole eine Fehlermeldung, die von der Vonage-Plattform stammt

gespräch:fehler:nicht-gefunden

conversation-not-found message in browser console

Wenn ein Anruf von der Nexmo-Plattform initiiert oder empfangen wird, stellt sie eine HTTP-Anfrage an eine answer_url für die entsprechende zugehörige Nexmo-Anwendung. Der Server, der diese HTTP-Anfrage erhält, muss ein Nexmo Conversation Control Object (NCCO) zurücksenden; eine Reihe von Anweisungen, die Nexmo darüber informieren, wie mit dem Anruf verfahren werden soll.

Verbinden des Browsers mit einem Telefon

Zurück in server/index.js Hinzufügen eines /answer Endpunkt zur Bearbeitung der GET Anfrage von der Vonage-Plattform zu bearbeiten:

app.get('/answer', (req, res) => {
    const ncco = [{
        "action": "connect",
        "from": process.env.NEXMO_FROM_NUMBER,
        "endpoint": [{
            "type": "phone",
            "number": req.query.to
        }]
    }]

    res.json(ncco)
})

Nexmo erwartet, dass eine JSON-Struktur, die NCCO, zurückgegeben wird, die angibt, wie mit dem Aufruf verfahren werden soll. Die obige ncco JSON-Struktur, die wir zurückgeben, informiert Nexmo über connect den Anruf an einen phone Endpunkt mit der Nummer, die durch den Wert in req.query.to - dem to Abfrageparameter in der eingehenden GET-Anfrage identifiziert wird. Diese Nummer ist die Nummer, die wir an this.app.callPhone in unserer Vue.JS-App übergeben haben.

_Anmerkungen:

1. Bitte denken Sie daran, dass wir keine Authentifizierung auf Anwendungsebene in unserer Webanwendung haben, so dass Sie diese selbst hinzufügen müssen. So können Sie z. B. innerhalb des Antwort-URL-Endpunkts die req.query.to und req.query.from überprüfen, um sicherzustellen, dass der Benutzer (identifiziert durch from) berechtigt ist, den angeforderten Anruf zu tätigen.

2. Wenn Sie eine virtuelle Nexmo-Telefonnummer haben, sollten Sie einen NEXMO_FROM_NUMBER Eintrag in der .env Datei hinzufügen, damit die Empfänger von Telefonanrufen eine Nummer bei ihrem eingehenden Anruf sehen. Andernfalls kann es sein, dass die Nummer als "Privatnummer" oder "Unbekannt" angezeigt wird.

Starten Sie den Node-Prozess für den Server neu, damit er mit dem aktualisierten Code ausgeführt wird.

Schließlich müssen wir es der Nexmo-Plattform ermöglichen, die Antwort-URL zu erreichen. Um dies zu tun, verwenden Sie Ngrok, um einen lokalen Tunnel zu erstellen localhost:3000.

$ ngrok http 3000

Ngrok output in a terminalUnd aktualisieren Sie die answer_url für Ihre Nexmo-Anwendung, um die Ngrok-Tunnel-URLs über die Nexmo-CLI zu nutzen.

$ nexmo app:update NEXMO_APP_ID "call-from-browser" https://4ca73ac6.ngrok.io/answer https://4ca73ac6.ngrok.io/event

Hinweis: Sie finden die NEXMO_APP_ID unter server/.env oder server/.nexmo-app

Gehen Sie zurück in die Vue.JS-App im Browser, geben Sie eine Telefonnummer ein und klicken Sie auf die Schaltfläche, um einen ausgehenden Anruf über Ihren Webbrowser zu tätigen.

Full Vue.JS Call from Browser application working alongside screenshot of phone ringing

Schlussfolgerung

Der Zweck dieses Blog-Beitrags war es, zu zeigen, wie man eine App erstellt, die es einem Benutzer ermöglicht, jedes Telefon auf der Welt direkt von einem Webbrowser aus anzurufen, indem man Vue.JS und In-App Voice mit dem Vonage Client SDK für JavaScript verwendet. Es bietet die Grundlagen und hat hoffentlich Inspiration dafür geliefert, welche Anwendungsfälle dies ermöglichen kann. Oh, und Sie könnten die App auch aktualisieren, um eingehende Telefonanrufe zu unterstützen.

Wie bereits zu Beginn dieses Beitrags erwähnt, befindet sich In-App Voice in der Developer Preview. Bitte lassen Sie uns wissen, ob Sie bei der Entwicklung dieser App Erfahrungen gemacht haben oder ob Sie sonstiges Feedback haben, indem Sie sich der Vonage Gemeinschaft Slack.

Wohin als nächstes

Wenn Sie diesen Blogbeitrag interessant fanden, sollten Sie sich auch die folgenden Ressourcen ansehen:

• In-App Voice-Dokumente

• In-App Messaging-Dokumente

• Erstellen einer Chat-Anwendung mit Angular Material und dem Nexmo In-App JavaScript SDK

• Erstellung eines Peer-to-Peer Voice Journals mit Nexmo Voice APIs, Python und Vue.JS