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 (et non aux archives individuelles) et aux diffusions en direct (et non aux diffusions interactives) :

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

Cette page comprend les sections suivantes :

Types de mise en page prédéfinis

Quatre types de mise en page prédéfinis sont disponibles : « best fit », « 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 s'adapte en fonction du nombre de vidéos. Le nombre de colonnes et de lignes varie en fonction du nombre de flux OpenTok présents dans la diffusion. Par exemple, l' illustration suivante montre la mise en page lorsque la session comporte 1, 2, 4 ou 5 flux :

Les classes de mise en page appliquées à ces flux n'auront aucun effet sur la mise en page. Chaque position dans la liste sera convertie en une position dans la grille.

Cette disposition prend en charge jusqu'à 16 flux OpenTok (disposés en grille).

Les cours d'eau sont inclus dans la mise en page en fonction de priorisation des flux règles.

Pour choisir cette mise en page, définissez le type à la propriété "bestFit":

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 Attribution de classes de mise en page aux flux OpenTok.) Le premier flux ne comportant pas cette classe occupe la position d'angle. Si l' archive ou la diffusion contient plus de deux flux, seuls les deux premiers seront visibles dans le résultat.

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

Présentation verticale

Il s'agit d'une mise en page comportant un grand flux sur le bord droit de la sortie et plusieurs flux plus petits le long du bord gauche de la sortie.

Définissez la classe de mise en page du flux actif sur "focus". (Voir Attribution de classes de mise en page aux flux OpenTok.) Les flux ne comportant pas la classe « focus » occuperont le bord gauche et se répartiront de manière égale dans l'espace.

Pour les vidéos en mode paysage (640x480, 1280x720, 1920x1080), cette configuration prend en charge 1 flux principal et jusqu’à 5 autres flux (ou jusqu’à 7 pour les vidéos en 1920x1080). Pour les vidéos en mode portrait (480 × 640, 720 × 1 280 et 1 080 × 1 920), cette configuration prend en charge 1 flux principal et jusqu'à 8 autres flux (ou 10 autres flux pour les vidéos en 1 080 × 1 920).

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

Présentation horizontale

Il s'agit d'une mise en page comportant un grand flux sur le bord supérieur de la sortie et plusieurs flux plus petits le long du 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 Attribution de classes de mise en page aux flux OpenTok) Les flux qui n'appartiennent pas à cette classe occuperont le bord inférieur et se répartiront de manière égale dans l'espace. On peut se représenter ces positions comme suit :

Pour les vidéos en mode paysage (640x480, 1280x720 et 1920x1080), cette configuration prend en charge 1 flux principal et jusqu’à 5 autres flux (ou jusqu’à 7 pour les vidéos en 1920x1080). Pour les vidéos en mode portrait (480 x 640, 720 x 1280 et 1080 x 1920), cette configuration prend en charge 1 flux principal et jusqu'à 3 autres flux.

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

Attribution de classes de mise en page aux flux OpenTok

Lorsque vous utilisez un type de mise en page autre que « Best Fit » (Ajustement optimal), qui est le type par défaut, vous devez définir la classe de mise en page à utiliser pour les flux OpenTok, 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 permettant à un client de se connecter à une session OpenTok, vous pouvez (facultativement) spécifier la liste initiale des classes de mise en page pour les flux publiés par le client. Pour ce faire, générez un jeton qui inclut le paramètre de liste initiale des classes de mise en page. Les exemples suivants utilisent les SDK OpenTok pour Java, Node, PHP, Python, Ruby et .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());

Node :

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

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

Vous pouvez modifier dynamiquement la liste des classes de mise en page d'un flux en appelant la fonction OpenTok API REST /session/{sessionId}/stream. Envoyez une requête PUT à l'URL suivante :

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

Définir le type de contenu (Content-Type) à "application/json" et inclure la liste des classes de mise en page 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 La propriété correspond à 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 `items`.

La requête 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 de caractères.

Vous pouvez également modifier la liste des classes de mise en page d'un flux à l'aide des SDK serveur OpenTok :

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

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

https://api.opentok.com/v2/project/{apiKey}/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 La propriété est définie sur « camera », « screen » ou « custom ». Une vidéo « screen » utilise le partage d'écran du diffuseur comme source vidéo ; une vidéo « custom » est diffusée par un client Web utilisant un élément VideoTrack HTML 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 mise en page d'un flux à l'aide des SDK serveur OpenTok :

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

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

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

