Mises en page vidéo pour les archives composées et les diffusions en direct

Il existe un certain nombre de types de mise en page prédéfinis que vous pouvez utiliser avec des archives composées et des diffusions en direct. Vous pouvez également utiliser le CSS pour définir des mises en page personnalisées.

Ces options de mise en page s'appliquent aux archives composées (pas aux archives individuelles) et aux diffusions en direct (pas aux diffusions interactives).

Voir Personnalisation de la présentation vidéo pour les archives composées

Voir Configuration de la mise en page vidéo pour les diffusions en direct

Vous pouvez attribuer des classes de mise en page aux flux afin d'affecter leur affichage dans la mise en page d'une archive ou d'une diffusion.

Types de mise en page prédéfinis

Quatre types de mise en page prédéfinis sont disponibles : meilleur ajustement, image dans l'image, présentation verticale et présentation horizontale.

Meilleur ajustement

Il s'agit du type de mise en page initiale par défaut. Il s'agit d'une mise en page en mosaïque, qui évolue en fonction du nombre de vidéos.

Le nombre de colonnes et de lignes varie en fonction du nombre de flux dans la diffusion.

Par exemple, le schéma suivant illustre la présentation lorsqu'il y a 1, 2, 4 ou 5 flux dans une session :

Les classes de mise en page sur ces flux n'affecteront pas la mise en page. Chaque position dans la liste sera traduite en une position dans la grille.

Cette disposition prend en charge jusqu'à 16 flux (dans une grille).

Les cours d'eau sont inclus dans la mise en page en fonction de règles de hiérarchisation des cours d'eau.

Pour choisir cette mise en page, définissez l'option type à la propriété "bestFit".

Pour les archives, voir Spécification du type de mise en page initiale et Changement dynamique du type de mise en page pendant l'enregistrement d'une archive.

Pour les émissions, voir Spécification du type de mise en page initiale et Changement dynamique du type de mise en page lors d'une diffusion en direct.

Image dans l'image

Il s'agit d'une mise en page "image dans l'image", où un petit cours d'eau est visible au-dessus d'un cours d'eau de taille normale.

C = coin

Définir la classe de mise en page du flux en taille réelle à "full". (Voir Affectation de classes de présentation aux flux.)

Le premier flux sans cette classe occupe la position d'angle.

Si plus de deux flux sont présents dans l'archive ou la diffusion, seuls les deux premiers flux seront visibles dans la sortie.

Pour choisir cette mise en page, définissez l'option type à la propriété "pip".

Pour les archives, voir Spécification du type de mise en page initiale et Changement dynamique du type de mise en page pendant l'enregistrement d'une archive.

Pour les émissions, voir Spécification du type de mise en page initiale et Changement dynamique du type de mise en page lors d'une diffusion en direct.

Présentation verticale

Il s'agit d'un schéma avec un grand flux sur le bord droit de la sortie, et plusieurs flux plus petits sur le bord gauche de la sortie.

Définir la classe de mise en page du flux de focalisation à "focus". (Voir Affectation de classes de présentation aux flux.) Les flux sans la classe de focalisation occuperont le bord gauche et diviseront l'espace de manière égale.

Pour les vidéos en orientation paysage (640x480, 1280x720, 1920x1080), cette disposition prend en charge 1 flux de mise au point et jusqu'à 5 autres flux (ou jusqu'à 7 pour les vidéos en 1920x1080).

Pour les vidéos en orientation portrait (480x640, 720x1280 et 1080x1920), cette disposition prend en charge 1 flux de mise au point et jusqu'à 8 autres flux (ou 10 autres flux pour 1080x1920).

Pour choisir cette mise en page, définissez l'option type à la propriété "verticalPresentation":

Pour les archives, voir Spécification du type de mise en page initiale et Changement dynamique du type de mise en page pendant l'enregistrement d'une archive.
Pour les émissions, voir Spécification du type de mise en page initiale et Changement dynamique du type de mise en page lors d'une diffusion en direct.

Présentation horizontale

Il s'agit d'une mise en page avec un grand flux sur le bord supérieur de la sortie et plusieurs flux plus petits sur le bord inférieur de la sortie.

