Formatos de vídeo para arquivos editados e transmissões ao vivo

Existem vários tipos de layout predefinidos que você pode usar com arquivos compostos e transmissões ao vivo. Você também pode usar CSS para definir layouts personalizados.

Essas opções de layout se aplicam a arquivos compostos (não a arquivos individuais) e a transmissões ao vivo (não a transmissões interativas):

É possível atribuir classes de layout às transmissões do OpenTok para definir como elas serão exibidas no layout de um arquivo ou de uma transmissão ao vivo.

Esta página inclui as seguintes seções:

Tipos de layout predefinidos

Existem quatro tipos de layout predefinidos disponíveis: ajuste ideal, imagem em imagem, apresentação vertical e apresentação horizontal.

Melhor ajuste

Este é o tipo de layout inicial padrão.

Este é um layout em mosaico, que se adapta de acordo com o número de vídeos. O número de colunas e linhas varia dependendo do número de transmissões do OpenTok na transmissão. Por exemplo, a ilustração a seguir mostra o layout quando há 1, 2, 4 ou 5 transmissões em uma sessão:

As classes de layout nesses fluxos não terão efeito sobre o layout. Cada posição na lista será convertida em uma posição na grade.

Este layout suporta até 16 transmissões do OpenTok (em uma grade).

Os fluxos são incluídos no layout com base em priorização de fluxos regras.

Para escolher esse layout, defina o type propriedade para "bestFit":

Imagem na imagem

Este é um layout “imagem na imagem”, no qual uma transmissão em tamanho reduzido fica visível sobre uma transmissão em tela cheia.

C = canto

Defina a classe de layout do stream em tamanho real como "full". (Veja Atribuição de classes de layout a transmissões do OpenTok.) O primeiro fluxo que não contenha essa classe ocupa a posição de canto. Se houver mais de dois fluxos no arquivo ou na transmissão, apenas os dois primeiros fluxos ficarão visíveis na saída.

Para escolher esse layout, defina o type propriedade para "pip":

Apresentação vertical

Este é um layout com um fluxo grande na margem direita da saída e vários fluxos menores ao longo da margem esquerda da saída.

Defina a classe de layout do fluxo em foco como "focus". (Veja Atribuição de classes de layout a transmissões do OpenTok.) Os fluxos sem a classe “focus” ocuparão a borda esquerda e dividirão o espaço igualmente.

Para vídeos na orientação paisagem (640x480, 1280x720, 1920x1080), este layout suporta 1 fluxo principal e até 5 outros fluxos (ou até 7 para vídeos em 1920x1080). Para vídeos na orientação retrato (480x640, 720x1280 e 1080x1920), este layout suporta 1 fluxo principal e até 8 outros fluxos (ou 10 outros fluxos para 1080x1920).

Para escolher esse layout, defina o type propriedade para "verticalPresentation":

Apresentação horizontal

Este é um layout com um fluxo grande na borda superior da saída e vários fluxos menores ao longo da borda inferior da saída.

Existe uma classe de layout usada para especificar a posição dos fluxos neste layout: focus. (Veja Atribuição de classes de layout a transmissões do OpenTok) Os fluxos sem essa classe ocuparão a borda inferior e dividirão o espaço igualmente. As posições podem ser visualizadas da seguinte forma:

Para vídeos na orientação paisagem (640x480, 1280x720 e 1920x1080), este layout suporta 1 fluxo principal e até 5 outros fluxos (ou até 7 para vídeos em 1920x1080). Para vídeos na orientação retrato (480x640, 720x1280 e 1080x1920), este layout suporta 1 fluxo principal e até 3 outros fluxos.

Para escolher esse layout, defina o type propriedade para "horizontalPresentation":

Atribuição de classes de layout a transmissões do OpenTok

Ao utilizar um tipo de layout diferente do padrão “Best Fit”, é necessário definir a classe de layout a ser utilizada pelos streams do OpenTok, de acordo com o tipo de layout:

  • Se você usar o layout “Picture-in-Picture”, configure uma transmissão para usar o full classe de layout.
  • Se você usar o layout de apresentação horizontal, configure um stream para usar o focus classe de layout.
  • Se você usar o layout de apresentação vertical, configure um fluxo para usar o focus classe de layout.

