Uso de layouts dinâmicos em transmissões HLS/RTMP

A Video API permite que você tenha controle total sobre sua interface de usuário ao desenvolver Applications com sessões de vídeo com vários participantes, mas quais opções estão disponíveis quando você precisa transmitir essas sessões por meio de streams HLS e/ou RTMP?

Nesta postagem, discutiremos quais layouts integrados estão disponíveis de fábrica, como criar seus próprios layouts personalizados e como alterar layouts e estilos de transmissão em tempo real. Em seguida, discutiremos como você pode capturar os layouts juntamente com a interface do usuário do seu aplicativo usando o Vonage Experience Composer.

Quer experimentar? Você pode ver um exemplo de aplicação que utiliza o recurso de transmissão no GitHub. Você também pode implantá-lo no Heroku para testar.

Tipos de layout integrados

Há vários fatores a serem considerados ao escolher o melhor layout para sua transmissão. Alguém está falando? Alguém está compartilhando a tela? A conversa é um painel de discussão?

Felizmente, a Video API da Vonage oferece vários layouts predefinidos para ajudá-lo a criar a melhor experiência possível para seus espectadores.

Por padrão, as transmissões utilizam o bestFit layout (mostrado abaixo). Esse layout muda de acordo com o número de participantes e oferece a cada emissor o mesmo espaço na tela.

Outras opções incluem Picture-in-Picture (pip), Apresentação Vertical (verticalPresentation) e Apresentação horizontal (horizontalPresentation).

Atualização de maio de 2021: Foram adicionados novos layouts verticais para permitir a gravação ou transmissão em resoluções SD e HD no modo retrato, ideais para dispositivos móveis:

Novos tipos de layout para compartilhamento de tela

Novos tipos de layout foram introduzidos em maio de 2021:

• bestFit

• apresentação horizontal

• apresentação vertical

• pip

Inicialização e alteração de layouts

É possível definir um layout inicial ao iniciar uma transmissão. Para isso, adicione uma layout propriedade contendo uma type propriedade ao corpo da solicitação. Essa type propriedade deve corresponder ao layout predefinido que você deseja usar.

{
  "sessionId": "2_MX44NTQ1MTF--bm1kTGQ0RjVHeGNQZE51VG5scGNzdVl0flB-",
  "layout": {
    "type": "bestFit"
  }
}

Para alterar o layout durante uma transmissão ao vivo, use um dos SDKs de servidor da OpenTok ou acesse o endpoint da API REST da OpenTok /broadcast/layout.

Envie um objeto JSON com uma type propriedade que indique o layout desejado no corpo da sua solicitação.

{
  "type": "pip"
}

Mas usar layouts é apenas o primeiro passo para deixar sua transmissão com uma ótima aparência. O próximo passo é atualizar as listas de turmas das suas transmissões.

Vamos usar o layout de apresentação vertical verticalPresentation como exemplo. Na imagem acima, você notará que a área maior contém a palavra “focus”. Focus é o nome de uma classe que deve ser aplicada ao stream que você deseja que apareça nessa área.

Seja uma tela compartilhada, um alto-falante ativo ou um editor que você tenha marcado como “apresentador”, a transmissão que você deseja destacar deve ter a classe “focus” atribuída a ela e nenhuma outra. Vamos falar sobre estilos e como aplicá-los e modificá-los.

Estilos de transmissão e streaming

O layout de uma transmissão é criado em um DOM virtual com a seguinte estrutura:

<broadcast>
  <stream class="{layoutClassList}" />
  <stream class="{layoutClassList}" />
  <stream class="{layoutClassList}" />
  ...
</broadcast>

É importante ter essa estrutura em mente ao usar os layouts predefinidos ou ao criar seus próprios layouts. Por padrão, o Video da transmissão tem 640x480 pixels, mas você pode especificar o uso de 1280x720 ao iniciar a transmissão. Nesse caso, os layouts predefinidos são ajustados para usar uma proporção de 16:9.

