Habilitar Videollamada para una Aplicación Next.js Usando Vonage Video API

Introducción

Una de las formas más efectivas de mejorar la experiencia del usuario es habilitar el soporte de videollamada en directo a tu aplicación para que tus usuarios siempre puedan obtener soporte de videollamada para los problemas que se les presenten. Sin embargo, añadir soporte de videollamada a tu aplicación requiere trabajo, ya que debes gestionar tanto el soporte de servidor como el de cliente para interactuar con la videollamada. Además, escalar el soporte de vídeo para miles de usuarios es mucho trabajo. Comprende los puntos débiles y las dificultades de agregar soporte de video a tu aplicación, API de Video de Vonage de Vonage.

En este artículo, aprenderás a habilitar las videollamadas para una aplicación Next.js de demostración agregando sólo unas pocas líneas de código utilizando la Video API de Vonage.

Acerca de Next.js Framework

Next.js es un marco de trabajo de código abierto para la creación de aplicaciones web completas basadas en la librería biblioteca React. Es un framework robusto que combina los beneficios de React con el renderizado del lado del servidor y la generación de sitios estáticos. Además, Next.js proporciona características y convenciones que le permiten construir la aplicación rápidamente con una excelente experiencia de desarrollador.

Acerca de la aplicación de demostración

Vamos a crear una aplicación de demostración para comprender y practicar la funcionalidad de las videollamadas en una aplicación Next.js.

Creará una aplicación de terapia que permita a los usuarios programar y realizar una videollamada con los terapeutas de su elección. Habilitar la videollamada es una función excelente para los usuarios que suelen tener problemas para socializar e interactuar con los demás. Ahora pueden unirse a la sesión de terapia desde su casa a la hora que prefieran.

DESCARGO DE RESPONSABILIDAD: Esta aplicación es sólo para fines de tutorial, y usted debe consultar a su médico para emergencias.

Requisitos previos

Para crear la aplicación de demostración, debe preparar los siguientes requisitos previos.

• Un entorno Node.js con la versión 12.8 o superior según Requisitos de Next.js.

• A entorno de línea de comandos git para clonar el código de la aplicación desde un repositorio de GitHub

• Tener una Account en la Plataforma de video de Vonage para que puedas crear un nuevo proyecto de Video API para integrar el soporte de video en tu aplicación Next.js rápidamente.

• Tener una Account en Panel para desarrolladores de Vonage para usar la SMS API para enviar mensajes dentro de la aplicación de demostración.

Ahora que ya has preparado todos estos requisitos previos, vamos a crear la aplicación Next.js.

Paso 1: Clonar el código de la aplicación

Dado que la aplicación requiere que crees varios directorios y archivos para implementar la lógica de la aplicación y la interfaz de usuario, vamos a clonar el código de la aplicación existente desde este repositorio GitHub. Abre tu terminal, crea un nuevo directorio Projects y clona el código de la aplicación en ese directorio.

Cambia el directorio actual a vonage-therapist-video-embed directorio.

Debería ver los siguientes directorios y archivos listados a continuación:

Code Project Structure

Examinemos cuáles son.

Paso 2: Comprender la estructura de los archivos.

En el proyecto de aplicación Next.js, debes prestar atención a los siguientes archivos además de los archivos regulares para el entorno Node.js, tales como package.json o package-lock.json, en el directorio raíz.

1. next.config.js archivo:

Este archivo define la configuración común para la aplicación Next.js. Por ejemplo, puedes establecer la ruta de imágenes de tu aplicación, de modo que si alguna imagen no coincide con estas rutas, Next.js se quejará con un mensaje de error.

/** @type {import('next').NextConfig} */

const nextConfig = {
  …
  images: {
	domains: ['images.unsplash.com',],
  },
};

module.exports = nextConfig;

1. pages directorio:

El directorio pages implementa el directorio:

• Application APIs dentro del subdirectorio api subdirectorio. Estas APIs son accesibles utilizando el formato de ruta API como /api/${api-name}. Con el soporte para la construcción de APIs, es por eso que consideramos Next.js como un framework de aplicaciones web full-stack. Puedes obtener más información sobre el soporte de API web de Next.js en esta Documentación de rutas API.

• Applications dentro de otros subdirectorios como meeting o therapies. Los usuarios finales pueden acceder a las páginas de la aplicación en la ruta /meeting o /therapies. Next.js admite rutas anidadas y enrutamiento dinámico. Esto significa que puede establecer el nombre del archivo de la página utilizando una variable como [id].js dentro del directorio therapies/[detail] y los usuarios pueden obtener más información sobre todos los terapeutas disponibles en /therapies/{therapyCategory}/{therapyId}. Puede obtener más información sobre las páginas Next.js en esta documentación.