Definindo a lista inicial de classes de layout para os fluxos de um cliente

Ao criar um token para que um cliente se conecte à sessão do OpenTok, você pode (opcionalmente) especificar a lista inicial de classes de layout para os streams publicados pelo cliente. Para isso, gere um token que inclua a configuração da lista inicial de classes de layout. Os exemplos a seguir utilizam os SDKs do OpenTok para Java, Node, PHP, Python, Ruby e .NET.

Java:

import com.opentok.OpenTok;
import com.opentok.TokenOptions;

OpenTok opentok = new OpenTok(apiKey, apiSecret)
List<String> classList = List.of("focus", "bar", "inactive");
String token = session.generateToken(new TokenOptions.Builder()
  .initialLayoutClassList(classList)
  .build());

Nó:

var OpenTok = require('opentok'),
    opentok = new OpenTok(apiKey, apiSecret);

opentok.createSession({mediaMode:"routed"}, function(err, session) {
  if (err) return console.log(err);

  token = session.generateToken({
    expireTime : (new Date().getTime() / 1000)+(7 * 24 * 60 * 60), // in one week
    data :       'name=Johnny',
    initialLayoutClassList : ['focus', 'inactive']
  });
});

PHP:

use OpenTok\Session;
use OpenTok\Role;

$token = $opentok->generateToken($sessionId);

$token = $session->generateToken(array(
    'initialLayoutClassList' => array('focus')
));

Python:

from opentok import OpenTok
from opentok import MediaModes
from opentok import Roles

opentok = OpenTok(api_key, api_secret)
session = opentok.create_session(media_mode=MediaModes.routed)
token = session.generate_token(expire_time=int(time.time()) + 10,
                               data=u'name=Johnny'
                               initial_layout_class_list=[u'focus'])

Ruby:

opentok = OpenTok::OpenTok.new api_key, api_secret

session = opentok.create_session :media_mode => :routed
token = session.generate_token({
    :role                      => :moderator
    :expire_time               => Time.now.to_i+(7 * 24 * 60 * 60) # in one week
    :data                      => 'name=Johnny',
    :initial_layout_class_list => ['focus', 'inactive']
});

.NET:

List< string >  initialLayoutClassList = new List<string>()
{
    "focus"
};
string token = session.GenerateToken(initialLayoutClassList: initialLayoutClassList);

Modificando a lista de classes de layout de um fluxo

É possível alterar dinamicamente a lista de classes de layout de um stream chamando o OpenTok API REST /session/{sessionId}/stream. Envie uma solicitação PUT para a seguinte URL:

https://api.opentok.com/v2/project/{apiKey}/session/{sessionId}/stream

Defina o Content-Type como "application/json" e inclua a lista de classes de layout como uma propriedade dos dados JSON na solicitação PUT:

{
  "items": [
    {
      "id": "8b732909-0a06-46a2-8ea8-074e64d43422",
      "layoutClassList": ["full"]
    }
  ]
}

O id A propriedade é o ID do stream. Observe que é possível atualizar a lista de classes de layout para vários streams passando vários objetos JSON na matriz `items`.

A solicitação retorna um código de resposta 400 caso você especifique um valor inválido para layoutClassList. O valor deve ser um array de strings.

Você também pode modificar a lista de classes de layout de um stream usando os SDKs de servidor da OpenTok:

Obtendo a lista de classes de layout de um fluxo

É possível obter a lista de classes de layout de um stream chamando o OpenTok API REST /session/{sessionId}/stream/{streamId}. Faça uma solicitação GET para a seguinte URL:

https://api.opentok.com/v2/project/{apiKey}/session/{sessionId}/stream/{streamId}

A resposta inclui dados em JSON, que contêm um layoutClassList matriz:

