Uso de diseños dinámicos en emisiones HLS/RMTP

La Video API le permite tener un control total sobre su interfaz de usuario cuando crea aplicaciones con sesiones de vídeo multipartitas, pero ¿qué opciones tiene cuando necesita difundir esas sesiones a través de flujos HLS y/o RTMP?

En esta publicación, hablaremos sobre los diseños incorporados que están disponibles listos para usar, cómo crear tus propios diseños personalizados y cómo cambiar los diseños y los estilos de transmisión sobre la marcha. Luego discutiremos cómo puedes capturar los diseños junto con la interfaz de usuario de tu aplicación usando Vonage Experience Composer.

¿Quiere probarlo? Puede ver un ejemplo de aplicación que utiliza la función de difusión en GitHub. También puedes desplegarla en Heroku para probarla.

Tipos de diseño incorporados

Hay que tener en cuenta varios factores a la hora de elegir el mejor diseño para su emisión. ¿Hay alguien hablando? ¿Hay alguien compartiendo pantalla? ¿Se trata de una mesa redonda?

Por suerte, la API de Video de Vonage ofrece varios diseños predefinidos para ayudarte a crear la mejor experiencia para tus espectadores.

Por defecto, las emisiones utilizan el bestFit (que se muestra a continuación). Este diseño cambia en función del número de participantes y proporciona a cada editor el mismo espacio en pantalla.

Otras opciones son Imagen en imagen (pip), Presentación vertical (verticalPresentation) y Presentación horizontal (horizontalPresentation).

Actualización de mayo de 2021: Se han añadido nuevos diseños verticales que permiten grabar o emitir en resoluciones SD y HD en vertical, ideales para dispositivos móviles:

Nuevos tipos de diseño de pantalla compartida

Nuevos tipos de trazado se introdujeron en mayo de 2021:

• bestFit

• presentaciónhorizontal

• verticalPresentation

• pip

Inicialización y cambio de diseños

Puede especificar un diseño inicial al iniciar una emisión. Para ello, añada una propiedad layout que contenga una propiedad type al cuerpo de la solicitud. Esta propiedad type propiedad debe corresponder al diseño predefinido que desea utilizar.

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

Para cambiar el diseño durante una retransmisión en directo, utilice uno de los SDK de servidor de OpenTok o llame al punto final de la API REST de OpenTok /broadcast/layout REST API endpoint.

Envíe un objeto JSON con una propiedad type que indica el diseño que necesita en el cuerpo de la solicitud.

{
  "type": "pip"
}

Pero el uso de diseños es sólo el primer paso para hacer que su flujo se vea bien. El siguiente paso es actualizar las listas de clases de tus flujos.

Utilicemos la presentación vertical verticalPresentation como ejemplo. En la imagen anterior, observará que el área grande contiene la palabra 'focus'. Focus es el nombre de una clase que debe aplicarse al flujo que desea que aparezca en esa área.

Tanto si se trata de una pantalla compartida, de un ponente activo o de un editor que hayas marcado como "presentador", el flujo que quieras destacar debe tener asignada la clase "focus" y no otras. Hablemos de los estilos y de cómo aplicarlos y modificarlos.

Estilos de emisión y streaming

El diseño de una emisión se crea en un DOM virtual con la siguiente estructura:

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

Deberás tener en cuenta esta estructura cuando utilices los diseños predefinidos o crees tus diseños personalizados. Por defecto, el vídeo emitido tiene 640x480 píxeles, pero puedes especificar el uso de 1280x720 al iniciar la emisión. En este caso, los diseños predefinidos se ajustan para utilizar una relación de aspecto 16:9.

Importante: En una emisión sólo se pueden mostrar 16 flujos a la vez.

Cambio de estilos

Los diseños predefinidos suministran CSS para controlar el aspecto de la emisión. Para utilizarlos, tendrás que especificar qué clases deben aplicarse a qué flujos. Puede cambiar la lista de clases para los flujos utilizando cualquiera de nuestros SDK de servidor o a través de la API REST de OpenTok /session/{sessionId}/stream endpoint. Las solicitudes al punto final contendrán un cuerpo JSON similar al siguiente objeto:

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

Es importante tener en cuenta que la propiedad items es una matriz que le permite proporcionar detalles sobre múltiples flujos en una sola solicitud. Así que en el ejemplo de usar la presentación vertical, deberías enviar el payload de arriba especificando el id del stream que deseas enfocar. Si otro flujo tenía previamente la clase de foco, deberías enviarlo con una lista de clases vacía para que la clase de foco sea eliminada de él.

Creación de diseños personalizados

Si uno de los diseños predefinidos no satisface sus necesidades, puede crear un diseño personalizado enviando custom como tipo y una propiedad stylesheet con CSS.

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

Al crear un diseño personalizado, debe tener en cuenta algunas cosas:

• Estilos por defecto aplicados a las etiquetas broadcast y stream elementos

• Selectores CSS permitidos

• Propiedades y valores CSS permitidos

Estilos predeterminados

En broadcast y stream tienen reglas por defecto aplicadas. Puede anular estos estilos en su CSS personalizado. Las reglas por defecto son:

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

Nota: La resolución del contenedor es fija y no puede ser modificada por CSS.

Selectores CSS permitidos

Los selectores de tipo sólo se admiten para los elementos de emisión. El elemento broadcast no puede ser seleccionado. Los selectores de clase (como .focus) son compatibles (y preferidos). Pueden utilizarse para seleccionar cualquier grupo de flujos o un flujo individual. Se admiten las combinaciones de hermano adyacente y hermano general (hermano-uno + hermano-dos, hermano-uno ~ hermano-dos).

En :first-child, :last-child, :nth-child(n)y :nth-last-child(n) también son compatibles.

Los siguientes selectores no son compatibles:

• El selector universal (*)

• Selectores descendientes (padre ancestro, padre * ancestro)

• Selectores hijo (padre > hijo)

• Selectores ID (#myidentifier)

• Selectores de atributos ([data-title*="mi-título"])

• No se admiten selectores de pseudoelementos

Propiedades CSS permitidas

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

Más allá

Con el Compositor de experienciasno sólo puedes capturar el diseño de tu videollamada, sino de toda tu aplicación web. Esto incluye cualquier banner, chat de texto, pizarra o cualquier otro elemento de interfaz de usuario que se muestre en su aplicación. Experience Composer se une a la videollamada y convierte todo lo visible en la pantalla en otro flujo. Este flujo puede emitirse y/o archivarse.

Seguir aprendiendo

¿Quieres saber más sobre cómo personalizar el aspecto de tus emisiones? Consulta los enlaces siguientes:

• Retransmisión OpenTok

• Configuración del diseño de vídeo para las retransmisiones en directo de OpenTok