Importante: Em uma transmissão, só é possível exibir 16 transmissões ao mesmo tempo.

Mudança de estilos

Os layouts predefinidos fornecem CSS para controlar a aparência da transmissão. Para utilizá-los, você precisará especificar quais classes devem ser aplicadas a quais streams. É possível alterar a lista de classes dos streams usando qualquer um dos nossos SDKs de servidor ou por meio da API REST da OpenTok /session/{sessionId}/stream . As solicitações para esse endpoint devem conter um corpo JSON semelhante ao objeto abaixo:

{
  "items": [
    {
      "id": "8b732909-0a06-46a2-8ea8-074e64d43422", // stream id
      "layoutClassList": ["focus"] // array of classes to apply to the specified stream
    }
  ]
}

É importante observar que a items propriedade é um array que permite fornecer detalhes sobre vários streams em uma única solicitação. Portanto, no exemplo de uso da apresentação vertical, você deve enviar a carga útil acima, especificando o id do stream no qual deseja colocar o foco. Se outro stream já tivesse a classe de foco, você deve enviá-lo com uma lista de classes vazia para que a classe de foco seja removida dele.

Criação de layouts personalizados

Se um dos layouts predefinidos não atender às suas necessidades, você pode criar um layout personalizado indicando custom como tipo e uma stylesheet propriedade com CSS.

{
  "sessionId": "2_MX44NTQ1MTF--bm1kTGQ0RjVHeGNQZE51VG5scGNzdVl0flB-",
  "layout": {
    "type": "custom",
    "stylesheet": "stream.instructor {position: absolute; width: 100%;  height:50%;}"
  }
}

Ao criar um layout personalizado, é importante levar em conta alguns aspectos:

• Estilos padrão aplicados ao broadcast e stream elementos

• Seletores CSS permitidos

• Propriedades e valores permitidos no CSS

Estilos padrão

O broadcast e stream têm regras padrão aplicadas a eles. Você pode substituir esses estilos em seu CSS personalizado. As regras padrão são:

broadcast {
  position: relative;
  margin:0;
  width: 640px;
  height:480px;
  overflow: hidden;
}
stream {
  display: block;
  margin: 0;
}

Observação: a resolução do contêiner é fixa e não pode ser substituída por CSS.

Seletores CSS permitidos

Os seletores de tipo são compatíveis apenas com elementos de stream. O elemento broadcast não pode ser selecionado. Os seletores de classe (como .focus) são compatíveis (e recomendados). Eles podem ser usados para selecionar qualquer grupo de streams ou um stream individual. São suportadas combinações de irmãos adjacentes e irmãos em geral (irmão-um + irmão-dois, irmão-um ~ irmão-dois).

O :first-child, :last-child, :nth-child(n), e :nth-last-child(n) pseudoclasses também são suportados.

Os seguintes seletores não são suportados:

• O seletor universal (*)

• Seletores de descendentes (ancestral pai, pai * ancestral)

• Seletores de filhos (pai > filho)

• Seletores de ID (#myidentifier)

• Seletores de atributos ([data-title*="my-title"])

• Os seletores de pseudoelementos não são suportados

Propriedades CSS permitidas

A tabela a seguir descreve as propriedades CSS atualmente suportadas e seus valores possíveis:

Indo além

Com o Experience Composer, você pode capturar não apenas o layout da sua videochamada, mas também toda a sua aplicação web. Isso inclui banners, chat de texto, quadro branco ou quaisquer outros elementos da interface do usuário exibidos na sua aplicação. O Experience Composer participa da videochamada e transforma tudo o que está visível na tela em outro fluxo. Esse fluxo pode então ser transmitido e/ou arquivado.

Continue aprendendo

Quer saber mais sobre como personalizar a aparência das suas transmissões? Confira os links abaixo:

• Transmissão do OpenTok

• Configuração do layout de vídeo para transmissões ao vivo no OpenTok