1. src/components directorio:

Este directorio define todos los componentes web que utilizarás en la aplicación, como la cabecera, el pie de página o el botón personalizado de la página de la aplicación. Los componentes de interfaz de usuario de Next.js son similares a los componentes de React, pero se ha añadido soporte personalizado para componentes de interfaz de usuario como Enlace o Imagen.

1. utils directorio:

Este directorio implementa las funciones de las utilidades que utilizará la aplicación de terapia. Actualmente, tiene un archivo llamado phone.js, que permite a la aplicación enviar un mensaje SMS al terapeuta, notificando que un usuario ha creado un evento de reunión a una hora determinada y con un enlace de vídeo de la reunión para que el terapeuta pueda hablar con el usuario.

1. data directorio:

Este directorio almacena todos los datos que utilizará la aplicación. Actualmente, tiene un archivo data.json que almacena datos sobre la información de los terapeutas, como el nombre de los terapeutas y los horarios disponibles de los terapeutas para que los usuarios puedan reservar reuniones.

Por último, tienes otros archivos, como las imágenes para el logotipo de la aplicación y los archivos CSS para mejorar la GUI (interfaz gráfica de usuario) de la aplicación.

Paso 3: Activar Videollamada para la App

Para activar las videollamadas en la aplicación, tienes las tres opciones siguientes:

• Utilice el SDK de Video de Vonage

• Utiliza el Incrustación de chat de Video de Vonage

  • Utilizar la opción Iframe

  • Utilizar la opción Javascript

En la configuración de producción, debes usar la opción Vonage Video SDK, que te permite configurar los SDK del servidor y del cliente por separado para tener más control sobre cómo deseas que se ejecute el soporte de video. Para simplificar la aplicación de demostración, utilicemos la opción "Iframe" para habilitar la función de videollamada.

Inicie sesión en la página de la cuenta de Vonage Video y elige la opción "Proyectos" en el panel izquierdo.

Video Projects

Elija "Crear nuevo proyecto" y haga clic en el botón "Crear proyecto incrustado".

Create Embed Project

A continuación, establece el nombre de tu proyecto y la URL del sitio web. En un entorno de producción, debes proporcionar la URL del sitio web que coincida con el dominio registrado de tu aplicación. Dado que sólo vamos a construir la aplicación en el entorno local, vamos a establecer la URL del sitio web a http://localhost:3000.

Configure Setting

Haz clic en el botón "Siguiente" y copia el código generado por Iframe en un lugar seguro.

Cree un nuevo archivo llamado embedCode.json dentro del directorio data directorio. Dentro del embedCode.jsonañádele el siguiente contenido:

{
"embedCode":""
}

Dentro del valor en blanco, ponle el contenido generado por iframe. Recuerda escapar los caracteres especiales del contenido generado por iframe para que coincidan con las reglas del archivo JSON.

El contenido del archivo embedCode.json es similar al que se muestra a continuación:

{
	"embedCode": "<iframe src='https://tokbox.com/embed/embed/ot-embed.js?embedId=YOUR_EMBED_ID&room=DEFAULT_ROOM&iframe=true' width='800px' height='640px' scrolling='auto' allow='microphone; camera'></iframe>"
}

Mira el archivo index.js dentro del directorio pages/meetings directorio. Este archivo implementa la página de reunión para que el usuario y el terapeuta puedan comunicarse.

const meetingData = data.replace('DEFAULT_ROOM', `meeting${meetingId}`);

El código anterior sustituirá el valor DEFAULT_ROOM del código incrustado en iframe por el valor generado aleatoriamente meetingIdgenerado aleatoriamente, por lo que cada reunión será diferente. Esto permite que cada reunión esté separada de las demás, para que no acabes teniendo un montón de usuarios en la misma reunión.

<div id="ot_embed_demo_container" dangerouslySetInnerHTML={{__html: meetingData}}>
</div>

En este código, el valor meetingData se incluye dentro del campo dangerouslySetInnerHTML para permitir que la página de la reunión muestre la pantalla de vídeo incrustado. Puede obtener más información sobre cómo Next.js gestiona los scripts incrustados en esta página.

Paso 4: Activar la capacidad de envío de SMS

