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

En este tutorial, aprenderás a integrar la funcionalidad básica de video en una aplicación Svelte 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 proyecto sin crear la aplicación tú mismo, el proyecto completo 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
  • Generación de credenciales
  • Crear 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, complete los siguientes requisitos previos si aún no los ha completado:

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 index.html

<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.

Instalar en su proyecto

npm i @vonage/video-publisher

npm i @vonage/video-subscribers

A continuación, importe a su proyecto

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

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

O utilice un CDN y colóquelo en su archivo index.html

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

<script 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, coloque los Web Components en su marcado donde quiera que aparezcan en su aplicación.

Por ejemplo:

<video-publisher bind:this={publisher}></video-publisher>

<video-subscribers bind:this={subscribers}></video-subscribers>

Parte 4: Generación de credenciales

Nota: En las aplicaciones de producción, se recuperan del servidor más información. Para esta demostración, puede desplegar un Servidor de Aprendizaje por Vídeo (Nodo o PHP) y fijar serverURL o siga los siguientes pasos para generarlas y codificarlas. Para obtener las credenciales necesarias para ejecutar la demo:

  • Inscríbete en o Entrar en su Account.
  • En el menú de la izquierda de salpicaderopulse 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 5: 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 6: Configuración de sesión y token para componentes web

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

publisher.session = session;
publisher.token = token;
subscribers.session = session;
subscribers.token = token;

Parte 7: (Opcional) Configuración de propiedades

Hay algunas propiedades que se pueden establecer en los Web Components para añadir o cambiar funcionalidades por defecto.

publisher.properties = { ... };

(véase lista completa)

subscribers.properties = { ... };

(véase lista completa)

Próximos pasos

Ya está. Ahora que ya has completado este tutorial, aquí tienes más recursos.