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 presentación se aplican a los archivos compuestos (no a los archivos individuales) y a las emisiones de flujo continuo en directo (no a las emisiones interactivas).

Véase Personalización del diseño de vídeo para archivos compuestos

Véase Configuración del diseño de vídeo para retransmisiones en directo

Puede asignar clases de diseño a los flujos para afectar a la forma en que se muestran en el diseño de un archivo o emisión.

Tipos de diseño predefinidos

Hay cuatro tipos de presentación predefinidos: mejor ajuste, imagen en imagen, presentación vertical y presentación horizontal.

Mejor ajuste

Este es el tipo de presentación inicial por defecto. Se trata de una presentación en mosaico, que se escala en función del número de vídeos.

El número de columnas y filas varía en función del número de flujos de la emisión.

Por ejemplo, a continuación se ilustra la disposición cuando hay 1, 2, 4 ó 5 flujos en una sesión:

Vonage video API default layout 1 Vonage video API default layout 2 Vonage video API default layout 4 Vonage video API default layout 5

Las clases de diseño en estas secuencias no afectarán al diseño. Cada posición en la lista se traducirá a una posición en la cuadrícula.

Esta disposición admite hasta 16 flujos (en una cuadrícula).

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

Para elegir esta disposición, configure la opción type propiedad a "bestFit".

Para consultar los archivos, véase Especificar el tipo de diseño inicial y Cambio dinámico del tipo de presentación durante una grabación de archivo.

Imagen en imagen

Se trata de un diseño imagen sobre imagen, en el que un pequeño arroyo es visible sobre un arroyo a tamaño completo.

Vonage video API pip layout

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 flujos.)

La primera corriente sin esta clase ocupa la posición de la esquina.

Si hay más de dos flujos presentes en el archivo o emisión, sólo los dos primeros serán visibles en la salida.

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

Para consultar los archivos, véase Especificar el tipo de diseño inicial y Cambio dinámico del tipo de presentación durante una grabación de archivo.

Presentación vertical

Se trata de un diseño 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.

Vonage video API vertical layout

Establece la clase de diseño del flujo de enfoque en "focus". (Véase Asignación de clases de diseño a flujos.) Los flujos sin la clase de enfoque ocuparán el borde izquierdo y dividirán el espacio uniformemente.

Para vídeos con orientación horizontal (640x480, 1280x720, 1920x1080), esta disposición admite 1 flujo de enfoque y hasta 5 flujos más (o hasta 7 para vídeos de 1920x1080).

Para vídeos con orientación vertical (480x640, 720x1280 y 1080x1920), esta disposición admite 1 secuencia de enfoque y hasta 8 secuencias más (o 10 secuencias más para 1080x1920).

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

Presentación horizontal

Se trata de un diseño 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.

Vonage video API vertical layout

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 flujos).

Las corrientes sin esta clase ocuparán el borde inferior y dividirán el espacio uniformemente.

Las posiciones pueden visualizarse del siguiente modo:

Para vídeos con orientación horizontal (640x480, 1280x720 y 1920x1080), esta disposición admite 1 flujo de enfoque y hasta 5 flujos más (o hasta 7 para vídeos de 1920x1080).

Para vídeos con orientación vertical (480x640, 720x1280 y 1080x1920), esta disposición admite 1 flujo de enfoque y hasta otros 3 flujos.

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

Para consultar los archivos, véase Especificar el tipo de diseño inicial y Cambio dinámico del tipo de presentación durante una grabación de archivo.

Asignación de clases de diseño a transmisiones de Vonage Video

Cuando utilices un tipo de diseño que no sea el predeterminado Mejor ajuste, debes establecer la clase de diseño para los flujos de Vonage Video que se utilizarán, según el tipo de diseño:

  • Si utiliza el diseño Picture-in-Picture, configure un flujo para que utilice la función 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.

Establecer la lista inicial de clases de diseño para los flujos de un cliente

Cuando se crea un token para que un cliente se conecte a la sesión, se puede (opcionalmente) especificar la lista inicial de clases de diseño para los flujos publicados por el cliente.

Para ello, genere un token que incluya la configuración inicial de la lista de clases de diseño.

Los siguientes ejemplos utilizan el SDK de Node.

Nodo:

// Generate a Token from just a sessionId (fetched from a database)
const options = {
    role: "moderator",
    expireTime: new Date().getTime() / 1000 + 7 * 24 * 60 * 60, // in one week
    data: "name=Johnny",
    initialLayoutClassList: ["focus"]
}
const token = vonage.video.generateClientToken(sessionId, options);

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

Puede cambiar dinámicamente la lista de clases de diseño de un flujo llamando a la función /session/{sessionId}/stream API REST.

Haga una petición PUT a la siguiente URL:

/v2/project/{appId}/session/{sessionId}/stream

Establezca Content-Type como "application/json" e incluir 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"]
    }
  ]
}

En id es el ID del flujo. Tenga en cuenta que puede actualizar la lista de clases de diseño para múltiples flujos pasando múltiples objetos JSON en el array items.

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

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

/v2/project/:application_id/session/:session_id/stream/:stream_id API REST

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

/v2/project/{appId}/session/{sessionId}/stream/{streamId}

La respuesta incluye datos JSON, que incluyen un layoutClassList matriz:

{
  "id": "8b732909-0a06-46a2-8ea8-074e64d43422",
  "videoType": "camera",
  "name": "",
  "layoutClassList": ["full"]
}
  • En layoutClassList es una matriz de las clases de diseño para el flujo.
  • En id es el ID del flujo.
  • En videoType se establece en "cámara", "pantalla" o "personalizado". Un vídeo "de pantalla" utiliza la pantalla compartida en el editor como fuente de vídeo; un vídeo "personalizado" es publicado por un cliente web utilizando un elemento HTML VideoTrack como fuente de vídeo.
  • En 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 puede obtener la lista de clases de diseño de un flujo mediante la función SDK para servidores:

  • Nodo - getStreamInfo() (llame al getLayoutClassList() del objeto Stream)
  • PHP - getStream() (compruebe el layoutClassList del objeto Stream)

Obtención de la lista de clases de diseño para varios flujos

/v2/project/:application_id/session/:session_id/stream REST API

Puede obtener la lista de clases de diseño de todos los flujos de una sesión llamando a la API REST /session/{sessionId}/stream. Realice una solicitud GET a la siguiente URL:

/v2/project/:application_id/session/:session_id/stream

La respuesta incluye datos JSON, que incluyen un items que es una matriz que contiene información sobre el diseño de los flujos de la sesión:

{
  "count": 2
  "items": [
    {
      "id": "8b732909-0a06-46a2-8ea8-074e64d43422",
      "videoType": "camera",
      "name": "",
      "layoutClassList": ["full"]
    },
    ...
  ]
}
  • En layoutClassList es una matriz de las clases de diseño para el flujo.
  • En id es el ID del flujo.
  • En videoType se establece en "cámara", "pantalla" o "personalizado". Un vídeo "pantalla" utiliza la pantalla compartida en el editor como fuente de vídeo; un vídeo "cámara" es publicado por un cliente web utilizando un elemento HTML VideoTrack como fuente de vídeo.
  • En name es el nombre del flujo (si se estableció uno cuando el cliente publicó el flujo).

Tipos de diseño para pantalla compartida

Puede especificar un tipo de presentación para utilizar cuando haya un flujo de pantalla compartida en directo en la sesión.

Para un archivo compuesto, establezca el parámetro screenshareType opción cuando especificar el tipo de diseño inicial y cuando cambiar dinámicamente el tipo de presentación durante una grabación de archivo.

Puede configurar este tipo de presentación de pantalla compartida (screenshareType) a uno de los siguientes tipos de diseño:

  • bestFit - Para ello se utiliza el mejor ajuste disposición. Sin embargo, sólo se incluyen en la presentación los flujos de pantalla compartida.
  • horizontalPresentation - Para ello se utiliza el presentación horizontal diseño. Sin embargo, el flujo de pantalla compartida (no un flujo con un focus aplicada) ocupará la posición de foco en el diseño.
  • verticalPresentation - Para ello se utiliza el presentación vertical diseño. Sin embargo, el flujo de pantalla compartida (no un flujo con un focus aplicada) ocupará la posición de foco en el diseño.
  • pip - Para ello se utiliza el Imagen en imagen diseño. Sin embargo, el flujo de pantalla compartida (no un flujo con un full aplicada) ocupará toda la posición en la presentación. El vídeo más pequeño de la presentación se determinará en función de normas de priorización de flujos. Por ejemplo, si el cliente que publica el flujo de pantalla compartida también está publicando un flujo 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 otro flujo tenga una mayor prioridad, por ejemplo, porque se le haya asignado una clase de diseño).