Para habilitar la capacidad de envío de SMS, debe proporcionar las siguientes variables de entorno a la sesión de terminal actual:

• VONAGE_SMS_BRANDVonage SMS Brand: el Vonage SMS Brand sirve para registrar el nombre del remitente en el mensaje SMS. En la configuración de producción, debes registrar VONAGE_SMS_BRAND para tu aplicación. Por el bien del tutorial, puedes establecer la variable VONAGE_SMS_BRAND a "Vonage Sample App". Puedes obtener más información sobre el uso de SMS API de Vonage y registrar la variable VONAGE_SMS_BRAND en la página de pautas de SMS API.

• THERAPIST_PHONE_NUMBER: es el número de teléfono del destinatario al que enviará el mensaje SMS. En un escenario real, cada terapeuta debería tener su propio número de teléfono. Para simplificar el tutorial, establezca el THERAPIST_PHONE_NUMBER a cualquier número de teléfono desde el que pueda recibir mensajes.

• VONAGE_API_KEY`` andVONAGE_API_SECRET: para poder enviar el mensaje SMS usando la API SMS de Vonage, debes proporcionar la clave API de Vonage. Puedes obtener los valores de VONAGE_API_KEY y VONAGE_API_SECRET de la página de Página de inicio de SMS API de Vonage.

Usando Windows puedes establecer los valores usando PowerShell con los siguientes comandos:

$env:VONAGE_SMS_BRAND = "Vonage Sample App"
$env:THERAPIST_PHONE_NUMBER = "your_therapist_phone_number"
$env:VONAGE_API_KEY = "your_vonage_api_key"
$env:VONAGE_API_SECRET = "your_vonage_api_secret"

Paso 5: Abrir la aplicación

Es necesario instalar las dependencias que necesita la aplicación ejecutándola:

A continuación, para abrir la aplicación en el equipo local, ejecute el siguiente comando:

El servidor se iniciará en el puerto 3000 como se muestra a continuación.

> therapist-mental-health-app@0.1.0 dev
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000

Abra su navegador y navegue hasta esta URL: http://localhost:3000. Debería poder ver la página de inicio de la aplicación.

Therapist Home Page

Haga clic en el botón "Terapias" del menú y podrá ver todos los tipos de terapias.

Therapies Page

Haga clic en la opción "Terapia Cognitiva", para ver todos los terapeutas disponibles en la categoría "Terapia Cognitiva".

Therapy Cognitive Page

Aquí puedes ver tres terapeutas llamadas "Anna Maria", "Jennifer Great" y "Jessica Tart". Vamos a elegir a "Anna Maria" para programar una videollamada con ella.

Book a Meeting Form

Aquí puede ver varias opciones de franjas horarias. Vamos a elegir la hora como "02-05-2023 10:00" e insertar su correo electrónico junto con su número de teléfono. Haz clic en el botón "Enviar".

Book a Meeting Successfully

Verá que se ha inscrito correctamente en la reunión con el therapist-1. Además, se enviará un mensaje SMS con el siguiente contenido:

A user has booked a meeting with you. The meeting time is : ${therapyTime}. The meeting link is : http://localhost:3000/meetings?meetingId=${meetingId}

NOTA: Si se registró utilizando el mismo número de teléfono que ha existido y se encontró con el mensaje de error "This phoneNumber xxx has already been registered" (Este número de teléfono xxx ya ha sido registrado), elimine el número de teléfono mediante:

• Vaya al archivo denominado data.json dentro del data directorio

• Busque su número de teléfono

• Elimínalo de la lista "phoneNumbers_registered".

• Guardar el archivo

El terapeuta puede guardar el enlace de la reunión y unirse a la reunión de vídeo a la hora programada.

Supongamos que la hora de la reunión es ahora mismo. Puede hacer clic en el botón "Unirse a la reunión" para acceder al vídeo de la reunión.

Meeting Therapist

Haga clic en "Haga clic para iniciar Video Chat", usted debe ser capaz de unirse a la reunión de vídeo con el terapeuta.

Conclusión

El artículo te enseñó qué es el framework Next.js y por qué deberías considerar el framework Next.js para construir tus futuras aplicaciones. También aprendiste a habilitar la videollamada para la aplicación Next.js agregando unas pocas líneas de código gracias a la compatibilidad con Video API de Vonage y a aplicar la función de notificación por SMS usando SMS API de Vonage. Si deseas obtener más información sobre otras tecnologías de la plataforma de Vonage, visita la Página de inicio para desarrolladores de Vonage.