Partager:
){kind=small}
Mofizur Rahman (@moficodes) est Senior Developer Advocate chez Vonage. Son langage de programmation préféré est Go. Il bricole également avec Node, Python et Java. Il apprend et enseigne également dans la communauté Go, Kubernetes, Docker et Microservice. Il croit fermement au pouvoir de l'open source et à l'importance de rendre à la communauté. Il est un collectionneur d'autocollants autoproclamé et a collectionné plusieurs boîtes pleines d'autocollants sans aucun signe d'arrêt. Il s'essaie parfois à la photographie.
Il écrit parfois des blogs technologiques que l'on peut trouver sur https://dev.to/moficodes.
Mise en page automatique pour l'application Video de Vonage
Temps de lecture : 2 minutes
L'API Video de Vonage facilite la création de notre propre application de chat vidéo avec seulement 15 lignes de code. Pour que l'application ressemble à une véritable application de Video Chat, nous devons faire un peu plus de travail. L'un des défis consiste à placer correctement les participants sur l'écran. Des applications comme Zoom, Teams, Google Meet et Webex ont toutes leur propre apparence. Fondamentalement, elles poursuivent toutes le même objectif : placer les participants sur l'écran dans une sorte de grille et les réorganiser en fonction des différentes tailles d'écran. C'est ce que nous allons faire pour notre Applications Video Vonage aujourd'hui.
Voici un exemple de ce que nous allons construire.
Editeur de texte (par exemple VS Code)
Navigateur web
Le code source de cette démo se trouve dans ce repo.
L'ingrédient principal pour faire fonctionner notre mise en page automatique est Opentok Layout JS. Il s'agit d'une bibliothèque open-source créée par Adam Ullman.
Le code de cette démo est assez court. Il y a 4 fichiers au total. Nous en créerons trois (index.html, style.css, script.js) et un (opentok-layout.js) qui est téléchargé depuis Opentok Layout JS et qui est téléchargée à partir du dépôt Opentok Layout JS.
Dans la section <head> de notre fichier HTML, nous ajoutons une référence à la bibliothèque client Opentok. Elle est utilisée pour obtenir l'accès à OT ce qui nous permet d'accéder à la caméra. Nous incluons également opentok-layout.js et notre style.css.
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
<script src="js/opentok-layout.js"></script>
<link rel="stylesheet" href="css/style.css" />
Dans le <body>nous ajoutons un div avec id="layout". Il s'agit du conteneur dans lequel nous placerons toutes les vidéos des participants. Nous disposons également de deux boutons permettant d'ajouter et de supprimer des vidéos de notre mise en page.
<div id="layout"></div>
<div id="buttons">
<input
type="button"
name="add"
value="Add"
id="add"
onclick="addElement()"
/>
<input
type="button"
name="remove"
value="Remove"
id="remove"
onclick="removeElement()"
/>
</div>
Enfin, nous ajoutons une référence à notre fichier script.js juste après la balise </body> nous ajoutons une référence à notre fichier juste après la balise
La majeure partie du fichier CSS est utilisée pour placer les boutons en bas de l'écran, ce qui laisse le reste de la surface de l'écran pour le layout conteneur. Le conteneur est doté d'une propriété de transition CSS afin de rendre fluides les changements de mise en page dus à l'ajout et à la suppression de vidéos.
C'est ici que nous initialisons et utilisons la bibliothèque Opentok Layout JS. Nous créons d'abord une référence à notre conteneur de mise en page, layoutEl. Ensuite, une variable layout est initialisée et remplacée par une fonction Opentok Layout JS qui est renvoyée lorsque l'on passe à la variable layoutEl et quelques options.
var layoutEl = document.getElementById('layout');
var layout;function updateLayoutValues() {
const opts = {
maxRatio: 3 / 2,
minRatio: 9 / 16,
fixedRatio: false,
alignItems: 'center',
bigPercentage: 0.8,
bigFixedRatio: false,
bigMaxRatio: 3 / 2,
bigMinRatio: 9 / 16,
bigFirst: true,
scaleLastRow: true,
smallMaxWidth: Infinity,
smallMaxHeight: Infinity,
bigMaxWidth: Infinity,
bigMaxHeight: Infinity,
bigAlignItems: 'center',
smallAlignItems: 'center',
};
layout = initLayoutContainer(layoutEl, opts).layout;
}
updateLayoutValues();Il existe une explication de toutes les propriétés opts et des valeurs possibles dans le document Opentok Layout JS ReadMe.
layout est appelée chaque fois que nous devons réorganiser la présentation de l'application lorsque des vidéos sont ajoutées ou supprimées, ou que la fenêtre se redimensionne.
Il existe également des récepteurs d'événements pour les boutons d'ajout et de suppression. Un autre écouteur d'événement est créé lorsque l'on double-clique sur la vidéo d'un participant, ce qui permet d'agrandir ou de rétrécir la vidéo.
Il s'agissait d'une explication rapide pour montrer comment vous pouvez obtenir une mise en page réactive pour votre application Vonage Video.
Pour créer encore plus rapidement une application vidéo multipartite, vous pouvez utiliser Video Express de Vonage. Video Express utilise opentok-layout-js et intègre notre Client SDK OpenTok. Vous pouvez apprendre à utiliser Vonage Video Express avec cet article par Enrico.
Si vous avez des questions ou des commentaires, n'hésitez pas à nous contacter via Twitter ou Slack.
Partager:
Mofizur Rahman (@moficodes) est Senior Developer Advocate chez Vonage. Son langage de programmation préféré est Go. Il bricole également avec Node, Python et Java. Il apprend et enseigne également dans la communauté Go, Kubernetes, Docker et Microservice. Il croit fermement au pouvoir de l'open source et à l'importance de rendre à la communauté. Il est un collectionneur d'autocollants autoproclamé et a collectionné plusieurs boîtes pleines d'autocollants sans aucun signe d'arrêt. Il s'essaie parfois à la photographie.
Il écrit parfois des blogs technologiques que l'on peut trouver sur https://dev.to/moficodes.