Primeros pasos con la aplicación de referencia de vídeo de Vonage para React

Queremos que pueda empezar a trabajar con nuestras API lo antes posible, pero a veces eso puede parecer una tarea desalentadora. Mientras que algunas API sólo requieren una o dos líneas de código (te estoy mirando a ti Messages API), algunas API, por su propia naturaleza, requieren algo más de configuración. La Video API de Vonage puede ser una de las API aparentemente más desalentadoras.

No tema. No sólo tenemos backends de muestra y código front-end de ejemplopero puede que quieras ver o empezar con una aplicación más completa. Para ello, tenemos nuestra Aplicación de referencia de Video de Vonage para React. Es una aplicación que está diseñada para estar lista para usar fuera de la caja para que pueda aprender a construir su propia aplicación o se puede utilizar como base para sus propias necesidades.

Ofrecemos dos maneras diferentes de comprobar la Aplicación de Referencia en sólo unos minutos. Al final de este artículo tendrás una versión en ejecución de nuestra Aplicación de Referencia para React ejecutándose en nuestro producto de alojamiento Cloud Runtime o en tu máquina local.

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.

Ejecución en Vonage Cloud Runtime

Puedes usar la plataforma Cloud Runtime de Vonage para manejar la ejecución de la aplicación y proporcionar alojamiento para la aplicación mientras observas con la aplicación de referencia si no quieres o no puedes ejecutar la aplicación en tu máquina local. Esto lanza un editor en el navegador y un sistema para desplegar tu código. Dado que esto lanza un editor en el navegador, se recomienda utilizar Chrome o un navegador basado en Chrome.

Para ejecutar la aplicación en Cloud Runtime:

1. Diríjase a la Aplicación de referencia de la API de Video de Vonage para React en Cloud Runtime.

2. Haz clic en "Iniciar sesión" si aún no lo has hecho.

3. Haga clic en la pestaña "Obtener código" situada justo debajo del encabezamiento de la página.

4. Haga clic en el botón "Crear un nuevo entorno de desarrollo".

5. Selecciona la Región e introduce un nombre para el espacio de trabajo, como "video-reference-demo" y haz clic en "Continuar".

6. Cloud Runtime creará un espacio de trabajo para usted con un editor de código y configurará toda la autenticación para su proyecto.

7. Vaya a "Ver" en la barra de navegación de la parte superior y, a continuación, haga clic en "Terminal" para mostrar el terminal del espacio de trabajo.

8. Ejecute la aplicación con yarn deploy-vcr.

El editor de código de Cloud Runtime puede requerirle que habilite las cookies de terceros, y si detecta que están bloqueadas, puede que aparezca una ventana emergente explicándole cómo habilitarlas. Esto es debido al propio editor web Visual Studio Code, y no habilitar las cookies de terceros puede afectar al uso del Cloud Runtime. Si esto le supone un problema de privacidad, consulte cómo ejecutar el código localmente o en un servidor.

Cloud Runtime empaquetará el proyecto, lo enviará a la plataforma de alojamiento y creará la aplicación. Esto puede tardar unos minutos en terminar. Una vez finalizado, verá algo similar a lo siguiente:

/-------
| Instancia desplegada
| Id de instancia: 503d54fc-5bec-xxxx-xxxx-24fb10ee0e48
| Nombre del servicio de la instancia: neru-xxxxxxxx-vonage-video-react-app-vonage-video-react-app
| Dirección de host de la instancia: https://neru-xxxxxxxx-vonage-video-react-app-vonage-video-react-app.euw1.runtime.vonage.cloud
\-------

El final será una URL a su instancia en ejecución, en este caso, es https://neru-xxxxxxxx-vonage-video-react-app-vonage-video-react-app.euw1.runtime.vonage.cloud. Puede copiar esta URL, abrir una nueva pestaña o ventana y pegarla en la barra de direcciones. Debería ver la pantalla de inicio de la aplicación de referencia:

Vonage Video Reference App for React Landing Page