Il existe une classe de mise en page utilisée pour spécifier la position des flux dans cette mise en page : focus. (Voir Affectation de classes de présentation aux flux).

Les flux sans cette classe occuperont le bord inférieur et diviseront l'espace de manière égale.

Les positions peuvent être visualisées comme suit :

Pour les vidéos en orientation paysage (640x480, 1280x720 et 1920x1080), cette disposition prend en charge 1 flux de mise au point et jusqu'à 5 autres flux (ou jusqu'à 7 pour les vidéos en 1920x1080).

Pour les vidéos en orientation portrait (480x640, 720x1280 et 1080x1920), cette disposition prend en charge 1 flux de mise au point et jusqu'à 3 autres flux.

Pour choisir cette mise en page, définissez l'option type à la propriété "horizontalPresentation":

Pour les archives, voir Spécification du type de mise en page initiale et Changement dynamique du type de mise en page pendant l'enregistrement d'une archive.

Pour les émissions, voir Spécification du type de mise en page initiale et Changement dynamique du type de mise en page lors d'une diffusion en direct.

Attribution de classes de mise en page aux flux vidéo de Vonage

Lorsque vous utilisez un type de mise en page autre que le Best Fit par défaut, vous devez définir la classe de mise en page pour les flux vidéo Vonage à utiliser, en fonction du type de mise en page :

Si vous utilisez la mise en page Image dans l'image, définissez un flux pour utiliser l'image dans l'image. full classe de présentation.
Si vous utilisez la présentation horizontale, définissez un flux pour utiliser le format focus classe de présentation.
Si vous utilisez la présentation verticale, définissez un flux de manière à ce qu'il utilise le format focus classe de présentation.

Définition de la liste initiale des classes de mise en page pour les flux d'un client

Lorsque vous créez un jeton pour qu'un client se connecte à la session, vous pouvez (facultativement) spécifier la liste initiale des classes de présentation pour les flux publiés par le client.

Pour ce faire, générez un jeton qui inclut le paramètre initial de la liste de classes de mise en page.

Les exemples suivants utilisent le SDK Node.

Node :

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

Modification de la liste des classes de mise en page pour un flux

Vous pouvez modifier dynamiquement la liste des classes de présentation d'un flux en appelant la fonction /session/{sessionId}/stream API REST.

Envoyez une requête PUT à l'URL suivante :

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

Définir le type de contenu (Content-Type) à "application/json" et inclure la liste des classes de présentation en tant que propriété des données JSON dans la requête PUT :

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

Les id est l'identifiant du flux. Notez que vous pouvez mettre à jour la liste des classes de mise en page pour plusieurs flux en transmettant plusieurs objets JSON dans le tableau des éléments.

La demande renvoie un code de réponse 400 si vous spécifiez une valeur layoutClassList non valide. La valeur doit être un tableau de chaînes.

Obtenir la liste des classes de présentation d'un flux

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

Vous pouvez obtenir la liste des classes de mise en page pour un flux en appelant l'API REST /session/{sessionId}/stream/{streamId}. Effectuez une requête GET à l'URL suivante :

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

La réponse comprend des données JSON, dont un élément layoutClassList de la gamme :

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

