Diseños de vídeo para archivos compuestos y retransmisiones en directo

Hay varios tipos de diseño predefinidos que puede utilizar con archivos compuestos y emisiones en directo. También puedes utilizar CSS para definir diseños personalizados.

Estas opciones de diseño se aplican a los archivos compuestos (no a los archivos individuales) y a las retransmisiones en directo (no a las retransmisiones interactivas):

Puedes asignar clases de diseño a las transmisiones de OpenTok para modificar la forma en que se muestran en el diseño de un archivo o de una emisión.

Esta página incluye las siguientes secciones:

Tipos de diseño predefinidos

Hay cuatro tipos de diseño predefinidos disponibles: ajuste óptimo, imagen en imagen, presentación vertical y presentación horizontal.

Mejor ajuste

Este es el tipo de diseño inicial predeterminado.

Se trata de un diseño en mosaico que se adapta en función del número de vídeos. El número de columnas y filas varía según el número de transmisiones de OpenTok que haya en la emisión. Por ejemplo, a continuación se muestra el diseño cuando hay 1, 2, 4 o 5 transmisiones en una sesión:

Las clases de diseño aplicadas a estos flujos no tendrán ningún efecto sobre el diseño. Cada posición de la lista se traducirá en una posición en la cuadrícula.

Este diseño admite hasta 16 transmisiones de OpenTok (en una cuadrícula).

Los flujos se incluyen en el diseño en función de priorización de flujos reglas.

Para seleccionar este diseño, configura el type propiedad a "bestFit":

Imagen en imagen

Se trata de una disposición de «imagen dentro de imagen», en la que se ve una transmisión pequeña superpuesta a otra de tamaño completo.

C = esquina

Establezca la clase de diseño del flujo de tamaño completo en "full". (Véase Asignación de clases de diseño a las transmisiones de OpenTok.) La primera secuencia que no pertenezca a esta clase ocupa la posición de la esquina. Si hay más de dos secuencias en el archivo o en la retransmisión, solo las dos primeras serán visibles en la salida.

Para elegir esta disposición, configure la opción type propiedad a "pip":

Presentación vertical

Se trata de una disposición con un flujo grande en el borde derecho de la salida y varios flujos más pequeños a lo largo del borde izquierdo de la salida.

Establece la clase de diseño del flujo de enfoque en "focus". (Véase Asignación de clases de diseño a las transmisiones de OpenTok.) Las columnas que no tengan la clase «focus» ocuparán el borde izquierdo y dividirán el espacio de forma equitativa.

Para los vídeos en orientación horizontal (640x480, 1280x720, 1920x1080), este diseño admite 1 flujo principal y hasta 5 flujos adicionales (o hasta 7 en el caso de los vídeos de 1920x1080). Para vídeos en orientación vertical (480x640, 720x1280 y 1080x1920), este diseño admite 1 flujo principal y hasta 8 flujos adicionales (o 10 flujos adicionales para 1080x1920).

Para elegir esta disposición, configure la opción type propiedad a "verticalPresentation":

Presentación horizontal

Se trata de una disposición con un flujo grande en el borde superior de la salida y varios flujos más pequeños a lo largo del borde inferior de la salida.

Hay una clase de diseño que se utiliza para especificar la posición de los flujos en este diseño: focus. (Véase Asignación de clases de diseño a las transmisiones de OpenTok) Los flujos que no pertenezcan a esta clase ocuparán el borde inferior y dividirán el espacio de forma equitativa. Las posiciones pueden visualizarse de la siguiente manera:

Para los vídeos en orientación horizontal (640x480, 1280x720 y 1920x1080), este diseño admite 1 flujo principal y hasta 5 flujos adicionales (o hasta 7 en el caso de los vídeos de 1920x1080). Para los vídeos en orientación vertical (480x640, 720x1280 y 1080x1920), este diseño admite 1 flujo principal y hasta 3 flujos adicionales.

Para seleccionar este diseño, configura el type propiedad a "horizontalPresentation":

Asignación de clases de diseño a las transmisiones de OpenTok

