https://d226lax1qjow5r.cloudfront.net/blog/blogposts/stream-audio-node-red-dr/stream-audio-featured-image.png

Wie man mit Node-RED Audio in einen Anruf streamt

Zuletzt aktualisiert am April 28, 2021

Lesedauer: 12 Minuten

Hinweis: Einige der in diesem Artikel beschriebenen Tools oder Methoden werden möglicherweise nicht mehr unterstützt oder sind nicht mehr aktuell. Für aktualisierte Inhalte oder Support, überprüfen Sie unsere neuesten Beiträge oder kontaktieren Sie uns auf dem Vonage Community Slack

Dies ist der fünfte Artikel in einer Reihe von Tutorials zum Thema "Erste Schritte mit Nexmo und Node-RED".

In den vorangegangenen Tutorials haben Sie gelernt, wie man eingehende Anrufe behandelt und ausgehende Anrufe mit der Nexmo Voice API tätigt. Für diese Beispiele haben wir Text-to-Speech verwendet, aber manchmal ist ein menschlicherer Ansatz erforderlich. Es ist immer schön, von einer menschlichen Stimme begrüßt zu werden, wenn man ein Unternehmen anruft, anstatt von dem allseits bekannten freundlichen Roboter aus der Nachbarschaft. Außerdem vergeht die Zeit schneller, wenn Sie während des Gesprächs gute Musik hören.

In diesem Blog-Beitrag werden wir das Ganze ein wenig abwandeln und Ihnen zeigen, wie Sie Audio in einen Anruf streamen können. Am Ende werden Sie in der Lage sein, einem Anrufer eine Audiodatei vorzuspielen, und Sie werden wissen, wie Sie Audio an den Empfänger eines ausgehenden Anrufs streamen können.

Holen Sie sich die Flows aus der Node-RED-Bibliothek oder folgen Sie ihnen!

Voraussetzungen

Bevor Sie beginnen, benötigen Sie einige Dinge:

  • Node.js und Node-RED auf Ihrem Rechner installiert

  • Eine Möglichkeit, Ihren Server dem Internet auszusetzen. Das bedeutet entweder, dass Sie eine gehostete Version von Node-RED verwenden, oder, falls Sie lokal entwickeln, einen Tunneldienst wie ngrok - machen Sie sich damit vertraut Erste Schritte mit Ngrok in Node-RED Lehrgang

    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.

Erlangung von Berechtigungsnachweisen

Um mit der Sprach-API interagieren zu können, müssen Sie einige Dinge beachten. Sobald Sie ein Nexmo-Konto erstellt haben, gehen Sie zum Dashboard um Ihren API-Schlüssel und Ihr Geheimnis zu finden.

Als Nächstes benötigen Sie eine Voice-fähige virtuelle Nummer. Gehen Sie zu Nummern > Nummern kaufen um eine zu erhalten.

Buy Number DashboardBuy Number Dashboard

Einrichten des Node-RED-Editors

Zunächst müssen Sie installieren die Laufzeitumgebung und den Editor installieren. Dies kann entweder auf Ihrem lokalen Rechner, auf einem Einplatinencomputer (z. B. Raspberry Pi) oder auf einer Reihe von in der Cloud gehosteten Optionen erfolgen. In diesem Beispiel wird Ihr lokaler Rechner verwendet. Sobald Sie Node-RED global installiert haben, geben Sie einfach den folgenden Befehl in Ihr Terminal ein, um loszulegen.

node-red

Sie können dann auf den Node-RED-Editor zugreifen, indem Sie Ihren Browser auf http://localhost:1880.

Sobald Sie Ihren Editor geöffnet haben, müssen Sie die Nexmo-Knoten installieren. Dies können Sie unter der Palette verwalten tun, indem du nach dem node-red-contrib-nexmo Paket suchen und auf Installieren klicken.

Install Node RedInstall Node Red

Jetzt sollten Sie alle Nexmo-Knoten auf der linken Seite Ihres Bildschirms sehen, zusammen mit den anderen Standardknoten.

Lokalen Server für das Internet freigeben

Als nächstes müssen Sie Ihren lokalen Server dem Internet aussetzendamit Nexmo auf ihn zugreifen kann. Wenn Sie Node-RED auf einem öffentlichen Webserver statt auf Ihrem lokalen Rechner betreiben, können Sie diesen Schritt überspringen.

Andernfalls kann man dies bequem mit einem Tunneldienst wie ngrok.

Zunächst müssen Sie den Ngrok-Knoten installieren. Dazu öffnen Sie Palette Verwalten aus dem Hamburger-Menü in Ihrem Node-RED-Editor, suchen Sie nach dem node-red-contrib-ngrok Paket und klicken Sie auf Installieren. Nach einem Neustart des Editors sollte der ngrok Knoten in der Knotenpalette erscheinen.