{
  "id": "8b732909-0a06-46a2-8ea8-074e64d43422",
  "videoType": "camera",
  "name": "",
  "layoutClassList": ["full"]
}
  • O layoutClassList A propriedade é uma matriz das classes de layout do fluxo.
  • O id A propriedade é o ID do fluxo.
  • O videoType A propriedade está definida como “camera”, “screen” ou “custom”. Um vídeo “screen” utiliza o compartilhamento de tela no editor como fonte de vídeo; um vídeo “custom” é publicado por um cliente web usando um elemento VideoTrack em HTML como fonte de vídeo.
  • O name A propriedade é o nome do stream (caso tenha sido definido quando o cliente publicou o stream).

A solicitação retorna um código de resposta de erro 408 caso você especifique um ID de fluxo inválido.

Você também pode obter a lista de classes de layout de um stream usando os SDKs do servidor OpenTok:

Obter a lista de classes de layout para vários fluxos

É possível obter a lista de classes de layout para todos os fluxos de uma sessão chamando a função API REST /session/{sessionId}/stream. Faça uma solicitação GET para a seguinte URL:

https://api.opentok.com/v2/project/{apiKey}/session/{sessionId}/stream/

A resposta inclui dados em JSON, que contêm um items propriedade, que é uma matriz contendo informações de layout para os fluxos na sessão:

{
  "count": 2
  "items": [
    {
      "id": "8b732909-0a06-46a2-8ea8-074e64d43422",
      "videoType": "camera",
      "name": "",
      "layoutClassList": ["full"]
    },
    ...
  ]
}
  • O layoutClassList A propriedade é uma matriz das classes de layout do fluxo.
  • O id A propriedade é o ID do fluxo.
  • O videoType A propriedade está definida como “camera”, “screen” ou “custom”. Um vídeo “screen” utiliza o compartilhamento de tela no editor como fonte de vídeo; um vídeo “camera” é publicado por um cliente web usando um elemento VideoTrack HTML como fonte de vídeo.
  • O name A propriedade é o nome do stream (caso tenha sido definido quando o cliente publicou o stream).

Tipos de layout para compartilhamento de tela

É possível especificar um tipo de layout a ser usado quando houver uma transmissão de compartilhamento de tela ao vivo na sessão.

