Comece a usar o aplicativo Web Reference

O Web Reference App é um aplicativo de videoconferência de código aberto desenvolvido com React e a Video API da Vonage. Ele demonstra como implementar sessões modernas com vários participantes na web, utilizando um front-end modular, um back-end leve e recursos configuráveis que se adaptam a diferentes cenários de reunião.

O que está incluído

O aplicativo Web Reference oferece um fluxo completo de reuniões e recursos básicos para conferências:

A página de destino onde os usuários podem criar ou participar de salas.
A sala de espera para visualizar dispositivos de áudio e vídeo e definir um nome de exibição.
A sala de vídeo com capacidade para até 25 participantes.
A página pós-chamada para voltar à página inicial e ver os arquivos disponíveis.
Seletores de dispositivos de entrada/saída para câmeras, microfones e alto-falantes.
Efeitos de fundo incluindo desfoque, imagens predefinidas e arquivos enviados pelo usuário (a compatibilidade com os navegadores varia).
Supressão de ruído controles.
Recursos configuráveis impulsionado por um config.json arquivo colocado no public diretório.
Ferramentas durante a chamada incluindo bate-papo, reações, compartilhamento de tela e arquivamento.
Detecção de alto-falante ativo e um layout dinâmico que se adapta às mudanças na rede e nos participantes.
Painel de configurações avançadas: Configure as definições de vídeo e áudio do emissor para otimizar a qualidade e o desempenho da transmissão. Ajuste parâmetros como resolução, taxa de bits, taxa de quadros, codec de áudio e níveis de áudio para atender aos requisitos de transmissão. Use o painel de observabilidade em tempo real para monitorar a integridade da transmissão. Esse recurso oferece visibilidade imediata do desempenho da transmissão, ajudando a identificar problemas rapidamente e a manter uma experiência de transmissão estável e de alta qualidade tanto para os editores quanto para os espectadores.

Arquitetura

O aplicativo Web Reference é composto por um front-end e um back-end:

Front-end (React + Vite):
Implementa o fluxo de chegada, a sala de espera, a interface do usuário para reuniões, o gerenciador de layout, o chat, as reações, os efeitos de fundo, as configurações avançadas, a ferramenta de relatórios e a tela pós-chamada.
Back-end (Express):
Gera os IDs de sessão e os tokens exigidos pela Video API da Vonage.
Testes e ferramentas:
O Playwright é utilizado para testes de integração, incluindo comparações de capturas de tela.
Fluxos de trabalho comuns, como a verificação de lint e a geração de documentação, são gerenciados por meio de scripts do Yarn.

Principais características

A experiência da reunião inclui:

Salas de desembarque e de espera com a configuração completa do dispositivo.
Compartilhamento de tela, incluindo o zoom do assinante (quando houver suporte do processador de mídia).
Bate-papo em grupo e reações com emojis.
Supressão de ruído configurações.
Efeitos de fundo (com efeitos de desfoque e baseados em imagem), compatível com os formatos de arquivo JPG, PNG, GIF e BMP.
Detecção de alto-falante ativo.
Gerenciador de layout com os modos de grade, alto-falante ativo e compartilhamento de tela.
Gerenciamento dinâmico de blocos que economiza largura de banda e se adapta às mudanças no número de participantes.
Lista de participantes com indicadores de áudio ligado/desligado.
Arquivamento organizado para gravar reuniões.
Painel de informações sobre a reunião com um link para o quarto que pode ser compartilhado.
Ferramenta de relatórios para enviar problemas relacionados à chamada.
Configurações avançadas para configurar o vídeo e o áudio e verificar a observabilidade.

Personalização

O Web Reference App permite a configuração de recursos e da interface do usuário sem a necessidade de modificar o código-fonte.

Configuração de recursos

Os sinalizadores de recurso são definidos como variáveis de ambiente em um script de shell vcrBuild.env.sh, incorporado durante a compilação. Você pode personalizar:

layout e resolução padrão
comportamento do áudio e do vídeo ao entrar na chamada
idiomas e configurações regionais suportados
disponibilidade de recursos durante a chamada (arquivamento, legendas, chat, compartilhamento de tela, emojis)
configurações avançadas (taxa de bits, taxa de quadros, supressão de ruído, prioridade de codec)
seleção de dispositivos e controles de microfone/câmera
duração da notificação

Personalização do tema e da interface do usuário

Para personalizar o tema visual do aplicativo, edite designTokens.json e execute:

yarn sync:theme-tokens

Isso sincroniza seus tokens de design com o sistema de temas do aplicativo.

Próximos passos

Para instalar, configurar e executar o Web Reference App, siga as instruções contidas no arquivo README do repositório: