Aplicación básica de vídeo con Astro y Web Components

En este tutorial, aprenderás a integrar la funcionalidad básica de video en una aplicación Astro usando los componentes web de la API de Video de Vonage.

Con la aplicación, podrás publicar tu audio y vídeo en una videollamada mientras te suscribes al audio y vídeo de otros participantes.

Si quieres seguir el tutorial sin tener que crear la aplicación tú mismo, el proyecto ya terminado está disponible en GitHub.

Visión general

Esta guía rápida te orientará:

  • Cómo incluir Vonage Video Client SDK en tu proyecto
  • Instalación de los componentes web
  • Colocación de los componentes web
  • Obtención de referencias a los componentes web
  • Generación de credenciales
  • Creación de una sesión
  • Configuración de sesión y token para componentes web
  • (Opcional) Configuración de propiedades

Antes de empezar

Antes de comenzar este tutorial, cumple el siguiente requisito previo si aún no lo has hecho:

Parte 1: Cómo incluir el Vonage Video Client SDK en tu proyecto

Vonage Video Client SDK permite que tu aplicación se comunique con la infraestructura y la API de video de Vonage.

Coloque en su Layout.astro

<script src="https://cdn.jsdelivr.net/npm/@vonage/client-sdk-video@latest/dist/js/opentok.min.js"></script>

O si instala la biblioteca utilizando npm install --save @vonage/client-sdk-video

<script src="node_modules/@vonage/client-sdk-video/dist/js/opentok.min.js"></script>

Parte 2: Instalación de los componentes web

En este tutorial se utilizarán dos Web Components: <video-publisher> y <video-subscribers>. <video-publisher> publica tu vídeo y audio en la videollamada, donde <video-subscribers> se suscribe al vídeo y audio de cualquier otro participante y los muestra en tu aplicación.

Instálalo en tu proyecto

npm i @vonage/video-publisher

npm i @vonage/video-subscribers

A continuación, impórtalos a tus componentes Astro

import '@vonage/video-publisher/video-publisher.js';

import '@vonage/video-subscribers/video-subscribers.js';

O utilice un CDN y colóquelo en su(s) componente(s) Astro

<script is:inline type="module" src="https://cdn.jsdelivr.net/npm/@vonage/video-publisher@latest/video-publisher.js/+esm"></script>

<script is:inline type="module" src="https://cdn.jsdelivr.net/npm/@vonage/video-subscribers@latest/video-subscribers.js/+esm"></script>

Parte 3: Colocación de los componentes web

Ahora, coloca los componentes web en el código HTML en el lugar donde quieras que aparezcan en tu aplicación.

Por ejemplo:

<video-publisher></video-publisher>

<video-subscribers></video-subscribers>

Parte 4: Obtención de referencias a los componentes web

Para que tu aplicación pueda establecer propiedades en los componentes web, tendrás que obtener referencias a ellos.

const videoPublisherEl = document.querySelector('video-publisher');

const videoSubscribersEl = document.querySelector('video-subscribers');

Parte 5: Generación de credenciales

Nota: En las aplicaciones de producción, se recuperan del servidor más información. Para esta demostración, puedes implementar un servidor de aprendizaje por vídeo (Nodo o PHP) y fijar serverURL o sigue los siguientes pasos para generarlas e introducirlas de forma fija. Para obtener las credenciales necesarias para ejecutar la demostración:

  • Regístrate en o Entrar en tu cuenta.
  • En el menú de la izquierda de cuadro de mandopulse Applications y seleccione una aplicación anterior o cree una nueva para ver el ID de la aplicación. Screenshot of dashboard with Applications highlighted

Screenshot of dashboard with Application ID highlighted

  • Asegúrese de que el vídeo está activado

Screenshot of dashboard with Video section highlighted

  • Visite la página El patio de recreo de la Video API. Introduzca el ID de la aplicación o búsquelo en el menú desplegable. Puede dejar los valores por defecto para las demás opciones. Haga clic en "Crear".

Screenshot of The Video API Playground tool

  • Se crearán su identificador de sesión y su token.

Screenshot of The Video API Playground tool generated details with the Application ID, Session ID, and Token highlighted in red boxes

Parte 6: Creación de una sesión

Una Sesión es esencialmente su videollamada. Es la "sala" donde los participantes/clientes se conectan e interactúan entre sí.

const session = OT.initSession(applicationId, sessionId);

Parte 7: Configuración de la sesión y el token para los componentes web

Ahora estableceremos los valores para la Sesión y el Token. Puedes pensar en el Token como tu "pase" a la sala.

videoPublisherEl.session = session;  
videoPublisherEl.token = token;
videoSubscribersEl.session = session;
videoSubscribersEl.token = token;

Parte 8: (Opcional) Configuración de propiedades

Hay algunas propiedades que se pueden configurar en los componentes web para añadir o modificar las funcionalidades predeterminadas.

videoPublisherEl.properties = { ... };

(véase lista completa)

videoSubscribersEl.properties = { ... };

(véase lista completa)

Próximos pasos

¡Y ya está! Ahora que has completado este tutorial, aquí tienes algunos recursos más.