Você pode definir este tipo de layout de compartilhamento de tela (screenshareType) para um dos seguintes tipos de layout:

  • bestFit — Isso utiliza o melhor ajuste layout. No entanto, apenas as transmissões com compartilhamento de tela estão incluídas no layout.

  • horizontalPresentation — Isso utiliza o apresentação horizontal layout. No entanto, a transmissão de compartilhamento de tela (não uma transmissão com um focus (classe aplicada) ocupará a posição de foco no layout.

  • verticalPresentation — Isso utiliza o apresentação vertical layout. No entanto, a transmissão de compartilhamento de tela (não uma transmissão com um focus (classe aplicada) ocupará a posição de foco no layout.

  • pip — Isso utiliza o Imagem na imagem layout. No entanto, a transmissão de compartilhamento de tela (não uma transmissão com um full (classe aplicada) ocupará toda a posição no layout. O vídeo menor no layout será determinado com base em regras de priorização de fluxos. Por exemplo, se o cliente que publica o fluxo de compartilhamento de tela também estiver publicando um fluxo com uma fonte de vídeo de câmera, esse vídeo ocupará a posição de vídeo menor (a menos que outro fluxo tenha prioridade maior, por exemplo, porque lhe foi atribuída uma classe de layout).

Quando há uma transmissão ao vivo com compartilhamento de tela na sessão, o arquivo ou a transmissão utiliza o tipo de layout de compartilhamento de tela que você especificar. Quando não há vídeo de compartilhamento de tela na sessão, o arquivo ou a transmissão utiliza o layout mais adequado. (Quando você especificar um screenshareType, é preciso definir o principal layout type para bestFit.

Regras de priorização de fluxos

Os arquivos criados e as transmissões ao vivo podem incluir até 16 fluxos de vídeo por vez. O compositor de layout utiliza as seguintes regras para determinar a prioridade dos fluxos de vídeo que serão incluídos no arquivo ou na transmissão, bem como para definir como os fluxos serão ordenados e adicionados ao DOM virtual.

Os fluxos são classificados em dois níveis:

  • Fluxos de nível superior — Fluxos que foram atribuído um layout classe

  • Fluxos de nível inferior — Fluxos que não possuem classes de layout associadas

A priorização dos fluxos é determinada:

  • Os fluxos de nível superior (fluxos aos quais foram atribuídas classes de layout) recebem prioridade nesta ordem:

    1. Transmissões com compartilhamento de tela
    2. Transmissões sem compartilhamento de tela publicadas por clientes que também estejam publicando transmissões com compartilhamento de tela
    3. Todos os demais streams (ordenados pela hora em que foram adicionados à lista de streams a serem incluídos no arquivo ou na transmissão)

  • Canais de nível inferior (canais que têm não (aos quais foram atribuídas classes de layout) são , em seguida, priorizados nesta ordem:

    1. Transmissões com compartilhamento de tela
    2. Transmissões sem compartilhamento de tela publicadas por clientes que também estejam publicando transmissões com compartilhamento de tela
    3. Fluxos publicados por clientes que também estão publicando fluxos de nível superior (fluxos aos quais foram atribuídas classes de layout)
    4. Todos os demais streams (ordenados pela hora em que foram adicionados à lista de streams a serem incluídos no arquivo ou na transmissão)

Os fluxos de vídeo incluídos no arquivo ou na transmissão criados são selecionados com base em sua prioridade. Os fluxos serão sempre ordenados de acordo com essas regras. Desde que haja dois ou mais fluxos, eles serão adicionados ao DOM virtual com base nessa ordem.

Quando um cliente interrompe a transmissão de vídeo, ele é removido do vídeo composto. Quando ele retoma a transmissão de vídeo, é adicionado novamente ao vídeo composto se tiver prioridade maior do que outros clientes (com base nessas regras de priorização). Os vídeos compostos podem incluir até 16 fluxos de vídeo de clientes.

Se um arquivo composto ou uma transmissão atingir a capacidade máxima para fluxos incluídos e um cliente que esteja publicando um fluxo incluído se desconectar, será liberado espaço para um novo fluxo. O próximo fluxo de vídeo com a prioridade mais alta será incluído e renderizado.

Notas:

Definindo layouts personalizados

Além do layouts predefinidos, você pode usar CSS para definir seu próprio layout personalizado para arquivos compostos e transmissões ao vivo.

Para usar um layout personalizado, defina a propriedade “type” do layout como “custom” e defina uma propriedade adicional, stylesheet, cuja configuração no CSS é:

CSS usado no stylesheet A propriedade do recurso de layout se aplicará a um DOM virtual, que pode ser descrito no seguinte formato:

  • Para uma transmissão:

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

  • Para um arquivo:

    <archive class="container">
  <stream class="{layoutClassList}" />
  <stream class="{layoutClassList}" />
  <stream class="{layoutClassList}" />
  ...
</archive>

Observação: Por padrão, a resolução do arquivo composto ou da transmissão é de 640x480 pixels (SD na orientação horizontal). Você também pode configurar um arquivo composto ou uma transmissão para usar uma resolução de 480x640 (SD retrato), 1280x720 (HD paisagem), 720x1280 (HD retrato), 1920x1080 (FHD paisagem) ou 1080x1920 (FHD retrato) ao chamar a função iniciar arquivo ou o iniciar transmissão método da API REST do OpenTok. Os arquivos de 640 x 480 pixels e 480 x 640 pixels (SD) têm proporções de 4:3 e 3:4. Os arquivos de 1280 x 720 pixels, 720 x 1280 pixels, 1920 x 1080 pixels e 1080 x 1920 pixels (HD e FHD) têm proporções de 16:9 e 9:16. Lembre-se dessas proporções ao definir o CSS para um layout personalizado.

Regras

As seguintes regras padrão são aplicadas ao <archive> elemento:

archive {
  position: relative;
  margin:0;
  width: 640px;
  height:480px;
  overflow: hidden;
}

Da mesma forma, as seguintes regras padrão são aplicadas ao <broadcast> elemento:

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

As dimensões padrão são 640x480 pixels (SD na orientação paisagem). Você também pode configurar um arquivo composto ou uma transmissão para usar uma resolução de 480x640 (SD retrato), 1280x720 (HD paisagem), 720x1280 (HD retrato), 1920x1080 (FHD paisagem), ou 1080x1920 (FHD retrato) ao chamar o iniciar arquivo ou iniciar transmissão método da API REST do OpenTok.

As seguintes regras padrão são aplicadas a <stream> elementos:

stream {
  display: block;
  margin: 0;
}

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

Seletores

Os seguintes seletores CSS são suportados:

  • Os seletores de tipo são compatíveis apenas com elementos de fluxo (stream).
  • Seletores de classe (como .instructor) são compatíveis (e recomendados) e podem ser usados para selecionar qualquer grupo de fluxos ou um fluxo específico.
  • Os combinadores de irmãos adjacentes e de irmãos em geral são suportados (sibling-one + sibling-two, sibling-one ~ sibling-two).

Os seguintes seletores de pseudoclasse são suportados:

  • :first-child
  • :last-child
  • :nth-child(n)
  • :nth-last-child(n)

Os seguintes seletores CSS não são suportados:

  • O seletor universal não é compatível (*).
  • Os seletores descendentes não são suportados (parent ancestor, parent * ancestor).
  • Seletores de filhos não são suportados (parent > child).
  • Seletores de ID não são suportados (por exemplo, #myidentifier).
  • Os seletores de atributos não são suportados (por exemplo, [data-title*="my-title"]).
  • Os seletores de pseudoelementos não são suportados.

Propriedades

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

Nome Valor
width, height número positivo ( px/ %)
min-width, min-height número positivo ( px/ %)
max-width, max-height] número positivo ( px/ %)
left, right, top, bottom número ( px/ %)
margin, margin-left, margin-right, margin-top, margin-bottom número ( px/ %)
z-index número positivo
position 'relative', 'absolute'
display 'inline', 'block', 'inline-block'
float 'none', 'left', 'right'
object-fit 'contain' (o padrão), 'cover'
overflow 'hidden'
clear 'none', 'left', 'right', 'both', 'initial', 'inherit'

Exemplo de CSS

O CSS a seguir organiza dois fluxos com nomes de classe main e lower-left:

stream.main {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
stream.lower-left {
  position: absolute;
  left: 10%;
  bottom: 10%;
  width: 20%;
  height: 20%;
  z-index: 200;
}

O CSS a seguir se baseia no melhor ajuste layout predefinido:

stream {
  float: left;
}
stream:first-child:nth-last-child(1) {
  width: 100%;
  height: 100%;
}

stream:first-child:nth-last-child(2),
stream:first-child:nth-last-child(2) ~ stream {
  width: 50%;
  height: 100%;
}
stream:first-child:nth-last-child(3),
stream:first-child:nth-last-child(3) ~ stream,
stream:first-child:nth-last-child(4),
stream:first-child:nth-last-child(4) ~ stream {
  width: 50%;
  height: 50%;
}
stream:first-child:nth-last-child(5),
stream:first-child:nth-last-child(5) ~ stream,
stream:first-child:nth-last-child(6),
stream:first-child:nth-last-child(6) ~ stream,
stream:first-child:nth-last-child(7),
stream:first-child:nth-last-child(7) ~ stream,
stream:first-child:nth-last-child(8),
stream:first-child:nth-last-child(8) ~ stream,
stream:first-child:nth-last-child(9),
stream:first-child:nth-last-child(9) ~ stream
{
  width: 33.33%;
  height: 33.33%;
}

O CSS a seguir se baseia na apresentação horizontal layout predefinido:

stream {
  float:left;
  margin-top: 60%;
  width: 20%;
  height: 20%;
}
stream.focus {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0px;
  height: 80%;
  width: 100%;
}

O CSS a seguir se baseia na apresentação vertical layout predefinido:

stream {
  float: left;
  left: 0px;
  clear: left;
  width: 20%;
  height: 20%;
}
stream.focus {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0px;
  left: 20%;
  height: 100%;
  width: 80%;
}

O CSS a seguir se baseia no recurso “picture-in-picture” layout predefinido:

stream.full {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
stream {
  position: absolute;
  right: 10%;
  top: 10%;
  width: 20%;
  height: 20%;
  z-index: 200;
}

Observação: O CSS utilizado pelos layouts predefinidos está sujeito a alterações.

s