Wie man mit ASP.NET Core MVC Audio in einem Anruf abspielt

Wenn Sie Anwendungen entwickeln, die sprachgesteuert sind, d. h., sie können Telefonanrufe tätigen und entgegennehmen, müssen Sie vor allem in der Lage sein, programmgesteuert Audio in den Anruf einzubringen.

Dies dient als Grundlage für IVRs, ein Warnsystem, dass Sie mit einem Anruf verbunden werden, als Aufforderung, etwas zu tun, oder auch nur als Warteschleifenmeldung. Ohne die Möglichkeit, Audio in einen Anruf zu spielen, gibt es nur wenige Anwendungsfälle für sprachgesteuerte Anwendungen, die über die Sprachübertragung hinausgehen.

In diesem Tutorial werden wir untersuchen, wie man mit der Wiedergabe von Audio in Anrufen mit Sprach-API von Vonage und ASP.NET Core MVC.

Direkt zum Code springen

Wenn Sie dieses Tutorial überspringen und direkt zum Code springen möchten, finden Sie alles in GitHub.

Voraussetzungen

• Wir benötigen das neueste .NET Core SDK, ich verwende 3.1

• Für dieses Tutorial werden wir Visual Studio Code verwenden. Natürlich funktioniert dies auch mit Visual Studio und Visual Studio für Mac. Es gibt nur einige leicht unterschiedliche Schritte für die Einrichtung und Ausführung.

• Wir testen dies mit ngrok - testen, also folgen Sie bitte den Anweisungen zur Einrichtung.

• Wir benötigen npm um das vonage-cli zu holen

  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.

  

  Sind Sie bereit, mit dem Bau zu beginnen?

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

Überblick über das Thema

Es gibt zwei Methoden, die wir durchsprechen werden, um Audio in einem Anruf abzuspielen.

1. Wenn unsere Anwendung aufgerufen wird, gibt sie ein NCCO (Nexmo Call Control Object) zurück, das Vonage mitteilt, was in den Anruf eingespielt werden soll.

2. Wir werden die Vonage Voice API (VAPI) verwenden, um einen Anruf zu tätigen und Audio in den von uns erstellten Anruf zu spielen.

In beiden Fällen werden wir die Audio-Streaming-Funktion verwenden. Damit können wir eine Audiodatei in einem Anruf abspielen. Ich wäre jedoch nachlässig, wenn ich nicht darauf hinweisen würde, dass es nicht nur möglich ist, Audiodateien in Anrufen abzuspielen, sondern dass es auch zahlreiche Möglichkeiten gibt, die Wiedergabe einer Anfrage anzupassen - sei es durch die Verwendung der Text-To-Speech(TTS) API oder über Websockets um dynamische Audioströme in einen Anruf einzubinden.

Einrichten der Nexmo CLI

Wenn npm installiert ist, können wir fortfahren und die Nexmo CLI installieren und konfigurieren:

Damit ist die Nexmo-CLI eingerichtet und einsatzbereit.

Ngrok laufen lassen

Ich werde alles auf den Boden werfen. localhost:5000. Führen Sie ngrok aus, um öffentlich auf localhost:5000.

Notieren Sie sich die URL, unter der ngrok läuft. In meinem Fall läuft er auf http://7ca005ad1287.ngrok.io. Dies wird die Basis-URL für meine Webhooks in Zukunft sein.

Unsere Vonage-Anwendung erstellen

Eine Vonage-Anwendung ist ein Konstrukt, das es uns ermöglicht, unsere Nummern und Webhooks einfach zu verknüpfen. Sie können eine Anwendung im Vonage Dashboarderstellen, oder Sie können sie einfach mit der CLI erstellen.

Damit wird eine Vonage-Anwendung erstellt. Alle eingehenden Anrufe zu dieser Anwendung werden dann mit der Antwort-URL verknüpft: http://7ca005ad1287.ngrok.io/webhooks/answer. Alle Anrufereignisse, die in dieser Anwendung auftreten, werden an folgende Adresse weitergeleitet http://7ca005ad1287.ngrok.io/webhooks/events. Dieser Befehl gibt zwei Dinge aus.

1. Ihre Anwendungs-ID - Sie können diese Anwendungs-ID im Vonage Dashboard

