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

En este tutorial, aprenderás a integrar funciones básicas de vídeo 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 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á:

  • Configuración de `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
  • 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: 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 demostración, se utilizará Vite para la compilación, por lo que tu archivo vite.config.js debería 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.

Instálalo en tu 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 BIEN, utiliza una CDN e inclúyelo en tu 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, coloca los componentes web en el código HTML en el lugar donde quieras que aparezcan en tu aplicación.

Por ejemplo:

<video-publisher ref="publisher"></video-publisher>

<video-subscribers ref="subscribers"></video-subscribers>

Parte 5: Obtener 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 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, 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 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 configurar en los componentes web para añadir o modificar las funcionalidades predeterminadas.

publisher.value.properties = { ... };

(véase lista completa)

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

(véase lista completa)

Próximos pasos

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