ngrok manage palettengrok manage palette

Der Knoten ngrok Knoten nimmt die Zeichenketten auf oder aus als Eingabe, um den Tunnel zu starten/stoppen, und gibt die ngrok-Hostadresse als msg.payload.

Der einfachste Weg, dies einzurichten, ist die Verkabelung von zwei inject Knoten als ngrok Knoten zu verbinden, einen mit der Nutzlast der Zeichenkette auf und der andere mit aus. Zur einfacheren Verwendung könnten Sie auch die Name dieser Knoten in den Knoteneigenschaften entsprechend einstellen, so dass klar ist, welche Funktionen sie haben.

Um die Host-Adresse in der Debug-Seitenleiste anzuzeigen, verbinden Sie als nächstes einen debug Knoten nach ngrok.

Als letzter Schritt vor dem Drücken von bereitstellenaufrufen, öffnen Sie die ngrok Knoteneigenschaften und geben Sie die Anschlussnummer an. Im Falle von Node-RED ist der Standardwert 1880. Die ngrok-Region ist standardmäßig USA, Sie können aber auch Europa oder Asien wählen. Sie können auch Ihr Authtoken für Ihr ngrok-Konto hinzufügen, wenn Sie eines haben. Wenn Sie keinen haben, können Sie diesen Schritt auch überspringen. Der Node wird eine Warnung ausgeben, dass er nicht vollständig konfiguriert ist, aber das ist kein Problem.

ngrok propertiesngrok properties

Und schon ist alles fertig! Sobald Sie auf "Bereitstellen" und auf die Schaltfläche auf inject klicken, navigieren Sie zu der im Debug-Bereich angezeigten URL (YOUR_URL für zukünftige Referenzen), um Ihren Node-RED-Editor unter einer öffentlichen Adresse zu finden.

ngrok noderedngrok nodered

Ereignis-Webhook

Wenn Sie Ereignisse über den Verlauf Ihres Anrufs erhalten möchten, können Sie auch einen Ereignis-Webhook einrichten.

Verbinden Sie einen http Eingangsknoten mit einem http response Knoten, sowie mit einem debug Knoten, so dass Sie Ihre Aufrufereignisse im Debug-Bereich sehen können.

Im Knoten http Eingabeknoten, wählen Sie POST als Method - da dies die Standardmethode in Ihren Einstellungen der Sprachanwendungaus, und füllen Sie das Feld URL Feld mit /event.

Der Knoten http response Knoten sollte den Wert 200 setzen als Status codegesetzt sein, aber keine Sorge, dies ist auch der Standardwert.

event webhookevent webhook

Bereitstellen der Audiodatei

Weiter zu der Audiodatei, die Sie in den Anruf einspielen möchten. Wenn Sie sie irgendwo online haben, vergewissern Sie sich, dass sie entweder im MP3- oder WAV-Format vorliegt, notieren Sie sich die URL, unter der sie gehostet wird, und fahren Sie mit dem nächsten Schritt fort.

Eine andere Möglichkeit besteht darin, sie von Ihrem Computer aus zu starten. Dazu verbinden Sie nacheinander einen http Eingangsknoten, einen file in, a change und einen http response Knoten.

Im Knoten http Eingabeknoten, wählen Sie GET als eine Method und füllen Sie das Feld URL Feld mit etwas wie /filename.mp3aus, so dass Sie Ihre Audiodatei unter folgender Adresse finden können IHRE-URL/Dateiname.mp3.

Als nächstes öffnen Sie die file in Knoteneigenschaften, geben Sie den absoluten lokalen Pfad zur Audiodatei, die Sie bereitstellen, in das Feld Filename Feld ein und setzen Sie das Output auf . a single Buffer object. Dadurch wird der Inhalt der Datei als Binärpuffer gelesen.

Sie müssen auch angeben, welche Art von Datei Sie bereitstellen, und hier kommt der change Knoten ins Spiel kommt. Setzen Sie msg.headers auf {} und msg.headers.content-type auf audio/mp3.

serve up audio noderedserve up audio nodered

Nachdem Sie nun auf Bereitstellendrücken, zeigen Sie in Ihrem Browser auf YOUR_URL/filename.mp3 und Sie sollten Ihre Audiodatei abspielen hören.

Erstellen einer Nexmo-Anwendung

Einige der Nexmo-APIs, einschließlich der Voice-API, verwenden Nexmo Applications, um Sicherheits- und Konfigurationsinformationen zu speichern, die für die Verbindung mit Nexmo-Endpunkten erforderlich sind.

In der Nexmo Node-RED-Palette haben mehrere Knoten die Möglichkeit, diese Anwendungen zu erstellen: getrecording, earmuff, mute, hangup, transfer, createcall, playaudio, playtts und playdtmf.

