Bot de programación de videoconferencias con IA de Vonage y Video API

El trabajo a distancia y la colaboración virtual permiten a las empresas replantearse la experiencia del cliente: la videoconferencia. Las videoconferencias mejoran las interacciones con los clientes al facilitar la comunicación cara a cara, fomentar relaciones más sólidas y permitir la colaboración en tiempo real. Como desarrollador web, siempre estoy buscando formas de mejorar la experiencia del usuario sin añadir demasiado trabajo extra para mí.

Es por eso que estoy encantado de presentar mi último proyecto, un bot de programación inteligente que he construido usando la Video API de Vonage y Vonage AI Studio. La Video API de Vonage facilita a los desarrolladores la incorporación de video a sus aplicaciones. Permite integrar vídeo interactivo de alta calidad en tiempo real, mensajería, pantalla compartida y mucho más en aplicaciones web y móviles.

Este bot ofrece mucho valor a los clientes, mejora significativamente la experiencia del usuario y muestra las potentes capacidades de la API de Video de Vonage y AI Studio.

En esta entrada del blog, te guiaré a través de la creación de este bot, los retos a los que me enfrenté y las soluciones que descubrí.

Si quieres ir directamente a desplegarla, puedes encontrar todo el código de la aplicación en GitHub.

Configuración del proyecto

1. Cuenta API de Vonage

2. Node y npm

3. ngrok para pruebas de Webhook

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.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Node y npm

La estructura del servidor NodeJS es la siguiente:

1. index.js donde se define el código del servidor. En este archivo definiremos las rutas y llamaremos al punto final de la Meetings API.

2. En .env donde configuramos las credenciales para autenticarnos con Vonage.

Cómo utilizar ngrok para realizar pruebas con Webhooks

Si no lo tienes, instala ngrok en tu máquina local. A continuación, ejecute el comando para iniciar el túnel, especificando el número de puerto del servidor local que desea exponer (ngrok http 3000). Ngrok generará una URL única que permite el acceso externo a su servidor local. La necesitaremos en el próximo paso cuando llamemos a webhooks desde Vonage AI.

Cómo usar Video API de Vonage

La Video API de Vonage te permite integrar reuniones de video interactivas en tiempo real y de alta calidad en tus aplicaciones web. La Video API es ideal para quienes desean más personalización y flexibilidad. Configuremos una aplicación web de videollamadas basada en navegador usando la Video API de Vonage.

Cómo crear la aplicación de Video de Vonage

Ir al Panel de Vonage e inicia sesión/regístrate.

1. Haga clic en "Applications" en el menú de la izquierda.

2. Haz clic en "Crear una nueva aplicación" en la parte superior y dale un nombre.

3. Copie el identificador de la solicitud para futuras consultas.

4. Haz clic en "Editar" y "Generar claves pública y privada". Se descargará la clave privada.

5. Desplácese hacia abajo y active "Video (nuevo)" para la aplicación.

6. Haga clic en "Guardar cambios" en la parte inferior de la página.

Anote la clave y el secreto de la API de su proyecto. Asegúrese de almacenar estas credenciales de forma segura, ya que las utilizará más adelante cuando configure su aplicación.

Video Capability Toggle in Vonage API Dashboard

Cómo generar credenciales de Video API

Para autenticarte necesitas pasar tu apiKey, sessionId y token. A continuación encontrará un ejemplo de creación de una sesión con @vonage/video biblioteca:

const { Auth } = require("@vonage/auth");
const { Video } = require("@vonage/video");

const applicationId = process.env.APP_ID;
const privateKey = process.env.PRIVATE_KEY_PATH;

if (!applicationId || !privateKey) {
  console.error("You must define APP_ID and PRIVATE_KEY_PATH in the .env file");
  process.exit(1);
}

const credentials = new Auth({
  applicationId: applicationId,
  privateKey: privateKey,
});
const options = {};
const videoClient = new Video(credentials, options);

const createSessionandToken = async () => {
  const session = await videoClient.createSession({ mediaMode: "enabled" });
  const sessionId = session.sessionId;
  const token = videoClient.generateClientToken(sessionId);
  return { sessionId: sessionId, token: token, apiKey: applicationId };
};

const generateToken = (sessionId, role) => {
  const token = role
    ? videoClient.generateClientToken(sessionId, { data: role })
    : videoClient.generateClientToken(sessionId);
  return { token: token, apiKey: applicationId };
};

En el front-end, el código recibe las credenciales del servidor Node.js para conectarse a la sesión, crear el editor, publicar el flujo y escuchar los suscriptores entrantes.

const apikey = "<%= apiKey %>";
      const sessionId = "<%= sessionId %>";
      const token = "<%= token %>";
      const publisher = OT.initPublisher("stream-container", {
        insertMode: "append",
        width: "100%",
        height: "100%",
      });
      const session = OT.initSession(apikey, sessionId);
      session.connect(token, (error) => {
        if (error) {
          console.error("Error connecting: ", error);
        } else {
          session.publish(publisher, (error) => {
            if (error) {
              console.error("Error publishing: ", error);
            }
          });
        }
      });
      // Handle the streamCreated event
      session.on("streamCreated", function (event) {
        subscriber = session.subscribe(event.stream, "containerId", {
          insertMode: "append",
          width: "100%",
          height: "100%",
        });
      });

Cómo crear el bot en Vonage AI Studio

Vonage AI Studio es una plataforma de IA conversacional creada para gestionar interacciones complejas entre empresas y clientes, reduciendo los costes operativos y mejorando significativamente los niveles de servicio. Actualmente ofrece los siguientes canales: agentes de telefonía (para bots de voz), agentes de WhatApp y SMS (para bots basados en texto) y agentes HTTP. Elegí utilizar Whatsapp porque es una de las plataformas de mensajería más populares y ofrece distintos tipos de mensajes para interactuar con el usuario, como botones, mensajes de lista y muchos otros.

