Utilisation de mises en page dynamiques dans les diffusions HLS/RMTP

L'API Video vous permet de contrôler totalement votre interface utilisateur lorsque vous créez des applications avec des sessions vidéo multipartites, mais quelles sont les options disponibles lorsque vous devez diffuser ces sessions via des flux HLS et/ou RTMP ?

Dans ce billet, nous discuterons des dispositions intégrées disponibles dans la boîte, de la façon de créer vos propres dispositions personnalisées et de la façon de modifier les dispositions et les styles de flux à la volée. Nous verrons ensuite comment vous pouvez capturer les mises en page avec l'interface utilisateur de votre application à l'aide du Vonage Experience Composer.

Vous voulez l'essayer ? Vous pouvez consulter un exemple d'application utilisant la fonctionnalité de diffusion sur GitHub. Vous pouvez également la déployer sur Heroku pour l'essayer.

Types de mise en page intégrés

Plusieurs facteurs doivent être pris en compte pour choisir la meilleure présentation de votre émission. Quelqu'un parle-t-il ? Quelqu'un partage-t-il son écran ? S'agit-il d'une table ronde ?

Heureusement, l'API Video de Vonage propose plusieurs mises en page prédéfinies pour vous aider à créer la meilleure expérience possible pour vos spectateurs.

Par défaut, les diffusions utilisent la mise en page bestFit (voir ci-dessous). Cette disposition change en fonction du nombre de participants et offre à chaque éditeur une surface d'écran égale.

Les autres options comprennent l'image dans l'image (pip), Présentation verticale (verticalPresentation) et Présentation horizontale (horizontalPresentation).

Mise à jour mai 2021 : De nouvelles dispositions verticales ont été ajoutées pour permettre l'enregistrement ou la diffusion en résolutions portrait SD et HD, idéales pour les appareils mobiles :

Nouveaux types de mise en page pour le partage d'écran

De nouveaux types d'agencement ont été introduits en mai 2021 :

• bestFit

• présentation horizontale

• présentation verticale

• tuyau

Initialisation et modification des modèles

Vous pouvez spécifier une mise en page initiale lorsque vous démarrez une diffusion. Pour ce faire, ajoutez une propriété layout contenant une propriété type au corps de la requête. Cette propriété type doit correspondre à la disposition prédéfinie que vous souhaitez utiliser.

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

Pour modifier la présentation pendant une diffusion en direct, utilisez l'un des SDK du serveur OpenTok ou appelez le point de terminaison de l'API REST OpenTok /broadcast/layout de l'API REST d'OpenTok.

Envoyez un objet JSON avec une propriété type indiquant la disposition dont vous avez besoin dans le corps de votre demande.

{
  "type": "pip"
}

Mais l'utilisation de modèles n'est que la première étape de l'amélioration de l'aspect de votre flux. L'étape suivante consiste à mettre à jour les listes de classes pour vos flux.

Prenons l'exemple de la présentation verticale verticalPresentation comme exemple. Dans l'image ci-dessus, vous remarquerez que la grande zone contient le mot "focus", c'est-à-dire le nom d'une classe qui doit être appliquée au flux que vous souhaitez voir apparaître dans cette zone.

Qu'il s'agisse d'un écran partagé, d'un orateur actif ou d'un éditeur que vous avez désigné comme "présentateur", la classe "focus" doit être attribuée au flux que vous souhaitez mettre en avant, à l'exclusion de toute autre. Parlons maintenant des styles et de la manière de les appliquer et de les modifier.

Styles de diffusion et de flux

La mise en page d'une émission est créée dans un DOM virtuel avec la structure suivante :

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

Vous devrez garder cette structure à l'esprit lorsque vous utiliserez les mises en page prédéfinies ou que vous créerez vos propres mises en page. Par défaut, la vidéo diffusée est de 640x480 pixels, mais vous pouvez spécifier l'utilisation de 1280x720 lorsque vous lancez la diffusion. Dans ce cas, les mises en page prédéfinies sont ajustées pour utiliser un format 16:9.

Important : Seuls 16 flux peuvent être affichés en même temps dans une émission.

Changer de style

Les modèles prédéfinis fournissent des feuilles de style CSS pour contrôler l'aspect et la convivialité de la diffusion. Pour les utiliser, vous devez spécifier quelles classes doivent s'appliquer à quels flux. Vous pouvez modifier la liste des classes pour les flux en utilisant l'un de nos SDK de serveur ou via l'API REST d'OpenTok /session/{sessionId}/stream . Les requêtes adressées à ce point d'accès contiendront un corps JSON similaire à l'objet ci-dessous :

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

Il est important de noter que la propriété items est un tableau qui vous permet de fournir des informations sur plusieurs flux en une seule demande. Ainsi, dans l'exemple de l'utilisation de la présentation verticale, vous devez envoyer la charge utile ci-dessus en spécifiant l'identifiant du flux sur lequel vous souhaitez mettre l'accent. Si un autre flux possédait précédemment la classe de focalisation, vous devez l'envoyer avec une liste de classes vide afin que la classe de focalisation soit supprimée.

Création de modèles personnalisés

Si l'une des mises en page prédéfinies ne répond pas à vos besoins, vous pouvez créer une mise en page personnalisée en envoyant custom comme type et une propriété stylesheet avec une propriété CSS.

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

Lorsque vous créez une mise en page personnalisée, vous devez tenir compte de certains éléments :

• Styles par défaut appliqués aux broadcast et stream et

• Sélecteurs CSS autorisés

• Propriétés et valeurs CSS autorisées

Styles par défaut

Les broadcast et stream se voient appliquer des règles par défaut. Vous pouvez remplacer ces styles dans votre feuille de style CSS personnalisée. Les règles par défaut sont les suivantes

broadcast {
  position: relative;
  margin:0;
  width: 640px;
  height:480px;
  overflow: hidden;
}
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 CSS autorisés

Les sélecteurs de type ne sont pris en charge que pour les éléments de flux. L'élément broadcast ne peut pas être sélectionné. Les sélecteurs de classe (tels que .focus) sont pris en charge (et préférés). Ils peuvent être utilisés pour sélectionner un groupe de flux ou un flux individuel. Les combinaisons de frères et sœurs adjacents et de frères et sœurs généraux sont prises en charge (frère et sœur un + frère et sœur deux, frère et sœur un ~ frère et sœur deux).

Les :first-child, :last-child, :nth-child(n), et :nth-last-child(n) sont également pris en charge.

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

• Le sélecteur universel (*)

• Sélecteurs descendants (parent ancêtre, parent * ancêtre)

• Sélecteurs enfant (parent > enfant)

• Sélecteurs d'identifiant (#myidentifier)

• Sélecteurs d'attributs ([data-title*="mon-titre"])

• Les sélecteurs de pseudo-éléments ne sont pas pris en charge

Propriétés CSS autorisées

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

Aller plus loin

Avec le Experience Composervous pouvez non seulement capturer la présentation de votre appel vidéo, mais aussi celle de votre application web complète. Cela inclut toutes les bannières, le chat textuel, le tableau blanc ou tout autre élément d'interface utilisateur affiché dans votre application. Experience Composer rejoint l'appel vidéo et transforme tout ce qui est visible à l'écran en un autre flux. Ce flux peut ensuite être diffusé et/ou archivé.

Poursuivre l'apprentissage

Vous souhaitez en savoir plus sur la personnalisation de l'aspect de vos émissions ? Consultez les liens ci-dessous :

• Diffusion sur OpenTok

• Configuration de la mise en page vidéo pour les diffusions en direct d'OpenTok