Verwenden wir den createcall Knoten, der auch in der Lage sein wird, einen ausgehenden Anruf mit dem NCCO zu tätigen, den Sie als nächstes bauen werden.

Sobald Sie ihn in Ihrem Arbeitsbereich haben, doppelklicken Sie auf den createcall Knoten, um den Knoteneditor zu öffnen. Neben dem Nexmo Credentialswählen Sie "Add new nexmovoiceapp..." aus dem Dropdown-Menü und klicken Sie auf die Schaltfläche "Edit". Füllen Sie die untenstehenden Angaben aus und klicken Sie auf Create New Application.

KEY DESCRIPTION
Name Choose a name for your Voice Application, for example Stream audio.
API Key Your Nexmo API key, shown in your account overview.
API Secret Your Nexmo API secret, shown in your account overview.
Answer URL The URL that Nexmo makes a request to when handling inbound calls. In case you're only interested in making an outbound call, just use http://example.com - you won't be needing it. Otherwise, set it to YOUR_URL/answer, you'll be hosting a Nexmo Call Control Object (NCCO) here. - more about this later on.
Event URL Nexmo will send call events (e.g. ringing, answered) to this URL. If you’d like to receive events about the progress of your call, make sure your server is exposed to the internet, then use YOUR_URL/event for this field. Otherwise, feel free to use http://example.com - this will respond with 200 OK. You could also override this eventURL for a specific createCall node in its node properties.

Node-RED erstellt dann eine neue Nexmo-Anwendung auf Ihrem Konto und füllt die Felder für die App-ID und den privaten Schlüssel aus, die Sie speichern können. Nun finden Sie diese Anwendung in Ihrem Nexmo Dashboard unter Sprache . > Ihre Anwendungen.

create voice app examplecreate voice app example

Abspielen einer Audiodatei für einen Anrufer

Verknüpfung Ihrer virtuellen Nummer

Als nächstes müssen Sie Ihre virtuelle Nummer mit der Anwendung verknüpfen, die zuvor vom createcall Knoten.

Finden Sie die soeben erstellte Sprachanwendung in Ihrem Nexmo Dashboard, indem Sie zu Sprache > Deine Anwendungen. Klicken Sie auf den Namen dieser Anwendung, dann unter Nummern auf die Registerkarte Link neben der virtuellen Nummer, die Sie zuvor gemietet haben.

link number voicelink number voice

Aufbau des Nexmo Call Control Object (NCCO)

Nexmo-Anrufe werden gesteuert durch Nexmo Anrufsteuerungs-Objektedie auch als NCCOs bezeichnet werden. Ein NCCO definiert eine Liste von Aktionen, die bei der Bearbeitung eines Anrufs ausgeführt werden. Es stehen viele verschiedene Aktionen zur Verfügung, finden Sie die entsprechenden Knoten in der Nexmo-Palette in Ihrem Node-RED-Editor oder lesen Sie die NCCO-Referenz um mehr über sie zu erfahren.

Wenn Sie eingehende Anrufe bearbeiten, müssen Sie Ihr NCCO unter einer Antwort-URLgehostet wird, und für dieses Tutorial werden Sie die stream Aktion.

Ziehen Sie den stream Knoten in Ihren Arbeitsbereich, setzen Sie den Stream URLund verbinden Sie ihn dann mit einem voice webhook Eingangsknoten und einem return NCCO Ausgangsknoten.

Als nächstes wählen Sie im Knoten voice webhook Knoten, wählen Sie GET als Methode und geben Sie etwas wie /answer in das Feld Antwort-URL ein.

stream ncco answer urlstream ncco answer url

Gehen Sie schließlich zu den createcall Knoteneigenschaften, wählen Sie URL aus der Answer aus und füllen Sie das Feld mit YOUR_URL/answer.

Rufen Sie Ihre verknüpfte Nexmo-Nummer an, lehnen Sie sich zurück und genießen Sie! Ihre Audiodatei wird auf Sie warten. Psst, Sie können Ihre Anrufe auch in der Debug-Seitenleiste verfolgen!

Streaming einer Audiodatei in ein Telefongespräch

Aufbau des Nexmo Call Control Object (NCCO)

Nach dem Aufbau des NCCO wird dieser an den createcall Knoten weitergegeben, der dann für den ausgehenden Anruf verwendet wird. Dieser createcall Knoten nimmt 3 Arten von Eingaben für NCCO im Answer Feld: JSON, URL oder msg.ncco. Je nachdem, welche Sie wählen, gibt es 3 entsprechende Möglichkeiten, den NCCO wie folgt aufzubauen.

msg.ncco

