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

En este tutorial, aprenderás a integrar la funcionalidad básica de video en una aplicación Angular utilizando los componentes web de la Video API 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á:

  • Importación de CUSTOM_ELEMENTS_SCHEMA
  • 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
  • Crear una sesión
  • (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: Importación de CUSTOM_ELEMENTS_SCHEMA

Este esquema permite al compilador de Angular permitir Web Components en tu aplicación en lugar de lanzar un error cada vez que encuentra un elemento HTML no reconocido.

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

incluir en @Component

schemas: [CUSTOM_ELEMENTS_SCHEMA];

Parte 2: 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 3: 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 main.ts archivo del 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 4: Colocación de los componentes web

Ahora, coloque los Web Components en su marcado donde quiera que aparezcan en su aplicación.

Por ejemplo:

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

Para que su aplicación pueda establecer propiedades en los Web Components, necesitará obtener referencias a ellos.

@ViewChild('publisher') publisherComponent: ElementRef;

@ViewChild('subscribers') subscribersComponent: ElementRef;

Parte 6: 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 7: 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í.

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

Parte 8: (Opcional) Configuración de propiedades

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

pubProperties = { ... };

(véase lista completa)

subsProperties = { ... };

(véase lista completa)

Próximos pasos

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