La réponse comprend des données JSON, dont un élément items propriété, qui est un tableau contenant des informations de mise en page pour les flux de 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 La propriété 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 utilisant 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 définir un type de mise en page à utiliser lorsqu'un flux de partage d'écran est actif au cours de la session.

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 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 mise en page. Cependant, le flux de partage d'écran (et non un flux avec un focus (classe appliquée) occupera la position centrale dans la mise en page.

  • verticalPresentation - Il s'agit de l'utilisation de l'outil présentation verticale mise en page. Cependant, le flux de partage d'écran (et non un flux avec un focus (classe 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 mise en page. Cependant, le flux de partage d'écran (et non un flux avec un full (classe appliquée) occupera toute la place disponible dans la mise en page. La taille de la vidéo la plus petite dans la mise en page sera déterminée en fonction de règles de hiérarchisation des cours d'eau. Par exemple, si le client qui diffuse le flux de partage d'écran diffuse également un flux provenant d'une caméra, cette vidéo occupera la position vidéo la plus petite (à moins qu'un autre flux ne bénéficie d'une priorité plus élevée, par exemple parce qu'on lui a attribué une classe de mise en page).

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

Règles de priorisation des flux

Les archives et les diffusions en direct peuvent inclure jusqu'à 16 flux vidéo à la fois. Le compositeur de mise en page utilise les règles suivantes pour déterminer l'ordre de priorité des flux vidéo à inclure dans l'archive ou la diffusion, ainsi que l'ordre dans lequel les flux seront classé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é attribué une mise en page classe

  • 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 (c'est-à-dire ceux auxquels des classes de mise en page ont été attribuées) sont classés par ordre de priorité dans l'ordre suivant :

    1. Flux de partage d'écran
    2. Diffusions sans partage d'écran publiées par des clients qui publient également des diffusions avec partage d'écran
    3. Tous les autres flux (classés par ordre chronologique d'ajout à la liste des flux à inclure dans l'archive ou à diffuser)

  • Les flux de niveau inférieur (les flux qui ont pas auxquels des classes de mise en page ont été attribuées) sont ensuite classés par ordre de priorité dans l'ordre suivant :

    1. Flux de partage d'écran
    2. Diffusions sans partage d'écran publiées par des clients qui publient également des diffusions avec partage d'écran
    3. Flux publiés par des clients qui publient également des flux de niveau supérieur (flux auxquels des classes de mise en page ont été attribuées)
    4. Tous les autres flux (classés par ordre chronologique d'ajout à la liste des flux à inclure dans l'archive ou à diffuser)

Les flux vidéo inclus dans l'archive ou la diffusion composée sont sélectionnés en fonction de leur ordre de priorité. Les flux seront toujours classés selon ces règles. Tant qu'il y aura au moins deux flux, ils seront ajoutés au DOM virtuel selon cet ordre.

Lorsqu'un client interrompt la diffusion de sa vidéo, celle-ci est supprimée de la vidéo composite. Lorsqu'il reprend la diffusion de sa vidéo, celle-ci est réintégrée dans la vidéo composite s'il bénéficie d'une priorité supérieure à celle des autres clients (conformément à ces règles de priorisation). Les vidéos composites peuvent inclure jusqu'à 16 flux vidéo de clients.

Si une archive ou une diffusion composée atteint la capacité maximale pour les flux inclus et qu'un client diffusant un flux inclus se déconnecte, de l'espace est libéré pour un nouveau flux. Le flux vidéo suivant ayant la priorité la plus élevée sera alors inclus et rendu.

Notes :

Définir des mises en page personnalisées

En plus de la les mises en page prédéfinies, vous pouvez utiliser le CSS pour définir votre propre mise en page personnalisée pour les archives montées et les diffusions en direct.

Pour utiliser une mise en page personnalisée, définissez la propriété « type » de la mise en page sur « custom » et définissez une propriété supplémentaire, stylesheetqui est fixé au CSS :

CSS utilisé dans le stylesheet La propriété de la ressource de mise en page s'appliquera à un DOM virtuel, qui peut être décrit selon 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 d'une archive ou d'une diffusion montée est de 640 x 480 pixels (SD en mode paysage). Vous pouvez également configurer une archive ou une diffusion composite pour qu’elle utilise une résolution de 480 x 640 (SD portrait), 1 280 x 720 (HD paysage), 720 x 1 280 (HD portrait), 1 920 x 1 080 (FHD paysage) ou 1080x1920 (FHD portrait) lorsque vous appelez la méthode démarrer l'archive ou le commencer la diffusion méthode de l'API REST OpenTok. Les archives de 640 x 480 pixels et 480 x 640 pixels (SD) présentent des formats d'image de 4:3 et 3:4. Les archives de 1 280 x 720 pixels, 720 × 1280 pixels, 1 920 × 1 080 pixels et 1 080 × 1 920 pixels (HD et FHD) ont des formats d'image de 16:9 et 9:16. Gardez ces formats d'image à l'esprit lorsque vous définissez le 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 de 640 x 480 pixels (SD en mode paysage). Vous pouvez également configurer une archive ou une diffusion composite pour qu’elle utilise une résolution de 480 x 640 (SD portrait), 1 280 x 720 (HD paysage), 720 x 1 280 (HD portrait), 1 920 x 1 080 (FHD paysage), ou 1080 × 1920 (FHD portrait) lorsque vous appelez la démarrer l'archive ou commencer la diffusion méthode de l'API REST OpenTok.

Les règles par défaut suivantes s'appliquent à <stream> éléments :

stream {
  display: block;
  margin: 0;
}

Remarque : La résolution du conteneur est fixe et ne peut pas être modifiée par le 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 pris en charge (et privilégiés) et peuvent être utilisés pour sélectionner n'importe quel 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%;
}

Le code CSS suivant est basé sur la mise en page 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%;
}

Le code CSS suivant est basé sur la mise en page 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.

s