Ziehen Sie den stream Knoten in Ihren Arbeitsbereich, doppelklicken Sie darauf, um die Knoteneigenschaften zu öffnen, und setzen Sie das Feld Stream URL {} auf den Link, unter dem Ihre Audiodatei gehostet wird -- YOUR_URL/filename.mp3. Beachten Sie das {} Zeichen neben der Beschriftung, das anzeigt, dass dieser Wert dynamisch gesetzt werden kann, mit Mustache-Vorlage. Sie können auch den Wert Barge In, Loopund Level Werte setzen, obwohl diese nicht erforderlich sind. Siehe den Abschnitt Stream der NCCO-Referenz, um mehr darüber zu erfahren.

Als nächstes verdrahten Sie stream die Ausgabe des Knotens in den createcall Knoten, dann unter den createcall Knoteneigenschaften die Option msg.ncco aus dem Answer Dropdown-Menü.

stream msg nccostream msg ncco

JSON

Wenn Sie Ihre NCCO lieber als JSON schreiben möchten, anstatt die Aktionsknoten zu verwenden, können Sie dies im createcall Knoten tun. Öffnen Sie die Knoteneigenschaften und wählen Sie JSON im Feld Answer Feld. Erweitern Sie den JSON-Editor und fügen Sie das unten stehende Snippet ein:

[
    {
        "action": "stream",
        "streamUrl": ["https://YOUR_URL/filename.mp3"]
    }
]

Antwort-URL

Alternativ können Sie das NCCO auch über eine AnswerURL bereitstellen. Ziehen Sie den stream Knoten in Ihren Arbeitsbereich, setzen Sie den Stream URLund verbinden Sie ihn dann mit einem voice webhook Eingabeknoten und einem return NCCO Ausgangsknoten. Als nächstes wählen Sie im voice webhook Knoten, wählen Sie GET als Methode und geben Sie /answer in das Feld Antwort-URL ein.

stream ncco answer urlstream ncco answer url

Gehen Sie schließlich zu den createcall Knoteneigenschaften, wählen Sie URL aus der Answer aus und füllen Sie das Feld mit YOUR_URL/answer.

Ausgehende Anrufe tätigen

Als Nächstes wollen wir einen genaueren Blick auf die createcall Knoten-Eigenschaften. Um den ausgehenden Anruf tatsächlich tätigen zu können, müssen Sie noch ein paar weitere Angaben machen.

Wählen Sie zunächst Phone aus dem Endpoint Dropdown-Menü aus. Dadurch wird der Anruf an eine Telefonnummer weitergeleitet, die Sie im Textfeld neben dem Number{} Bezeichnung.

Beachten Sie das {} Zeichen, das bedeutet, dass Mustache-Vorlage für diese Felder unterstützt wird. Sie können hier eine Telefonnummer fest eincodieren, oder sie dynamisch mit einem inject Knotens und in diesem Fall mit einem Verweis auf {{msg.payload}}.

Gehen Sie zum nächsten Schritt über und legen Sie eine Ihrer virtuellen Nummern als die From{} Nummer ein.

edit create calledit create call

Fügen Sie einen inject Knoten hinzu, um den Fluss auszulösen, und verdrahten Sie ihn als Eingabe für den Pfad, der den createcall Knoten enthält. In seinen Knoteneigenschaften können Sie Number aus dem Payload auswählen und in das Textfeld daneben die Telefonnummer eingeben, die Sie im E.164-Format anrufen möchten. Zum Beispiel 447401234567. Vergessen Sie in diesem Fall nicht, auf diese Nummer mit {{msg.payload}} in den createcall Knoteneigenschaften als den Wert von Number{}.

Um einen besseren Einblick in das zu bekommen, was beim Aufruf passiert, verdrahten Sie die createcallAusgabe in einen debug Knoten.

Jetzt drücken Bereitstellen und klicken Sie auf den inject Schaltfläche des Knotens - Ihr Telefon sollte jetzt jeden Moment klingeln! Sie können den Ablauf Ihres Anrufs auch in der Debug-Seitenleiste verfolgen, wenn Sie einen Ereignis-Webhook implementiert haben.

stream outbound debugstream outbound debug

Wie geht es weiter?

Teilen Sie:

https://a.storyblok.com/f/270183/372x373/36054b72d0/julia-biro.png
Julia BiroAdvokat für Entwickler

Julia hat es sich zur Aufgabe gemacht, andere Entwickler durch die Erstellung von Tutorials, Anleitungen und praktischen Ressourcen zu unterstützen. Mit ihrem Hintergrund in den Bereichen Öffentlichkeitsarbeit und Bildung möchte sie Technologien zugänglicher machen und die Erfahrung von Entwicklern insgesamt verbessern. Man kann sie oft bei lokalen Veranstaltungen antreffen.