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

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

  • Importando CUSTOM_ELEMENTS_SCHEMA
  • 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
  • (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: Importação do CUSTOM_ELEMENTS_SCHEMA

Esse esquema permite que o compilador do Angular admita Web Components em sua aplicação, em vez de gerar um erro sempre que encontrar um elemento HTML não reconhecido.

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

incluir em @Component

schemas: [CUSTOM_ELEMENTS_SCHEMA];

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 main.ts arquivo do 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 #​publisher [session]="session" [token]="token" [properties]="pubProperties"></video-publisher>

<video-subscribers #subscribers [session]="session" [token]="token" [properties]="subsProperties"></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.

@ViewChild('publisher') publisherComponent: ElementRef;

@ViewChild('subscribers') subscribersComponent: ElementRef;

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.

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

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

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

pubProperties = { ... };

(ver lista completa)

subsProperties = { ... };

(ver lista completa)

Próximos passos

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