https://d226lax1qjow5r.cloudfront.net/blog/blogposts/how-to-play-audio-to-a-caller-in-asp-net-core-dr/play-audio-asp-net-core.png

Cómo reproducir audio a una persona que llama en ASP.NET Core

Publicado el May 12, 2021

Tiempo de lectura: 3 minutos

Bienvenido al segundo tutorial de cómo utilizar Voice API con ASP.NET con ASP.NET. Para consultar otros tutoriales, visite la página Más información al final de esta entrada.

En el post anterior, aprendimos cómo realizar una llamada telefónica de texto a voz en una aplicación web ASP.NET. En este post, aprenderemos cómo reproducir audio a una persona que llama. Suena divertido, ¿verdad? Pero eso no es todo. También descubriremos cómo crear dinámicamente objetos de control de llamadas de Vonage (NCCO) en código y utilizarlos en nuestra aplicación. Bonificación: Utilizaremos un proyecto ASP.NET Core para esta demostración.

Empecemos.

are you ready gifare you ready gif

Requisitos previos para usar Voice API de Vonage con ASP.NET

  • Visual Studio 2017

  • Un proyecto creado para esta serie de tutoriales, que puedes encontrar en Github

  • Opcional: La CLI de Vonage

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.

Configuración

Ya que puedes o no haber leído el primer tutorial de esta serie -que deberías, por cierto- vamos a repasar lo que necesitamos antes de sumergirnos en el código.

Para poder utilizar Voice API de Vonagenecesitarás una aplicación de voz para almacenar los datos de configuración y generar un par de claves pública/privada.

¿Cómo hacerlo? No se preocupe, le tengo cubierto. El sitio Voice API de Vonage con ASP.NET: Antes de comenzar tiene un excelente resumen de todos los pasos de configuración necesarios.

En tu proyecto, en el archivo appsettings.json, asegúrate de inicializar Vonage con tus credenciales de API, así como el ID de la aplicación y la clave privada que acabas de crear.

Ahora, ¡a escribir código!

wonder woman gifwonder woman gif

Creación de un flujo OCN

Como se mencionó al principio de este post, cuando el usuario contesta la llamada, queremos reproducirle un archivo de audio. El archivo NCCO disponible en nuestro answer_url contiene esta información. Para ejecutar esta acción, el NCCO debe ser válido y tener la acción correcta. La acción necesaria para enviar el archivo de audio a una llamada o conversación es stream.

Para esta demo, sólo necesitaremos especificar streamUrl, que es el array que contiene el archivo de audio. Este último debe ser un mp3 o wav. Proporcionamos un ejemplo de stream NCCOque puedes utilizar para probar esta demo. Pero para escenarios de la vida real, es posible que desee crear el suyo propio.

En NexmoVoiceASPNetCoreQuickstarts, agregue una nueva carpeta llamada Helpers, y luego agregue una nueva clase NCCOHelpers.cs a esta carpeta. Crearemos todos los NCCOs que necesitemos en esta carpeta. Para simplificar, guardaremos nuestros archivos NCCO directamente en wwwroot.

ncco helpersncco helpers

Como se explica en los pasos de configuración, añadir la siguiente línea al método Configure en Startup.cs nos permitirá servir el archivo json NCCO.

app.UseStaticFiles();

El uso de herramientas como ngrok lo hará accesible por la API de Vonage.

ngrok statusngrok status

Dentro de NCCOHelpers.cs, añadiremos un método llamado CreateStreamNCCO, en el que crearemos dinámicamente un JObject que represente el stream NCCO.

public void CreateStreamNCCO(string rootpath, string[] streamUrl, int level, bool bargeIn, int loopTimes)
{
   dynamic StreamNCCO = new JObject();
   StreamNCCO.action = "stream";
   StreamNCCO.streamUrl = new JArray { streamUrl };
   StreamNCCO.level = level;
   StreamNCCO.bargeIn = bargeIn;
   StreamNCCO.loop = loopTimes;

   SaveFile(rootpath, "StreamNCCO.json", StreamNCCO);
}

Luego guardamos ese objeto como un archivo JSON en wwwroot.

private void SaveFile(string rootpath, string filename, dynamic StreamNCCO)
{
   var pathToFile = Path.Combine(rootpath, filename);
   using (StreamWriter s = File.CreateText(pathToFile))
     {
        s.Write(StreamNCCO.ToString());
     }
}

