Aplicativo básico de vídeo com Vue e Web Components

Neste tutorial, você aprenderá a integrar funcionalidades básicas de vídeo a um aplicativo Vue usando os Web Components da Video API da Vonage.

Com o aplicativo, você poderá transmitir seu áudio e vídeo durante uma videochamada, ao mesmo tempo em que recebe o áudio e o vídeo dos outros participantes.

Se você quiser acompanhar o passo a passo sem precisar criar o aplicativo por conta própria, o projeto já pronto está disponível em GitHub.

Visão geral

Este guia rápido orienta você sobre:

  • Definindo compilerOptions.isCustomElement
  • Incluindo o Vonage Client SDK no seu projeto
  • Instalando os componentes da Web
  • Posicionamento dos Web Components
  • Obter referências aos componentes da Web
  • Geração de credenciais
  • Criação de uma sessão
  • Configurando a sessão e o token para componentes da Web
  • (Opcional) Definição de propriedades

Antes de começar

Antes de iniciar este tutorial, conclua o pré-requisito a seguir, caso ainda não o tenha feito:

Parte 1: Definindo compilerOptions.isCustomElement

Esse esquema permite que o compilador do Vue admita Web Components em sua aplicação, em vez de gerar um erro sempre que encontrar um elemento HTML não reconhecido. Isso pode variar dependendo de como você está compilando sua aplicação, conforme indicado no documentação. Para esta demonstração, o Vite será usado para a compilação; portanto, seu arquivo vite.config.js deve ficar assim:

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

Parte 2: Como incluir o Client SDK do Vonage Video Client no seu projeto

O Client SDK do Vonage Video permite que seu aplicativo se comunique com a Video API e a infraestrutura do Vonage Video.

Coloque no seu arquivo index.html

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

OU, se você instalar a biblioteca usando npm install --save @vonage/client-sdk-video

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

Parte 3: Instalação dos componentes da Web

Neste tutorial, serão utilizados dois Web Components: <video-publisher> e <video-subscribers>. O <VIDEO-publisher> transmite seu vídeo e áudio para a videochamada, enquanto o <VIDEO-subscribers> assina o vídeo e o áudio de quaisquer outros participantes e os exibe em seu aplicativo.

Instale no seu projeto

npm i @vonage/video-publisher

npm i @vonage/video-subscribers

Em seguida, importe para o seu projeto

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

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

OU use uma CDN e insira no seu arquivo 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: Posicionamento dos componentes da Web

Agora, insira os Web Components no código HTML do seu aplicativo, no local onde deseja que eles apareçam.

Por exemplo:

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

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

Parte 5: Obtendo referências aos componentes da Web

Para que seu aplicativo possa definir propriedades nos Web Components, você precisará obter referências a eles.

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

Parte 6: Geração de credenciais

Observação: Em aplicações de produção, eles são recuperados do servidor mais informações. Para esta demonstração, você pode implantar um Video Learning Server (Nó ou PHP) e definir serverURL ou siga as etapas a seguir para gerá-las e inseri-las manualmente. Para obter as credenciais necessárias para executar a demonstração:

Screenshot of dashboard with Application ID highlighted

  • Certifique-se de que o vídeo esteja ativado

Screenshot of dashboard with Video section highlighted

  • Acesse o O Playground da Video API. Digite o ID do aplicativo ou selecione-o na lista suspensa. Você pode manter os valores padrão para as demais opções. Clique em “Criar”.

Screenshot of The Video API Playground tool

  • Seu ID de sessão e seu token serão criados.

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

Parte 7: Criando uma sessão

Uma sessão é, essencialmente, sua videochamada. É a “sala” onde os participantes/clientes se conectam e interagem uns com os outros.

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

Parte 8: Configuração da sessão e do token para componentes da Web

Agora vamos definir os valores para a Sessão e o Token. Você pode pensar no Token como seu “passe” para entrar na sala.

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

Parte 9: (Opcional) Definição de propriedades

Existem algumas propriedades que podem ser definidas nos Web Components para adicionar ou alterar funcionalidades padrão.

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

(ver lista completa)

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

(ver lista completa)

Próximos passos

É isso aí! Agora que você concluiu este tutorial, aqui estão mais alguns recursos.