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

Neste tutorial, você aprenderá como integrar funcionalidades básicas de vídeo a um aplicativo VanillaJS 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:

  • 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: Como incluir o Vonage Client SDK 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 2: 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 3: 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></video-publisher>

<video-subscribers></video-subscribers>

Parte 4: 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 videoPublisherEl = document.querySelector('video-publisher');
const videoSubscribersEl = document.querySelector('video-subscribers');

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

videoPublisherEl.session = session;
videoPublisherEl.token = token;
videoSubscribersEl.session = session;
videoSubscribersEl.token = token;

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

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

videoPublisherEl.properties = { ... };

(ver lista completa)

videoSubscribersEl.properties = { ... };

(ver lista completa)

Próximos passos

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