Cuando hay un flujo de pantalla compartida en directo en la sesión, el archivo o la emisión utiliza el tipo de diseño de pantalla compartida que especifique. Cuando no hay ningún vídeo de pantalla compartida en la sesión, el archivo o la emisión utiliza el diseño más adecuado. (Si especifica un screenshareTypedebe establecer el layout type a bestFit.

Reglas de priorización de flujos

Los archivos compuestos y las emisiones en directo pueden incluir hasta 16 secuencias 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 la emisión y para determinar cómo se ordenarán y añadirán los flujos al DOM virtual.

Los flujos se clasifican en dos niveles:

  • Arroyos de nivel superior - Arroyos que han sido asignar una clase de diseño
  • 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 (flujos a los que se han asignado clases de diseño) se priorizan en este orden:
    • Secuencias de pantalla compartida
    • Secuencias no compartidas publicadas por clientes que también publican secuencias compartidas.
    • Todos los demás flujos (ordenados por el momento en que se añaden a la lista de flujos que se incluirán en el archivo o la emisión)
  • Los flujos de nivel inferior (flujos que tienen no a las que se han asignado clases de diseño) se priorizan a continuación en este orden:
    • Secuencias de pantalla compartida
    • Secuencias no compartidas publicadas por clientes que también publican secuencias compartidas.
    • flujos publicados por clientes que también publican flujos de nivel superior (flujos asignados, clases de diseño)
    • Todos los demás flujos (ordenados por el momento en que se añaden a la lista de flujos que se incluirán en el archivo o la emisión)

Los flujos de vídeo incluidos en el archivo compuesto o la emisión se eligen en función de su priorización.

Los flujos se ordenarán siempre según estas reglas. Siempre que haya dos o más flujos, se añadirán al DOM virtual en función de 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 añade de nuevo al vídeo compuesto si tiene una prioridad superior a la de otros clientes (en función de estas reglas de priorización).

Los vídeos compuestos pueden incluir hasta 16 secuencias de vídeo cliente.

Si un archivo compuesto o una emisión alcanzan 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 renderizará el siguiente flujo de vídeo de mayor prioridad.

Notas:

  • Estas reglas de priorización de flujos se aplican independientemente de si el streamMode del archivo o emisión se establece en "auto" o "manual".

Véase Selección de los flujos que se incluirán en los archivos compuestos y Selección de los flujos que se incluirán en las retransmisiones en directo

  • Los archivos compuestos y las retransmisiones en directo pueden incluir hasta 50 audio flujos. Los primeros 50 flujos publicados que incluyen audio se mezclan en el audio de salida para el archivo o la emisión.

Definición de diseños personalizados

Además del diseños predefinidospuede utilizar CSS para definir su propio diseño personalizado para los archivos compuestos y las retransmisiones en directo. Para utilizar un diseño personalizado, establezca la propiedad de tipo del diseño en "personalizado" y establezca una propiedad adicional, stylesheetque se establece en el CSS:

CSS utilizado en el stylesheet 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 640x480 píxeles (SD horizontal). También puedes configurar un archivo compuesto o una emisión para que utilice una resolución de 480x640 (SD vertical), 1280x720 (HD horizontal), 720x1280 (HD vertical), 1920x1080 (FHD horizontal) o 1080x1920 (FHD vertical).

cuando llame al iniciar archivo o el iniciar emisión de la API REST. Los archivos de 640x480 píxeles y 480x640 píxeles (SD) tienen relaciones de aspecto 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 16:9 y 9:16.

Tenga en cuenta estas relaciones de aspecto cuando defina 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 por defecto son 640x480 píxeles (SD horizontal). También puede configurar un archivo compuesto o emisión para utilizar un 480x640 (SD vertical), 1280x720 (HD horizontal), 720x1280 (HD vertical), 1920x1080 (FHD horizontal), o 1080x1920 (FHD vertical) cuando llame al iniciar archivo o iniciar emisión de la API REST.

Se aplican las siguientes reglas por defecto a los elementos:

stream {
  display: block;
  margin: 0;
}

Nota: La resolución del contenedor es fija y no puede ser modificada por 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 preferibles), y pueden utilizarse para seleccionar cualquier grupo de flujos o flujo individual.
  • 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 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 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 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 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.