Arquivamento de vídeos com a Video API da Vonage e o React

Introdução

Gravar um video nem sempre é tão simples quanto clicar em um botão de ; projetos diferentes exigem resultados diferentes. Neste destaque de projeto, o engenheiro de soluções da Vonage Misha Behei explica detalhadamente um aplicativo de demonstração que lida com as quatro principais formas de arquivar sessões de vídeo.

Resumo: Dê uma olhada no repositório.

Vários modos de gravação, implementação simplificada

A Video API da Vonage oferece várias maneiras de gravar uma sessão de vídeo, como arquivamento apenas de áudio, arquivamento composto e arquivamento de fluxos individuais. apresenta as diversas formas de arquivamento e, ao mesmo tempo, apresenta o Experience Composer.

Pré-requisitos

Antes de começar, certifique-se de que você tenha:

• Node.js instalado

• Um account da Video API da Vonage

• Conhecimentos básicos sobre React e TypeScript

• Git instalado localmente

Para o front-end do aplicativo, ele utiliza o seguinte:

• Interface do usuário do React (framework de interface do usuário) escrito em TypeScript

• Vite (ferramenta de compilação e servidor de desenvolvimento)

• Material UI (Biblioteca de componentes de interface do usuário)

• SDK em JavaScript da Video API da Vonage

Para o backend, ele utilizou o Node.js com o Express, escrito em TypeScript (servidor).

Como funciona

Este aplicativo utiliza a Video API da Vonage para demonstrar diferentes maneiras de gravar sessões de vídeo. Em termos simples, ele permite que os usuários escolham se desejam realizar qualquer uma das seguintes ações:

• Grave apenas o áudio

• Junte todos os participantes em um único Video

• Mantenha o Video de cada participante separado

• Crie uma gravação personalizada com a marca da sua empresa e elementos interativos. 

Os modos de arquivamento

Este aplicativo web de página única demonstra três modos distintos de arquivamento, juntamente com a funcionalidade do Experience Composer.

​​Arquivo Somente de Áudio

O “Arquivo Somente Áudio” captura o fluxo de áudio sem a composição de Video. Quando um usuário clica em Iniciar um arquivo somente de áudio, o aplicativo inicializa um único Video Publisher. Apesar do vídeo estar sendo publicado, apenas o áudio é gravado devido à configuração do arquivo somente de áudio.

Arquivo “Composed”

O “Composed Archive” grava um único arquivo de Video que reúne todos os participantes em uma única visualização. Quando um usuário clica em “Iniciar o Composed Archive”, o aplicativo inicia um editor de vídeo e solicita permissões para compartilhamento de tela. A gravação resultante combina as imagens da webcam e da captura de tela em um único arquivo.

Arquivo individual

O “Arquivo Individual” separa os fluxos de Video de cada participante. Ao clicar em Iniciar arquivo individual inicializa dois publicadores de vídeo: um com o desfoque de fundo ativado e outro sem. Por padrão, a nuvem da Video API da Vonage disponibiliza os downloads como um único arquivo ZIP contendo todas as gravações. Este projeto inclui um processamento adicional que extrai automaticamente o arquivo ZIP e permite que os usuários reproduzam arquivos de vídeo individuais separadamente.

Experiência com o Composer

Experience Composer gera vídeos com renderização personalizada, incluindo elementos interativos e identidade visual. O Experience Composer requer uma URL disponível publicamente para acessar e gravar. Para este projeto, criei e implementei um aplicativo complementar, um jogo simples de futebol que atribui gols aleatoriamente ao time da casa ou ao time visitante. Quando um usuário clica em “Iniciar o Experience Composer”, o Experience Composer acessa a URL do jogo e a grava, enquanto o aplicativo, simultaneamente, inicializa um publicador de vídeo. Embora o Experience Composer não seja, tecnicamente, um recurso de arquivamento, ele cria um novo stream que é publicado na sessão e é gravado pelo recurso de arquivamento juntamente com o publicador de vídeo.

Na parte inferior da página, você encontrará uma lista de arquivos recentes que exibe o status do arquivo (disponível/expirado/suspenso), o nome do arquivo (que inclui um fato aleatório interessante) e o ID do arquivo com um link para o Vonage Archive Inspector. Você também pode reproduzir ou baixar as gravações diretamente dessa lista. 

Observe que os arquivos da Video API da Vonage ficam disponíveis apenas por 72 horas, a menos que um bucket de armazenamento S3 esteja configurado. Após esse período, o status do arquivo passa de disponível para expirado, tornando a gravação inacessível.

Execução do projeto

Se você quiser testar isso por conta própria, clone o repositório.

Você vai precisar de dois .env arquivos

Crie o .env arquivo no backend/ diretório e adicione os seguintes valores: 

OPENTOK_API_KEY=your_api_key_here

OPENTOK_API_SECRET=your_api_secret_here

PORT=3345

Crie o .env arquivo no frontend/ diretório e adicione o VITE_OPENTOK_API_KEY valor.

Instale as dependências tanto para o front-end quanto para o back-end executando: 

npm install

Para executar a demonstração de forma independente a partir da linha de comando, execute:

npm run dev

O servidor backend será iniciado em localhost:3345, e o front-end será executado em localhost:5173. 

Conclusão

E é isso! Este projeto demonstra os recursos de arquivamento da Video API da Vonage, mostrando como os desenvolvedores podem adaptar soluções de gravação às suas necessidades específicas, seja capturando sessões apenas de áudio, criando gravações unificadas ou separando fluxos individuais. A integração com o Experience Composer mostra como adicionar identidade visual personalizada e elementos interativos às gravações. Experimente você mesmo a demonstração para entender melhor como esses recursos podem ser incluídos em seus próprios projetos.