Video conferências se tornaram parte integral das nossas rotinas de trabalho, especialmente após o Covid. Para muitas empresas, escolas e centros médicos, a possibilidade de realizar reuniões de formas não presenciais significa em uma grande redução de custo e de stress e com isso cada vez mais vemos apps e sites tendo uma integração de video chamada diretamente dentro deles.

O Video Conference da SuperViz é uma excelente ferramenta para implementar essa experiência de forma rápida. Neste artigo, será mostrado como instalar a ferramenta, configurar para abrir uma video chamada e sobre o modo de colaboração.

Twilio descontinua sua solução para Video SDK

A Twilio recentemente anunciou sua decisão de descontinuar o suporte ao seu Video SDK, e com isso, muitos usuários da Twilio podem estar buscando alternativas viáveis. Com isso, caso precise de um guia mais aprofundado de como sair da Twilio Video para a SuperViz, há um post completo sobre as diferenças na implementação, no dev.to.

E para facilitar para quem está saindo da Twilio, a SuperViz está oferecendo 3 meses grátis se realizar um contrato de 12 meses.

O que é SuperViz

A SuperViz é um SDK de colaboração, isto é: ele facilita a inclusão de funcionalidades colaborativas em aplicações, como indicadores de presença de outros usuários (como mouse pointers e who-is-online), comentários contextuais e videoconferência. Ele simplifica a adição de elementos interativos em plataformas digitais, melhorando o engajamento do usuário e o trabalho em equipe, através de componentes pré-construídos e APIs personalizáveis.

É possível integrar ao seu projeto de várias maneiras: seja como um pacote no npm (compatível com React, Angular, Svelt ou Vanilla), seja incluindo diretamente no seu HTML usando uma tag javascript.

Low-code

Ao contrário do Twilio, a SuperViz é uma plataforma de low-code, o que significa que muito do trabalho da implementação já foi feita, podendo deixar você focado nas regras de negócio da sua empresa. Além de facilitar a integração em seus projetos, mesmo que você não tenha muita experiência em codificação.

Preços

Em relação a custos, a SuperViz opera com base em minutos de participante. O plano básico de preços começa em $39,99 por mês, que já inclui 10 mil minutos. Acima disso, há um custo adicional de $0,003 por minuto extra.

Como começar

Crie uma conta e obtenha uma chave

Para começar, crie uma conta gratuita na SuperViz, não é necessário cartão de crédito para desenvolvimento e teste, com até 1.000 minutos gratuitamente.

Depois de criar sua conta, faça login no painel, você pode navegar até a página do desenvolvedor e gerar o token, ele será necesário mais tarde mais tarde.

Instale o SDK no seu projeto

Para este tutorial, você precisará instalar o pacote @superviz/sdk usando npm ou yarn. Se estiver usando npm, execute o seguinte comando no seu terminal: npm install @superviz/sdk. Se você estiver usando yarn, o comando será yarn add @superviz/sdk.

Depois que o pacote for instalado, você pode importá-lo para o seu projeto:

import SuperViz from “@superviz/sdk”

Criar uma sala para colaboração

Para adicionar a Video Conference à sua aplicação, primeiro precisa de inicializar uma sala com a SuperViz. A sala é um espaço virtual onde os usuários podem entrar e colaborar. Ao criar uma sala, pode especificar um ID único para a mesma.

Para criar uma sala, precisa usar a SuperVizRoom que está disponível no pacote SDK, ela precisa da chave de desenvolvedor e de alguns parâmetros:

• id: O ID da sala, que deve ser uma string única compartilhada entre os participantes dessa sala.
• participant: Um objeto que contém informações sobre o usuário atual, como name, id.
• group: Um objeto que contém informações sobre o grupo ao qual o usuário pertence, como name e id.

Aqui está um exemplo de como criar uma sala:

// Importando o SDK da SuperViz

import SuperVizRoom from '@superviz/sdk';

// Criando uma sala

const room = await SuperVizRoom(DEVELOPER_KEY, {

  roomId: "",

  group: {

    id: "",

    name: "",

  },

  participant: {

    id: "",

    name: ""

  },

});

Uma vez que você tenha criado uma sala, você pode usar o objeto room para adicionar componentes.

Video Conference

Finalmente, para adicionar o Video Conference na sua aplicação, você pode usar o seguinte código:

import { VideoConference } from "@superviz/sdk/lib/components";

video = new VideoConference({

  camsOff: false,

  chatOff: false,

collaborationMode: {

    enabled: "true",

    position: "right",

    modalPosition: "right",

    initialView: "list"

  },  

  defaultToolbar: false,

  devices: {

    audioInput: false,

    audioOutput: false,

    videoInput: false

  },

  screenshareOff: false,

  skipMeetingSettings: false,

});

room.addComponent(video);

Após ser inicializada, será inserido um iframe da SuperViz no Document Object Model (DOM). Além disso, se necessário, irá envia um pedido do navegador para o usuário com finalidade de consentir o acesso à câmera e ao microfone do participante.

Com as permissões necessárias consentidas, o participante pode configurar os dispositivos de entrada e saída, como uma câmera e um microfone, e entrar na sala de reuniões.

Há várias opções para personalizar a experiência dentro da sala. Incentivo a explorar a documentação para ver o que está disponível.

Se você sentir falta de uma opção específica ou configuração que não está mencionada na documentação, sinta-se à vontade para entrar no servidor Discord ou falar pelo e-mail.

Modo de colaboração

Uma característica legal é a opção de ativar ou desativar o Modo de Colaboração.

Quando ativado, o participante pode colaborar com outros participantes na mesma sala, habilitando uma experiência similar ao círculo so Slack, Figma e outras ferramentas, onde a reunião por Vídeo será sobreposta na mesma página, porém não impedindo o uso da mesma. Quando desativado, permitirá uma experiência onde a Videoconferência será exibida em tela cheia.

Trabalhando com eventos

Trabalhar com eventos da chamada é bem tranquilo, é preciso somente se subscrever a um determinado evento como no código abaixo:

video.subscribe('meeting.participant-left', (participant) => {

   // Faça algo

});

Há vários eventos disponívies como MEETING_DEVICES_CHANGE, MEETING_CONNECTION_STATUS_CHANGE, DESTROY, MEETING_STATE_UPDATE, e muitos outros, a lista completa pode ser conferida na documentação de eventos.

Além desses eventos predefinidos, a SuperViz também oferece um Real-time Data Engine. Com isso, você pode criar eventos personalizados para suas necessidades específicas, proporcionando mais controle e flexibilidade na gestão das funcionalidades interativas do seu aplicativo.

Você pode encontrar este código pronto para uso no seu repositório de samples, que fornece exemplos práticos de como usar o SDK.