https://a.storyblok.com/f/270183/28212/49fc2a917e/auto-layout_videoapi.png

Mofi RahmanEx-funcionário da Vonage

Mofizur Rahman (@moficodes) é um Developer Advocate Sênior na Vonage. Atualmente, sua linguagem de programação favorita é Go. Ele também gosta de experimentar o Node, o Python e o Java. Além disso, está aprendendo e ensinando na comunidade de Go, Kubernetes, Docker e microsserviços. Ele acredita firmemente no poder do código aberto e na importância de retribuir à comunidade. Ele se autodenomina viciado em colecionar adesivos e já acumulou várias caixas cheias deles, sem sinais de que vai parar. Às vezes, ele se aventura na fotografia.

Ele escreve, de vez em quando, posts sobre tecnologia, que podem ser encontrados em https://dev.to/moficodes.

Layout automático para o aplicativo Vonage Video

Publicado em November 11, 2021

#video-api

Tempo de leitura: 2 minutos

A Video API da Vonage facilita a criação de nosso próprio aplicativo de chat por vídeo com apenas 15 linhas de código. Para que ele tenha a aparência e a experiência de um aplicativo de chat por vídeo de verdade, precisamos fazer um pouco mais de trabalho. Um dos desafios é posicionar corretamente os participantes na tela. Applications como o Zoom, o Teams, o Google Meet e o Webex têm, todos, aparências distintas. Basicamente, todos eles alcançam o mesmo objetivo: posicionar os participantes na tela em uma espécie de grade e reorganizá-los de acordo com os diferentes tamanhos de tela. É isso que faremos hoje para o nosso aplicativo de vídeo da Vonage.

Aqui está um exemplo do que vamos criar.

Screen recording of a demo application where multiple copies of a live webcam video are added to the screen, then the screen dimensions are changed to demonstrate video feeds resizing and layout shift. One video feed is selected and gets larger. Then video feeds are removed one by one.

Pré-requisito

Editor de texto (por exemplo, VS Code)
Navegador da Web

Introdução

O código-fonte desta demonstração está em este repositório.

O principal ingrediente para que nosso layout automático funcione é Opentok Layout JS. Trata-se de uma biblioteca de código aberto criada por Adam Ullman.

Análise aprofundada do código

O código desta demonstração é bastante curto. São 4 arquivos no total. Três deles serão criados por nós (index.html, style.css, script.js) e um (opentok-layout.js) que é baixado do repositório Opentok Layout JS .

index.html

Na <head> seção do nosso arquivo HTML, adicionamos uma referência à Biblioteca do Cliente Opentok. Ela é usada para obter acesso à OT que nos permite obter acesso à câmera. Também incluímos opentok-layout.js e nosso style.css.

    <script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
    <script src="js/opentok-layout.js"></script>
    <link rel="stylesheet" href="css/style.css" />

No <body>, adicionamos um div com id="layout". Esse é o contêiner onde colocaremos todos os Videos dos participantes. Também temos dois botões usados para adicionar e remover Videos do nosso layout.

    <div id="layout"></div>
    <div id="buttons">
      <input
        type="button"
        name="add"
        value="Add"
        id="add"
        onclick="addElement()"
      />
      <input
        type="button"
        name="remove"
        value="Remove"
        id="remove"
        onclick="removeElement()"
      />
    </div>

Por fim, adicionamos uma referência ao nosso script.js arquivo logo após a </body> tag.

style.css

A maior parte do arquivo CSS é usada para posicionar os botões na parte inferior da tela, o que deixa o restante do espaço da tela para o layout contêiner. O contêiner possui uma propriedade de transição CSS definida para que as mudanças no layout, decorrentes da adição e remoção de Videos, pareçam suaves.

script.js

É aqui que inicializamos e utilizamos a biblioteca Opentok Layout JS. Primeiro, criamos uma referência ao nosso contêiner de layout, layoutEl. Em seguida, uma layout variável é inicializada e definida com uma função do Opentok Layout JS que retorna, quando recebe layoutEl e algumas opções.

var layoutEl = document.getElementById('layout');
var layout;

function updateLayoutValues() {
  const opts = {
    maxRatio: 3 / 2,
    minRatio: 9 / 16,
    fixedRatio: false,
    alignItems: 'center',
    bigPercentage: 0.8,
    bigFixedRatio: false,
    bigMaxRatio: 3 / 2,
    bigMinRatio: 9 / 16,
    bigFirst: true,
    scaleLastRow: true,
    smallMaxWidth: Infinity,
    smallMaxHeight: Infinity,
    bigMaxWidth: Infinity,
    bigMaxHeight: Infinity,
    bigAlignItems: 'center',
    smallAlignItems: 'center',
  };
  layout = initLayoutContainer(layoutEl, opts).layout;
}
updateLayoutValues();

Há uma explicação sobre todas as opts propriedades e valores possíveis no arquivo Opentok Layout JS ReadMe.

layout é chamado sempre que precisamos reorganizar o layout do aplicativo quando Videos são adicionados, removidos ou quando a janela é redimensionada.

Existem também ouvintes de eventos para os botões “Adicionar” e “Remover”. Outro ouvinte de evento é criado para quando se clica duas vezes no Video de um participante, o que alterna entre ampliar e reduzir o Video.

Conclusão

Esta foi uma explicação rápida para mostrar como você pode criar um layout responsivo para seu aplicativo Vonage Video.

Para um caminho ainda mais rápido na criação de um aplicativo de Video com vários participantes, você pode utilizar o o Vonage Video Express. O Video Express utiliza opentok-layout-js e integra nosso Client SDK do OpenTok. Você pode aprender a usar o Vonage Video Express com este artigo do Enrico.

Se você tiver alguma dúvida ou comentário, entre em contato conosco pelo Twitter ou Slack.