Si utilizas un tipo de diseño distinto del predeterminado «Best Fit», debes configurar la clase de diseño que deben utilizar las transmisiones de OpenTok, en función del tipo de diseño:

  • Si utilizas la disposición «Imagen en imagen», configura una transmisión para que utilice el full clase de diseño.
  • Si utiliza el diseño de presentación horizontal, configure un flujo para que utilice la función focus clase de diseño.
  • Si utiliza el diseño de presentación vertical, configure un flujo para que utilice la función focus clase de diseño.

Configuración de la lista inicial de clases de diseño para las transmisiones de un cliente

Al crear un token para que un cliente se conecte a la sesión de OpenTok, puedes (opcionalmente) especificar la lista inicial de clases de diseño para las transmisiones publicadas por el cliente. Para ello, genera un token que incluya la configuración de la lista inicial de clases de diseño. Los siguientes ejemplos utilizan los SDK de OpenTok para Java, Node, PHP, Python, Ruby y .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());

Nodo:

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);

Modificación de la lista de clases de diseño de un flujo

Puedes modificar dinámicamente la lista de clases de diseño de un flujo llamando a la función OpenTok API REST /session/{sessionId}/stream. Realiza una solicitud PUT a la siguiente URL:

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

Establezca Content-Type como "application/json" e incluye la lista de clases de diseño como una propiedad de los datos JSON en la solicitud PUT:

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

El id La propiedad es el ID de la transmisión. Ten en cuenta que puedes actualizar la lista de clases de diseño para varias transmisiones pasando varios objetos JSON en la matriz «items».

La solicitud devuelve un código de respuesta 400 si se especifica un valor «layoutClassList» no válido. El valor debe ser una matriz de cadenas.

También puedes modificar la lista de clases de diseño de una transmisión utilizando los SDK de servidor de OpenTok:

Obtener la lista de clases de diseño de un flujo

Puedes obtener la lista de clases de diseño de un flujo llamando a OpenTok API REST /session/{sessionId}/stream/{streamId}. Realiza una solicitud GET a la siguiente URL:

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

La respuesta incluye datos JSON, entre los que se encuentra un layoutClassList matriz:

{
  "id": "8b732909-0a06-46a2-8ea8-074e64d43422",
  "videoType": "camera",
  "name": "",
  "layoutClassList": ["full"]
}
  • El layoutClassList es una matriz de las clases de diseño para el flujo.
  • El id es el ID del flujo.
  • El videoType La propiedad está configurada como «camera», «screen» o «custom». Un vídeo «screen» utiliza la función de compartir pantalla del editor como fuente de vídeo; un vídeo «custom» lo publica un cliente web utilizando un elemento VideoTrack de HTML como fuente de vídeo.
  • El name es el nombre del flujo (si se estableció uno cuando el cliente publicó el flujo).

La solicitud devuelve un código de respuesta de error 408 si se especifica un ID de flujo no válido.

También puedes obtener la lista de clases de diseño de un flujo utilizando los SDK del servidor de OpenTok:

Obtener la lista de clases de diseño para varias secuencias

Puedes obtener la lista de clases de diseño de todas las secuencias de una sesión llamando a la función API REST /session/{sessionId}/stream. Realiza una solicitud GET a la siguiente URL:

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

La respuesta incluye datos JSON, entre los que se encuentra un items propiedad, que es un array que contiene información sobre la disposición de los flujos en la sesión:

{
  "count": 2
  "items": [
    {
      "id": "8b732909-0a06-46a2-8ea8-074e64d43422",
      "videoType": "camera",
      "name": "",
      "layoutClassList": ["full"]
    },
    ...
  ]
}
  • El layoutClassList es una matriz de las clases de diseño para el flujo.
  • El id es el ID del flujo.
  • El videoType La propiedad está configurada como «camera», «screen» o «custom». Un vídeo «screen» utiliza la función de compartir pantalla del editor como fuente de vídeo; un vídeo «camera» lo publica un cliente web utilizando un elemento VideoTrack de HTML como fuente de vídeo.
  • El name es el nombre del flujo (si se estableció uno cuando el cliente publicó el flujo).

Tipos de diseño para pantalla compartida

Puedes especificar un tipo de diseño que se utilice cuando haya una transmisión de pantalla compartida en directo en la sesión.

