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

En este tutorial, aprenderás a integrar la funcionalidad básica de video en una aplicación Vue 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á:

Establecer compilerOptions.isCustomElement
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
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:

una Account de Vonage

Parte 1: Configuración de compilerOptions.isCustomElement

Este esquema permite al compilador de Vue permitir Web Components en tu aplicación en lugar de lanzar un error cada vez que encuentra un elemento HTML no reconocido. Esto puede variar dependiendo de cómo estés compilando tu aplicación, tal y como se indica en la directiva documentación. Para esta demo, Vite se utilizará para la compilación, por lo que en su vite.config.js, debe tener este aspecto:

export default defineConfig({
    plugins: [
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: (tag) => tag.includes('-')
                }
            }
        })
    ],
})

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

const publisher = ref(null);
const subscribers = ref(null);

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

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

Parte 8: 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.value.session = session;
publisher.value.token = token;
subscribers.value.session = session;
subscribers.value.token = token;

Parte 9: (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.value.properties = { ... };

(véase lista completa)

subscribers.value.properties = { ... };