Ver todos los detalles sobre Capacidades de Vonage AI Studio.

Para comenzar, ingresa a Vonage (dashboard)[dashboard.nexmo.com] y localiza la sección AI Studio. A continuación, haz clic en el botón "Crear un agente" situado en la esquina superior derecha de la página. De las opciones disponibles, elige "Whatsapp Bot" y se te presentará una lista de plantillas entre las que elegir. Para el propósito de esta entrada de blog, selecciona la opción "desde cero", seguida del Agente de Entrada. Los agentes entrantes se activan cuando reciben un mensaje del cliente, mientras que el agente saliente inicia una nueva conversación utilizando las plantillas de WhatsApp.

Descripción general de WhatsApp Bot

La imagen de abajo muestra lo que vamos a construir. Utilizaremos diferentes tipos de nodos de Vonage AI Studio tales como recolectar entradas, condicionales, webhooks y enviar mensajes. Teniendo en cuenta el diagrama, el bot comienza con un mensaje entrante del usuario y responde con un nodo de entrada collect. Vamos a profundizar en el proceso en las siguientes secciones.

Overview of the Flow in AI Studio

Cómo recopilar datos del usuario en AI Studio

Para iniciar el proceso de creación de la reunión, nuestro bot de WhatsApp pedirá al usuario que proporcione información específica. El primer bloque que utilizaremos es el bloque "Collect Input", que nos permite recopilar datos del usuario. Dentro de este bloque, podemos pedir al usuario que especifique el tipo de reunión (única o de larga duración) y las opciones de grabación (auto_recording o no). Capturando esta información, podemos adaptar la experiencia de la reunión en función de las preferencias del usuario.

Para el tipo de reunión, utilizamos botones de respuesta de WhatsApp para que el usuario no tenga que escribir el mensaje, sino solo hacer clic en el tipo de reunión deseado:

Example of WhatsApp Reply ButtonsLo siguiente es enviar el bot en función de la respuesta anterior. Para ello, utilizamos un nodo condicional.

Example of Classification NodeEn función de la respuesta anterior (que se guarda en el parámetro de tipo de reunión), el bot tiene dos ramas: reunión instantánea y reunión a largo plazo. Para una reunión de larga duración necesitamos un paso adicional, en el que pedimos al usuario que escriba la fecha de caducidad de la reunión.

Luego, usamos la misma lógica para las opciones de grabación, usaremos un Nodo de Entrada de Recolección con Botones de Respuesta.

Recoger Fecha de caducidad

Uno de los datos que necesitamos recopilar durante la conversación es la fecha de caducidad de las reuniones de larga duración. Utilizando otro bloque "Recopilar información", pedimos al usuario que introduzca la fecha de caducidad de su reunión. Para continuar, vamos a profundizar en el concepto de entidad en AI Studio. Una entidad es una base de datos predefinida que contiene una colección de valores y sus sinónimos. Estos valores son esenciales para que AI Studio extraiga y valide datos específicos a partir de entradas de usuario expresadas en lenguaje natural. Al explorar la lista de entidades, disponible en la documentación, nos encontraremos con categorías familiares como contactos, fechas, direcciones de correo electrónico, números de teléfono, etc.

Ahora, el aspecto crítico en esta etapa es seleccionar el tipo de entidad apropiado para nuestro propósito, que en este caso es "@sys.date". Al designar la entidad como un tipo de fecha, el agente inteligentemente parseará la entrada del usuario como una fecha, facilitando su utilización en pasos posteriores, particularmente dentro del Nodo Webhook.

Cómo conectarse a una API Node.js con Webhooks

Una vez que hemos recopilado toda la información necesaria del usuario, tenemos que conectar nuestro bot de WhatsApp con el servidor Node.js que hemos creado anteriormente. Para ello, utilizaremos el bloque webhook proporcionado por Vonage AI. Este bloque nos permite realizar solicitudes HTTP a puntos finales externos, lo que permite una integración perfecta entre diferentes sistemas. Al configurar el bloque webhook para llamar a los puntos finales relevantes de nuestra API Node.js, podemos pasar los detalles de la reunión recopilados y activar la creación de la reunión. En este caso estamos configurando una petición POST a https://{baseUrl}/api/video/room con el objeto body enviando los parámetros recogidos durante el flujo del bot.

A POST Request Using Webhook Node

Un último paso es configurar la asignación de respuesta en el webhook. En este caso, la API devuelve un objeto JSON con una propiedad URL:

Response Mapping Example

Conclusión

En conclusión, la utilización de la Video API y la IA de Vonage en el programador de reuniones ejemplifica la facilidad y facilidad de uso para crear experiencias de videoconferencia personalizables y de autoservicio para las empresas y sus clientes. Al aprovechar la Video API, los desarrolladores pueden crear sin esfuerzo reuniones de video con opciones configurables, como opciones de grabación y más. La combinación de esta funcionalidad con Vonage AI abre interesantes posibilidades, permitiendo a los usuarios interactuar con el bot a través de plataformas de mensajería populares como WhatsApp.

Puede encontrar el código completo en GitHub.

¿Te ha gustado este tutorial? ¿Te has quedado atascado? Ponte en contacto con nosotros en X, antes conocido como Twittero en Slack de la comunidad de Vonage (incluso tenemos un canal para AI Studio). ¡Estamos ansiosos por ver lo que estás construyendo con Low Code!