O Video Express já chegou e veja por que ele é incrível!

Explicação resumida

A Vonage, com uma década de experiência em desenvolvimento de vídeo, criou uma API simples e de alto nível chamada Video Express para acelerar o desenvolvimento e a integração de vídeo com múltiplos participantes em aplicativos da web.

Multipartidário?

Vamos começar definindo o que significa “multiparticipativo”. Trata-se de uma videochamada com vários participantes que, ao mesmo tempo em que transmitem seus fluxos de áudio e vídeo, também recebem os fluxos de todos os demais participantes.

Antes, era bastante comum ter equipes reunidas na mesma sala e, em seguida, fazer uma videochamada com uma equipe que estava em outra sala.

2 teams 2 streams

Como você mesmo deve ter percebido ultimamente, a tendência é que as pessoas liguem de locais diferentes.

6 people 36 streams

Como você pode ver na imagem acima, acompanhar todas as conexões dos participantes pode rapidamente se tornar um desafio complexo.

É aqui que Video Express entra em cena. Talvez você seja iniciante no desenvolvimento de Applications que integram vídeo ou um desenvolvedor experiente que deseja se concentrar em outras coisas. O Video Express ajuda a eliminar a complexidade E ainda otimiza a qualidade, o uso da CPU e o layout! É por isso que ele é incrível!

Aqui está o Video Express sendo usado em um projeto em JavaScript puro que você pode conferir. Há um botão de implantação rápida; basta inserir sua chave e seu segredo de API no arquivo .env para ter seu próprio exemplo funcional. Trata-se de uma implementação básica para destacar o Video Express.

Eliminando a complexidade

Veja a comparação abaixo do código inicial necessário para criar um chat por Video.

Client SDK do cliente JavaScript da Video API da Vonage

const session = OT.initSession(this.apiKey, this.roomId); // Init session
session.on('sessionConnected', ...); // Handle session connected events
session.on('sessionDisconnected', ...); // Handle session end
session.on('streamCreated', ...); // Subscribe to newly published streams
session.on('streamDestroyed', ...); // Clean up on stream end
session.on('connectionCreated', ...); // Handle connection events (join)
session.on('connectionDestroyed', ...); // Handle disconnect events (leave)

// Build your own UI / Layout
// Active Speaker Detection
// Video / Audio Optimizations
const pub = OT.initPublisher(targetElement, options, (err) => console.error(err)); // Create a publisher
session.publish(pub, undefined, err => { // Try to publish media
 if (err) {
   reject(err);
 } else {
   resolve();
 }
});

Vonage Video Express

const room = new VideoExpress.Room({ apiKey, sessionId, token, roomContainer: 'roomContainer’ });

room.join();

O Video Express cuida de todas as operações de publicação e inscrição de todos os participantes da videochamada. Basta informar o ID do elemento HTML (neste exemplo, “roomContainer”) onde o “Room” deve ser inserido, entrar na chamada e pronto. Leia nossa documentação para saber mais sobre o que você pode fazer.

Gerente de Qualidade

Quality Manager diagram

Para ajudar a garantir a melhor qualidade possível nas videochamadas, o Video Express aplicará vários métodos automaticamente. Isso inclui maximizar o tamanho dos blocos para os fluxos de vídeo visíveis e pausar aqueles que não podem ser vistos. Ele também ajustará a resolução e as taxas de quadros de acordo com as condições da rede e da CPU. Ao atribuir dinamicamente prioridades mais altas aos participantes que estão falando e aos compartilhamentos de tela, os elementos que precisam de destaque podem atingir a melhor qualidade.

Gerente de Experiência

Para proporcionar uma excelente experiência ao usuário, o Video Express otimizará os recursos no lado do cliente. Por exemplo, todos os participantes além do décimo são automaticamente silenciados para evitar salas muito barulhentas. Quando um vídeo exibido fica menor, é solicitado um stream de menor tamanho para ajudar a reduzir a largura de banda necessária para uma reprodução fluida.

Exemplo de uma sessão de Video bruta, não otimizada

Table with data of an unoptimized multiparty video session

Exemplo de uma sessão de Video otimizada

Table with data of an optimized multiparty video session

Gerenciador de Layout

Layout Manager diagram

Logo ao iniciar o Video Express, o programa ajusta automaticamente o layout dos fluxos de vídeo com base no tamanho da tela e no número de participantes. As telas compartilhadas e o participante que está falando recebem maior prioridade ou ocupam mais espaço.

Visualizar Editor

Outro recurso que o Video Express oferece é a possibilidade de o usuário visualizar o vídeo e o áudio antes de entrar na sala. Aqui está um exemplo de código:

const previewPublisher = new VideoExpress.PreviewPublisher('previewContainer');
await previewPublisher.previewMedia({
  targetElement: 'previewContainer',
  publisherProperties: {
    resolution: '1280x720',
    audioBitrate: 15,
  },
});

Compartilhamento de tela

O último recurso do Video Express que gostaria de destacar é a forma como o compartilhamento de tela é feito.

const startScreensharing = () => {
  room.startScreensharing("myScreenshare");
}

const stopScreensharing = () => {
  room.stopScreensharing();
}

screenshareStartBtn.addEventListener("click", startScreensharing, false);

screenshareStopBtn.addEventListener("click", stopScreensharing, false);

É isso aí! Com essas poucas linhas de código, você pode compartilhar sua tela, e o Video Express vai reconfigurar o layout da sala para dar prioridade a ela.

Bem...

Pronto para criar algo incrível?!

Dê uma olhada na documentação do Video Express para obter mais detalhes.

Experimente o projeto básico de introdução.

Mostre-nos no que você está trabalhando e envie seus comentários em nosso canal da Comunidade no Slack.