Les layoutClassList est un tableau de classes de mise en page pour le flux.
Les id est l'identifiant du flux.
Les videoType est définie sur "camera", "screen" ou "custom". Une vidéo "screen" utilise le partage d'écran sur l'éditeur comme source vidéo ; une vidéo "custom" est publiée par un client web qui utilise un élément HTML VideoTrack comme source vidéo.
Les name est le nom du flux (s'il a été défini lors de la publication du flux par le client).

La demande renvoie un code de réponse d'erreur 408 si vous spécifiez un identifiant de flux non valide.

Vous pouvez également obtenir la liste des classes de présentation d'un flux à l'aide de la fonction SDK serveur:

Noeud - getStreamInfo() (appeler le getLayoutClassList() de l'objet Stream)
PHP - getStream() (vérifier le layoutClassList de l'objet Stream)

Obtenir la liste des classes de mise en page pour plusieurs flux

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

Vous pouvez obtenir la liste des classes de mise en page pour tous les flux d'une session en appelant l'API REST /session/{sessionId}/stream. Effectuez une requête GET à l'URL suivante :

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

La réponse comprend des données JSON, dont un élément items qui est un tableau contenant des informations sur la disposition des flux dans la session :

{
  "count": 2
  "items": [
    {
      "id": "8b732909-0a06-46a2-8ea8-074e64d43422",
      "videoType": "camera",
      "name": "",
      "layoutClassList": ["full"]
    },
    ...
  ]
}

Les layoutClassList est un tableau de classes de mise en page pour le flux.
Les id est l'identifiant du flux.
Les videoType est définie sur "camera", "screen" ou "custom". Une vidéo "screen" utilise le partage d'écran sur l'éditeur comme source vidéo ; une vidéo "camera" est publiée par un client web qui utilise un élément HTML VideoTrack comme source vidéo.
Les name est le nom du flux (s'il a été défini lors de la publication du flux par le client).

Types de mise en page pour le partage d'écran

Vous pouvez spécifier un type de mise en page à utiliser lorsqu'il y a un flux de partage d'écran en direct dans la session.

Pour une archive composée, définissez l'option screenshareType lorsque l'option spécifier le type de mise en page initiale et quand changement dynamique du type de mise en page pendant l'enregistrement d'une archive.

Pour les émissions, voir Spécification du type de mise en page initiale et Changement dynamique du type de mise en page lors d'une diffusion en direct.

Vous pouvez définir ce type de mise en page de partage d'écran (screenshareType) à l'un des types de mise en page suivants :

bestFit - Il s'agit de l'utilisation de l'outil meilleure adéquation de la mise en page. Cependant, seuls les flux de partage d'écran sont inclus dans la mise en page.
horizontalPresentation - Il s'agit de l'utilisation de l'outil présentation horizontale la mise en page. Cependant, le flux de partage d'écran (pas un flux avec un focus appliquée) occupera la position centrale dans la mise en page.
verticalPresentation - Il s'agit de l'utilisation de l'outil présentation verticale la mise en page. Cependant, le flux de partage d'écran (pas un flux avec un focus appliquée) occupera la position centrale dans la mise en page.
pip - Il s'agit de l'utilisation de l'outil Image dans l'image la mise en page. Cependant, le flux de partage d'écran (pas un flux avec un full ) occupera toute la place dans la mise en page. La vidéo plus petite dans la mise en page sera déterminée sur la base des critères suivants règles de hiérarchisation des cours d'eau. Par exemple, si le client qui publie le flux de partage d'écran publie également un flux avec une source vidéo de type caméra, cette vidéo occupera la position vidéo la plus petite (à moins qu'un autre flux ait une priorité plus élevée, par exemple, parce qu'une classe de présentation lui a été attribuée).

Lorsqu'il y a un flux de partage d'écran en direct dans la session, l'archive ou la diffusion utilise le type de mise en page de partage d'écran que vous avez spécifié. Lorsqu'il n'y a pas de vidéo en partage d'écran dans la session, l'archive ou la diffusion utilise la disposition la mieux adaptée. (Lorsque vous spécifiez un screenshareType, vous devez définir le layout type à bestFit.

Règles de priorisation des flux

Les archives composées et les diffusions en direct peuvent comprendre jusqu'à 16 flux vidéo à la fois.

Le compositeur de mise en page utilise les règles suivantes pour déterminer la priorité des flux vidéo à inclure dans l'archive ou la diffusion et pour déterminer comment les flux seront ordonnés et ajoutés au DOM virtuel.

Les flux sont classés en deux catégories :

Cours d'eau de niveau supérieur - Cours d'eau qui ont été assigné à une classe de mise en page
Flux de niveau inférieur - Flux qui n'ont pas de classes de mise en page associées

L'ordre de priorité des cours d'eau est déterminé :

Les flux de niveau supérieur (flux auxquels ont été attribuées des classes de mise en page) sont prioritaires dans cet ordre :
- Flux de partage d'écran
- Flux sans partage d'écran publiés par des clients qui publient également des flux avec partage d'écran
- Tous les autres flux (classés par ordre d'ajout à la liste des flux à inclure dans l'archive ou la diffusion)
Les flux de niveau inférieur (les flux qui ont pas ont été assignées à des classes de mise en page) sont ensuite classées par ordre de priorité :
- Flux de partage d'écran
- Flux sans partage d'écran publiés par des clients qui publient également des flux avec partage d'écran
- Flux publiés par des clients qui publient également des flux de niveau supérieur (flux auxquels ont été attribuées des classes de présentation).
- Tous les autres flux (classés par ordre d'ajout à la liste des flux à inclure dans l'archive ou la diffusion)

Les flux vidéo inclus dans l'archive composée ou la diffusion sont choisis en fonction de leur priorité.

Les flux seront toujours ordonnés selon ces règles. Tant qu'il y a deux flux ou plus, ils seront ajoutés au DOM virtuel en fonction de cet ordre.

Lorsqu'un client cesse de diffuser de la vidéo, il est retiré de la vidéo composée. Lorsqu'il reprend la diffusion en continu, il est ajouté à nouveau à la vidéo composée si sa priorité est supérieure à celle des autres clients (sur la base de ces règles de priorité).

Les vidéos composées peuvent inclure jusqu'à 16 flux vidéo client.

Si une archive composée ou une diffusion atteint la capacité maximale des flux inclus et qu'un client publiant un flux inclus se déconnecte, de l'espace est libéré pour un nouveau flux.

Le flux vidéo suivant, le plus prioritaire, sera inclus et rendu.

Notes :

Ces règles de hiérarchisation des flux s'appliquent indépendamment du fait que le streamMode de l'archive ou de la diffusion est fixé à "auto" ou "manual".

Voir Sélection des flux à inclure dans les archives composées et Sélection des flux à inclure dans les diffusions en direct

Les archives composées et les diffusions en direct peuvent comprendre jusqu'à 50 audio flux. Les 50 premiers flux publiés qui contiennent de l'audio sont mélangés à l'audio de sortie pour l'archive ou la diffusion.

Définir des mises en page personnalisées

En plus de la les mises en page prédéfiniesSi vous souhaitez utiliser une mise en page personnalisée, vous pouvez utiliser CSS pour définir votre propre mise en page pour les archives composées et les diffusions en direct. Pour utiliser une mise en page personnalisée, définissez la propriété de type de la mise en page sur "custom" et définissez une propriété supplémentaire, stylesheetqui est fixé au CSS :

Pour les archives, voir Spécifier le type de mise en page initiale lors d'un enregistrement d'archives et Changement dynamique du type de mise en page pendant l'enregistrement d'une archive.)
Pour les émissions, voir Spécification du type de mise en page initiale et Changement dynamique du type de mise en page lors d'une diffusion en direct.

CSS utilisé dans le stylesheet de la ressource layout s'appliquera à un DOM virtuel, qui peut être décrit dans le format suivant :

Pour une diffusion :

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

Pour une archive :

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

Remarque : Par défaut, la résolution de l'archive composée ou de la diffusion est de 640x480 pixels (SD paysage). Vous pouvez également définir une archive composée ou une diffusion pour utiliser une résolution de 480x640 (SD portrait), 1280x720 (HD paysage), 720x1280 (HD portrait), 1920x1080 (FHD paysage) ou 1080x1920 (FHD portrait).

lorsque vous appelez le démarrer l'archive ou le commencer la diffusion de l'API REST. Les archives 640x480 pixels et 480x640 pixels (SD) ont des rapports d'aspect 4:3 et 3:4. Les archives 1280x720-pixel, 720x1280-pixel, 1920x1080-pixel et 1080x1920-pixel (HD et FHD) ont des rapports d'aspect 16:9 et 9:16.

Gardez ces proportions à l'esprit lorsque vous définissez la feuille de style CSS pour une mise en page personnalisée.

Règles

Les règles par défaut suivantes s'appliquent aux <archive> élément :

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

De même, les règles par défaut suivantes sont appliquées à l'élément <broadcast> élément :

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

Les dimensions par défaut sont les suivantes 640x480 pixels (SD paysage). Vous pouvez également faire en sorte qu'une archive composée ou une diffusion utilise un format 480x640 (SD portrait), 1280x720 (HD paysage), 720x1280 (HD portrait), 1920x1080 (FHD paysage), ou 1080x1920 (portrait FHD) lorsque vous appelez l'application démarrer l'archive ou commencer la diffusion de l'API REST.

Les règles par défaut suivantes sont appliquées aux éléments :

stream {
  display: block;
  margin: 0;
}

Remarque : la résolution du conteneur est fixe et ne peut pas être modifiée par des feuilles de style CSS.

Sélecteurs

Les sélecteurs CSS suivants sont pris en charge :

Les sélecteurs de type ne sont pris en charge que pour les éléments de flux (stream).
Les sélecteurs de classe (tels que .instructor) sont prises en charge (et préférées) et peuvent être utilisées pour sélectionner un groupe de flux ou un flux individuel.
Les combinateurs de fratrie adjacente et de fratrie générale sont pris en charge (sibling-one + sibling-two, sibling-one ~ sibling-two).

Les sélecteurs de pseudo-classe suivants sont pris en charge :

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

Les sélecteurs CSS suivants ne sont pas pris en charge :

Le sélecteur universel n'est pas pris en charge (*).
Les sélecteurs descendants ne sont pas pris en charge (parent ancestor, parent * ancestor).
Les sélecteurs enfants ne sont pas pris en charge (parent > child).
Les sélecteurs d'ID ne sont pas pris en charge (par exemple, #myidentifier).
Les sélecteurs d'attributs ne sont pas pris en charge (par exemple, [data-title*="my-title"]).
Les sélecteurs de pseudo-éléments ne sont pas pris en charge.

Propriétés

Le tableau suivant décrit les propriétés CSS prises en charge et leurs valeurs possibles :

Nom	Valeur
`width`, `height`	nombre positif ( `px`/ `%`)
`min-width`, `min-height`	nombre positif ( `px`/ `%`)
`max-width`, `max-height`]	nombre positif ( `px`/ `%`)
`left`, `right`, `top`, `bottom`	nombre ( `px`/ `%`)
`margin`, `margin-left`, `margin-right`, `margin-top`, `margin-bottom`	nombre ( `px`/ `%`)
`z-index`	nombre positif
`position`	`'relative'`, `'absolute'`
`display`	`'inline'`, `'block'`, `'inline-block'`
`float`	`'none'`, `'left'`, `'right'`
`object-fit`	`'contain'` (par défaut), `'cover'`
`overflow`	`'hidden'`
`clear`	`'none'`, `'left'`, `'right'`, `'both'`, `'initial'`, `'inherit'`

Exemple de CSS

Le fichier CSS suivant organise deux flux avec des noms de classe main et 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;
}

Le CSS suivant est basé sur le meilleur ajustement disposition prédéfinie:

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%;
}

La feuille de style CSS suivante est basée sur la présentation horizontale disposition prédéfinie:

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%;
}

La feuille de style CSS suivante est basée sur la présentation verticale disposition prédéfinie:

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%;
}

Le CSS suivant est basé sur l'image dans l'image disposition prédéfinie:

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

Remarque : Les feuilles de style CSS utilisées par les modèles prédéfinis sont susceptibles d'être modifiées.

Navigation

Mises en page vidéo pour les archives composées et les diffusions en direct

Types de mise en page prédéfinis

Meilleur ajustement

Image dans l'image

Présentation verticale

Présentation horizontale

Attribution de classes de mise en page aux flux vidéo de Vonage

Définition de la liste initiale des classes de mise en page pour les flux d'un client

Modification de la liste des classes de mise en page pour un flux

Obtenir la liste des classes de présentation d'un flux

Obtenir la liste des classes de mise en page pour plusieurs flux

Types de mise en page pour le partage d'écran

Règles de priorisation des flux

Définir des mises en page personnalisées

Règles

Sélecteurs

Propriétés

Exemple de CSS