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.