JavaScript

Un peu de personnalisation CSS

À ce stade, vous disposez d'un client fonctionnel complet utilisant Vonage Video. Cette dernière étape démontrera une personnalisation CSS de base pour produire une mise en page "image dans l'image".

  1. Ouvrez votre fichier app.css vierge dans votre éditeur de code et ajoutez-y le code suivant :
  1. Une fois que vous avez enregistré le CSS, rouvrez votre index dans deux onglets de navigateur distincts. Vous devriez maintenant voir deux flux vidéo, mais l'un d'entre eux sera plus petit et imbriqué dans le flux vidéo plus important.

Si vous regardez le CSS ci-dessus, vous pouvez voir que nous avons fait cela en ajustant la hauteur, la largeur et la position de l'élément #publisher div. Cette disposition "image dans l'image" est une pratique courante dans les chats vidéo, mais n'hésitez pas à ajuster le CSS pour jouer avec la taille et la position de ces divs autant que vous le souhaitez.

Chat vidéo de base

Apprenez les concepts de base de la plateforme Video API de Vonage, y compris la façon dont les utilisateurs peuvent communiquer par le biais de la vidéo, de la voix et de la messagerie. Explorer un flux de base de l'API Video de Vonage.

Étapes
1
Vue d'ensemble
2
Avant de commencer
3
Configurer une application vidéo de Vonage
4
Création des dossiers de projet et du modèle HTML
5
Configuration de l'authentification
6
Connexion à la session et création d'un éditeur
7
Initialisation de l'abonné
8
Tester votre code dans un navigateur
9
Un peu de personnalisation CSS
10
Conclusion