Ahora puede empezar a utilizar la aplicación de referencia para ver todas las funciones que contiene e incluso evaluar si funciona como base para su proyecto. Puedes crear una nueva sala y comprobar qué tipo de funciones están disponibles para las reuniones de vídeo, e incluso invitar a gente a unirse. Casi todas las funciones principales que ofrece nuestra plataforma de Video están disponibles.

Puede volver a Cloud Runtime e investigar el código. Esto le permitirá personalizar la aplicación a sus propias necesidades, o simplemente ver cómo funcionan las diferentes partes del código.

Si realiza algún cambio en el código, sólo tiene que ejecutar yarn deploy-vcr para desplegar los cambios en la plataforma de alojamiento. Tenga en cuenta que la edición de un archivo no estará disponible inmediatamente, tendrá que desplegar el código antes de que sea utilizable en el navegador.

Si desea volver a la vista de código para editar o volver a desplegar código, puede dirigirse a sus Espacios de trabajo y verás una tarjeta para tu espacio de trabajo:

Example Instance Card for the Reference App in Cloud Runtime

Puedes acceder al código en sí haciendo clic en el mosaico, pero si sólo quieres ver la instancia en ejecución, puedes hacer clic en el menú kebab (los 3 círculos de la esquina superior derecha) y hacer clic en "Copiar URL".

Correr localmente

Para ejecutar localmente, necesitará lo siguiente ya preinstalado:

• Node.js v22

• Hilo

• Git

• Un terminal de línea de comandos

• Una aplicación de Vonage y su clave privada asociada

Estas instrucciones asumen que usted tiene una terminal local instalada y un conocimiento básico de cómo usar su shell. Los comandos de ejemplo deberían funcionar para un terminal Linux, WSL o macOS. Si utiliza Powershell o CMD, es posible que tenga que modificar los comandos.

Puedes crear una aplicación de Vonage a través de Vonage Dashboard o mediante la CLI de Vonage.

Una vez instalados todos los requisitos previos:

1. Vaya a la aplicación vonage-video-react-app Repositorio GitHub

2. Haz clic en el botón verde "Código" y, en el menú desplegable que aparece, haz clic en el icono "Copiar" situado junto a la dirección. Si has iniciado sesión en GitHub, puede que aparezca una dirección SSH, o si has cerrado sesión, puede que aparezca una dirección HTTPS. Cualquiera de las dos funcionará.

3. En tu PC, abre una ventana de terminal.

4. Cambie al directorio en el que desea instalar la aplicación de referencia.

5. Clone el proyecto de la aplicación de referencia utilizando git clone y la dirección que acabamos de copiar:

git clonar git@github.com:Vonage/vonage-video-react-app.git

1. Cambie de directorio al vonage-video-react-app/ directorio.

2. Copie los archivos de configuración por defecto, usamos cp en máquinas UNIX.

cp backend/.env.example backend/.env

cp frontend/.env.example frontend/.env

1. Abra el archivo backend/.env/ y edite las dos líneas siguientes utilizando su ID de aplicación y su clave privada. Deben estar cerca de la parte superior del archivo.

VONAGE_APP_ID=''

VONAGE_PRIVATE_KEY=''

1. En la raíz del proyecto clonado, instala las dependencias:

hilo

1. Ejecute el servidor de desarrollo:

desarrollo del hilo

1. Una vez que la aplicación haya terminado de arrancar, te dará una dirección "Local" para visitar. Suponiendo que nada más se está ejecutando en su máquina, usted debería ser capaz de visitar http://localhost:5173/ y ver la pantalla de creación de la sala:

Explorar y experimentar

Independientemente del modo en que decidas instalar y utilizar la Aplicación de referencia, tendrás libertad para explorar y experimentar con el código. Puedes comprobar cómo implementar varias opciones de front-end con React y cómo configurar un servidor back-end que gestione todas las funciones de administración por ti.

Conclusión

¿Le apetece charlar con nosotros sobre la aplicación de referencia? Únase a nuestra próspera comunidad de desarrolladores en Slacko síganos en X (antes Twitter), o suscríbete a nuestro Boletín para desarrolladores. Mantente conectado, comparte tus progresos y entérate de las últimas noticias, consejos y eventos para desarrolladores.