Más adelante, utilizaremos CreateStreamNCCO para que los usuarios puedan crear su propio stream NCCO a través del sitio web.

Reproducir audio en la llamada

En NexmoVoiceAspNetCoreQuickstarts, creamos un controlador llamado VoiceController.cs en el que crearemos un método de acción llamado PlayAudioToCaller.

Encima del método, añade un HttpGetAttribute para permitir al usuario navegar a la vista correspondiente.

[HttpGet]
public ActionResult PlayAudioToCaller()
{
  return View();
}

En la carpeta Voice Views, cree una nueva vista PlayAudioToCaller.cshtml. En esta vistaañadiremos dos formularios:

  1. La primera nos permitirá crear una OCN de flujo.

  2. El segundo se utilizará para hacer la llamada telefónica.

De vuelta al VoiceController. Asegúrese de que tiene la siguiente declaración `using` en la parte superior del archivo.

using Vonage

Dentro del constructor, pasaremos el entorno de alojamiento, que se utilizará para especificar la ruta raíz donde guardaremos el archivo NCCO. También instanciaremos la clase NCCO helpers.

private readonly IHostingEnvironment _hostingEnvironment;
private NCCOHelpers _nccohelper;

public VoiceController(IHostingEnvironment hostingEnvironment)
{
  _hostingEnvironment = hostingEnvironment;
  _nccohelper = new NCCOHelpers(); 
}

Añadir un método de acción llamado CreateStreamNCCO con los siguientes parámetros:

  • string[] streamUrl : una matriz que contiene una única url al archivo de audio a transmitir.

  • int level=0 : el nivel de audio. Por defecto es cero.

  • bool bargeIN por defecto falso.

  • int loop =1 para que el audio sólo se repita una vez. Dentro de este método, llamaremos al método CreateStreamNCCO de la clase NCCO helpers.

[HttpPost]
public ActionResult CreateStreamNCCO(string\[] streamUrl, int level=0, bool bargeIN = false, int loop =1)
{
  _nccohelper.CreateStreamNCCO(_hostingEnvironment.WebRootPath, streamUrl, level, bargeIN,    loop); 
   ViewData\["NCCOButtonText"] = "NCCO Created";
  return View("PlayAudioToCaller");
}

Añadir otro método método de acción llamado PlayAudioToCaller con un parámetro de cadena: to. Dentro de este método, harás una llamada usando el parámetro como la cadena to. El número from number es tu número virtual Nexmo (recuperado del appsettings.json), el answer_url es el stream NCCO ya sea que elijas usar el ejemplo de NCCO comunitario de Nexmo mencionado anteriormente o el NCCO que creaste e hiciste accesible a través de ngrok.

public ActionResult PlayAudioToCaller(string to)
{
   var NEXMO_FROM_NUMBER = Configuration.Instance.Settings\["appsettings:NEXMO_FROM_NUMBER"];
   var NEXMO_TO_NUMBER = to;
   var NEXMO_CALL_ANSWER_URL = "https://raw.githubusercontent.com/nexmo-community/ncco-examples/gh-pages/first_call_speech.json";

   var results = Call.Do(new Call.CallCommand
            {
                to = new\[]
                {
                    new Call.Endpoint {
                        type = "phone",
                        number = NEXMO_TO_NUMBER
                    }
                },
                from = new Call.Endpoint
                {
                    type = "phone",
                    number = NEXMO_FROM_NUMBER
                },
                answer_url = new\[]
                {
                    NEXMO_CALL_ANSWER_URL
                }
            });
            
     return RedirectToAction("Index", "Home");
}

Ahora, vamos a ejecutar la aplicación y hacer una llamada telefónica.

Si tiene éxito, recupera el NCCO de su webhook, se reproducirá el audio y, a continuación, finalizará la llamada.

Más información

Referencias y herramientas API

Guía de introducción de Vonage para ASP.NET

Compartir:

https://a.storyblok.com/f/270183/150x150/a3d03a85fd/placeholder.svg
Rabeb OthmaniAntiguos alumnos de Vonage

Rabeb fue defensora de los desarrolladores en Nexmo, centrándose en las API de comunicación en la nube y ayudando a los desarrolladores a obtener la mejor experiencia posible al crear sus aplicaciones. Además de escribir código para ganarse la vida, Rabeb aboga por atraer a más mujeres y minorías a la tecnología, de ahí su participación en Women Who Code y en diferentes comunidades tecnológicas. Dirige la red Women Who Code en Bristol.