2. Der private Schlüssel Ihrer Anwendung. Stellen Sie sicher, dass Sie diesen Schlüssel in einer Datei speichern - ich nenne meinen private.key.

Verknüpfen Sie Ihre Vonage-Nummer mit Ihrer Anwendung

Wenn Sie Ihr Konto erstellen, wird Ihnen eine Vonage-Nummer zugewiesen. Diese können Sie im Abschnitt Abschnitt Nummern des Dashboards. Alternativ können Sie auch einfach den Befehl nexmo number:list in Ihrer Konsole ausführen, um Ihre Nummern aufzulisten. Nehmen Sie Ihre Vonage-Nummer und Ihre Anwendungs-ID und führen Sie Folgendes aus:

Wenn Sie dies getan haben, werden Ihre Anrufe problemlos an Ihre URL weitergeleitet.

Projekt erstellen

Navigieren Sie in Ihrer Konsole zu Ihrem Quellcodeverzeichnis und führen Sie den folgenden Befehl aus:

Dadurch werden ein Verzeichnis und ein Projekt namens PlayAudioMvc, führen Sie den Befehl cd aus, um Ihr Verzeichnis in PlayAudioMvczu wechseln, und führen Sie den folgenden Befehl aus, um die Vonage-Bibliothek zu installieren.

Führen Sie aus. code . um Visual Studio Code zu öffnen.

Bearbeiten Sie den Controller

Using-Anweisungen hinzufügen

Wir werden huckepack mit der Datei HomeController.cs Datei, öffnen Sie Controllers\HomeController.cs und fügen Sie die folgenden using-Anweisungen oben hinzu:

using Microsoft.Extensions.Configuration;
using Vonage.Voice.Nccos.Endpoints;
using Vonage.Voice.Nccos;
using Vonage.Voice;
using Vonage.Request;

Konfiguration einspeisen

Wir werden die Dependency Injection nutzen, um einige der konfigurierbaren Elemente für unsere App zu erhalten, nämlich die appId und den privaten Schlüssel. Zu diesem Zweck, fügen Sie ein IConfiguration Feld zu der HomeControllerhinzu, dann fügen Sie ein IConfigurationParameter zum Konstruktor hinzu und weisen Sie dieses IConfiguration Feld dem Parameter zu. Ihr Konstruktor sollte nun wie folgt aussehen. Wenn wir schon dabei sind, sollten wir dieser Klasse auch eine Konstante hinzufügen, die auf eine Audiodatei im Web verweist. Es gibt eine brauchbare Konstante, die Vonage für Testfälle zur Verfügung stellt, auf die wir verweisen werden:

const string STREAM_URL = "https://nexmo-community.github.io/ncco-examples/assets/voice_api_audio_streaming.mp3";

private readonly IConfiguration _config;

public HomeController(ILogger<HomeController> logger, IConfiguration config)
{
    _config = config;
    _logger = logger;
}

Antwort-Endpunkt hinzufügen

Wir werden uns mit Fall 1 befassen: Wir erhalten einen Anruf von einem Benutzer und möchten eine Audiodatei abspielen. Wir müssen eine Aktion zu unserem Controller hinzufügen, die einen JSON-String zurückgibt. Fügen Sie das Folgende zu unserer HomeController Klasse hinzu:

[HttpGet("/webhooks/answer")]
public string Answer()
{
    var streamAction = new StreamAction{
        StreamUrl = new string[]
        {
            STREAM_URL
        }
    };
    var ncco = new Ncco(streamAction);
    return ncco.ToString();
}

Wenn sich jemand einwählt, stellt Vonage eine Abfrage auf diese URL. Diese Methode nutzt unseren NCCO-Builder, um einen NCCO zu erstellen; wir konvertieren den NCCO dann in einen String und geben ihn zurück. Es wird ein JSON-String zurückgegeben, der wie folgt aussieht:

[{"streamUrl":["https://nexmo-community.github.io/ncco-examples/assets/voice_api_audio_streaming.mp3"],"action":"stream"}]

Dial-Out hinzufügen

Die nächste Aktion, die wir hinzufügen müssen, ist eine Aktion zum Auswählen. Dies ist ein wenig komplizierter. Sie muss unsere appId und den Schlüssel aus der Konfiguration abrufen. Außerdem braucht sie eine Nummer, die sie anrufen soll, und eine Nummer, von der aus sie anrufen soll, nämlich Ihre Vonage-Nummer. Dann wird sie einen Voice Client aufbauen, eine Anforderungsstruktur erstellen und den Anruf tätigen:

[HttpPost]
public IActionResult MakePhoneCall(string toNumber, string fromNumber)
{
    var appId = _config["APPLICATION_ID"];
    var privateKeyPath = _config["PRIVATE_KEY_PATH"];

    var streamAction = new StreamAction{ StreamUrl = new string[] { STREAM_URL }};
    var ncco = new Ncco(streamAction);

    var toEndpoint = new PhoneEndpoint{Number=toNumber};
    var fromEndpoint = new PhoneEndpoint{Number=fromNumber};

    var credentials = Credentials.FromAppIdAndPrivateKeyPath(appId, privateKeyPath);
    var client = new VoiceClient(credentials);
    var callRequest = new CallCommand { To = new []{toEndpoint}, From = fromEndpoint, Ncco= ncco};
    var call = client.CreateCall(callRequest);
    ViewBag.Uuid = call.Uuid;
    return View("Index");
}

Ein Frontend hinzufügen

Wenn wir schon beim Thema "Huckepack" sind, werden wir auch unsere Home-Ansicht "huckepack" nehmen. Öffnen Sie Views\Home\Index.cshtmlund entfernen Sie das Boilerplate-Div, das sich dort befindet. Wir werden ein einfaches Formular hinzufügen, das an unsere MakePhoneCall Aktion sendet, und wenn die Aktion beendet ist, wird die UUID des Telefonanrufs angezeigt. In diesem Sinne fügen wir unserer Datei Folgendes hinzu:

@using (Html.BeginForm("MakePhoneCall", "home", FormMethod.Post))
{
    <div class="form-vertical">
        <h4>Call<h4>
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group">
                    @Html.Label("To")
                    <div>
                        @Html.Editor("toNumber", new { htmlAttributes = new { @class = "form-control" } })
                    </div>
                </div>

                <div class="form-group">
                    @Html.Label("From")
                    <div>
                        @Html.Editor("fromNumber", new { htmlAttributes = new { @class = "form-control" } })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <button type="submit">Send</button>
                    </div>
                </div>
    </div>
}
@if(@ViewBag.Uuid != null){
    <h2>Call UUID: @ViewBag.Uuid</h2>
}

Konfigurieren Sie Ihre App

Konfig-Variablen hinzufügen

Denken Sie daran, dass wir die IConfiguration verwenden, um unsere appId und den Pfad zu unserem privaten Schlüssel zu erhalten. In diesem Sinne, öffnen wir appsettings.json und fügen die folgenden Schlüssel hinzu:

"APPLICATION_ID":"APPLICATION_ID",
"PRIVATE_KEY_PATH":"C:\\path\\to\\your\\private.key"

Konfigurieren Sie Kestrel oder IIS Express

Da ich VS Code verwende, wird meine Anwendung natürlich Kestrel verwenden. Unabhängig davon, ob Sie Kestrel oder IIS Express verwenden, gehen Sie in properties\launchSettings.json und wählen Sie unter PlayAudioMvc->applicationUrl lassen Sie den https://localhost:5001 Endpunkt - da wir mit ngrok kein SSL verwenden und wir auf Port 5000 verweisen. Wenn Sie IIS Express verwenden, gehen Sie in iisSettings->iisExpressdie Option applicationUrl auf http://localhost:5000 und die sslPort auf 0.

Testen Ihrer Anwendung

Danach müssen Sie nur noch den Befehl dotnet run und Ihre Anwendung wird gestartet und auf Port 5000 gehostet. Jetzt müssen Sie nur noch Ihre Anwendung anrufen - Sie können sie über Ihre Vonage-Nummer anrufen und einen Anruf aus Ihrer Anwendung tätigen. Sie können den Anruf tätigen, indem Sie zu localhost:5000 navigieren und das Formular ausfüllen und absenden.

Ressourcen

• Sie können viel mehr über die Voice API erfahren, wenn Sie unsere Dokumentations-Website

• Sie können viel über die Arbeit mit Sprach-APIs, insbesondere mit NCCOS, lernen, indem Sie sich unsere NCCO-Referenz

• Der gesamte Code dieses Tutorials ist verfügbar auf GitHub