Puedes configurar este tipo de disposición para compartir pantalla (screenshareType) a uno de los siguientes tipos de diseño:

  • bestFit - Para ello se utiliza el la mejor opción diseño. Sin embargo, en el diseño solo se incluyen las transmisiones en las que se comparte pantalla.

  • horizontalPresentation - Para ello se utiliza el presentación horizontal diseño. Sin embargo, la transmisión compartida de pantalla (no una transmisión con un focus (clase aplicada) ocupará la posición de foco en el diseño.

  • verticalPresentation - Para ello se utiliza el presentación vertical diseño. Sin embargo, la transmisión compartida de pantalla (no una transmisión con un focus (clase aplicada) ocupará la posición de foco en el diseño.

  • pip - Para ello se utiliza el Imagen en imagen diseño. Sin embargo, la transmisión compartida de pantalla (no una transmisión con un full (clase aplicada) ocupará todo el espacio disponible en el diseño. El vídeo más pequeño del diseño se determinará en función de normas de priorización de flujos. Por ejemplo, si el cliente que publica la transmisión compartida de pantalla también está publicando una transmisión con una fuente de vídeo de cámara, ese vídeo ocupará la posición de vídeo más pequeña (a menos que otra transmisión tenga mayor prioridad, por ejemplo, porque se le haya asignado una clase de diseño).

Cuando hay una transmisión en directo de pantalla compartida en la sesión, el archivo o la retransmisión utiliza el tipo de disposición de pantalla compartida que especifiques. Cuando no hay vídeo de pantalla compartida en la sesión, el archivo o la retransmisión utiliza la disposición que mejor se adapte. (Cuando especifiques un screenshareType, debes configurar el principal layout type a bestFit.

Reglas de priorización de flujos

Los archivos pregrabados y las retransmisiones en directo pueden incluir hasta 16 flujos de vídeo a la vez. El compositor de maquetación utiliza las siguientes reglas para determinar la prioridad de los flujos de vídeo que se incluyen en el archivo o en la retransmisión, así como para determinar el orden en que se organizarán y se añadirán al DOM virtual.

Las transmisiones se clasifican en dos niveles:

  • Arroyos de nivel superior - Arroyos que han sido se ha asignado un diseño clase

  • Flujos de nivel inferior - Flujos que no tienen clases de diseño asociadas

Se determina la priorización de los arroyos:

  • Los flujos de nivel superior (aquellos a los que se les han asignado clases de diseño) tienen prioridad en este orden:

    1. Secuencias de pantalla compartida
    2. Transmisiones sin compartir pantalla publicadas por clientes que también publican transmisiones con pantalla compartida
    3. El resto de flujos (ordenados por la fecha en que se añaden a la lista de flujos que se incluirán en el archivo o en la emisión)

  • Los flujos de nivel inferior (flujos que tienen no a las que se les han asignado clases de diseño) se priorizan a continuación en este orden:

    1. Secuencias de pantalla compartida
    2. Transmisiones sin compartir pantalla publicadas por clientes que también publican transmisiones con pantalla compartida
    3. Flujos publicados por clientes que también publican flujos de nivel superior (flujos a los que se les han asignado clases de diseño)
    4. El resto de flujos (ordenados por la fecha en que se añaden a la lista de flujos que se incluirán en el archivo o en la emisión)

Las secuencias de vídeo incluidas en el archivo compuesto o en la emisión se seleccionan en función de su orden de prioridad. Las secuencias siempre se ordenarán según estas reglas. Siempre que haya dos o más secuencias, se añadirán al DOM virtual siguiendo este orden.

Cuando un cliente deja de transmitir vídeo, se elimina del vídeo compuesto. Cuando reanuda la transmisión de vídeo, se vuelve a añadir al vídeo compuesto si tiene mayor prioridad que otros clientes (según estas reglas de priorización). Los vídeos compuestos pueden incluir hasta 16 transmisiones de vídeo de clientes.

Si un archivo compuesto o una emisión alcanza la capacidad máxima de flujos incluidos y un cliente que publica un flujo incluido se desconecta, se libera espacio para un nuevo flujo. Se incluirá y reproducirá el siguiente flujo de vídeo con mayor prioridad.

Notas:

Definición de diseños personalizados

Además de la diseños predefinidos, puedes utilizar CSS para definir tu propio diseño personalizado para los archivos compuestos y las retransmisiones en directo.

Para utilizar un diseño personalizado, establece la propiedad «type» del diseño en «custom» y configura una propiedad adicional, stylesheetque se establece en el CSS:

CSS utilizado en el stylesheet La propiedad del recurso de diseño se aplicará a un DOM virtual, que puede describirse con el siguiente formato:

  • Para una emisión:

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

  • Para un archivo:

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

Nota: Por defecto, la resolución del archivo compuesto o de la emisión es de 640 x 480 píxeles (SD horizontal). También puedes configurar un archivo compuesto o una emisión para que utilice una resolución de 480 x 640 (SD vertical), 1280 x 720 (HD horizontal), 720 x 1280 (HD vertical), 1920 x 1080 (FHD horizontal) o 1080 x 1920 (FHD vertical) al llamar a la función iniciar archivo o el iniciar emisión método de la API REST de OpenTok. Los archivos de 640 x 480 píxeles y 480 x 640 píxeles (SD) tienen relaciones de aspecto de 4:3 y 3:4. Los archivos de 1280 x 720 píxeles, 720 x 1280 píxeles, 1920 x 1080 píxeles y 1080 x 1920 píxeles (HD y FHD) tienen relaciones de aspecto de 16:9 y 9:16. Ten en cuenta estas relaciones de aspecto a la hora de definir el CSS para un diseño personalizado.

Reglas

Se aplican las siguientes reglas por defecto a los <archive> elemento:

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

Del mismo modo, se aplican las siguientes reglas por defecto a los ficheros <broadcast> elemento:

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

Las dimensiones predeterminadas son 640 x 480 píxeles (SD horizontal). También puedes configurar un archivo compuesto o una emisión para que utilice una resolución de 480 x 640 (SD vertical), 1280 x 720 (HD horizontal), 720 x 1280 (HD vertical), 1920 x 1080 (FHD horizontal), o 1080 x 1920 (FHD vertical) al llamar a la iniciar archivo o iniciar emisión método de la API REST de OpenTok.

Se aplican las siguientes reglas predeterminadas a <stream> elementos:

stream {
  display: block;
  margin: 0;
}

Nota: La resolución del contenedor es fija y no se puede anular mediante CSS.

Selectores

Se admiten los siguientes selectores CSS:

  • Los selectores de tipo sólo son compatibles con los elementos de flujo (stream).
  • Los selectores de clase (como .instructor) son compatibles (y se recomiendan), y pueden utilizarse para seleccionar cualquier grupo de flujos o un flujo concreto.
  • Se admiten los combinadores de hermanos adyacentes y generales (sibling-one + sibling-two, sibling-one ~ sibling-two).

Se admiten los siguientes selectores de pseudoclase:

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

Los siguientes selectores CSS no son compatibles:

  • El selector universal no es compatible (*).
  • No se admiten selectores descendentes (parent ancestor, parent * ancestor).
  • No se admiten selectores hijos (parent > child).
  • Los selectores ID no son compatibles (por ejemplo, #myidentifier).
  • No se admiten selectores de atributos (por ejemplo, [data-title*="my-title"]).
  • No se admiten los selectores de pseudoelementos.

Propiedades

La siguiente tabla describe las propiedades CSS admitidas y sus posibles valores:

Nombre 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' (por defecto), 'cover'
overflow 'hidden'
clear 'none', 'left', 'right', 'both', 'initial', 'inherit'

Ejemplo de CSS

El siguiente código CSS organiza dos flujos con nombres de clase main y 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;
}

El siguiente CSS se basa en el mejor ajuste diseño 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%;
}

El siguiente código CSS se basa en la presentación horizontal diseño 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%;
}

El siguiente código CSS se basa en la presentación vertical diseño 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%;
}

El siguiente CSS se basa en la imagen en imagen diseño 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;
}

Nota: El CSS utilizado por los diseños predefinidos está sujeto a cambios.

s