PC & Mobile

Construire une application de chat vidéo de groupe – Agora.io – Moyen

Construire une application de chat vidéo de groupe - Agora.io - Moyen


Bonjour à tous, Aujourd'hui, je souhaite expliquer comment créer une application Web de groupe de discussion vidéo simple, très similaire à Google Hangouts, à Skype ou à la plate-forme de discussion vidéo de votre choix. Étant donné le paysage JS fragmenté d’aujourd’hui, je souhaitais écrire ce didacticiel à l’aide des versions les plus fondamentales de HTML, CSS et JS. Avant que vous ne le disiez, je sais que JQuery n’est pas JS vanille mais Vanilla JS peut être un peu prolixe pour certaines tâches du DOM, j’ai choisi d’utiliser JQuery pour simplifier certaines choses. Nous allons couper quelques coins et utiliser Bootstrap pour ne pas avoir à nous soucier d’écrire trop de CSS personnalisé.

Conditions préalables

  • Un simple serveur web (j'utilise XAMPP)
  • Un certificat SSL ou un moyen d'avoir une connexion https (j'utilise ngrok)
  • Un compte développeur avec Agora.io
  • Une compréhension de HTML / CSS / JS
  • Comprendre le fonctionnement de Bootstrap et JQuery
    (connaissances minimales nécessaires)

Structure de base (HTML)

Commençons par définir notre structure HTML de base. Vous devez disposer de quelques éléments d'interface utilisateur, tels que le flux vidéo local, les flux vidéo distants, une barre d'outils contenant des boutons permettant de basculer les flux audio / vidéo, un bouton permettant de partager notre écran avec le groupe et enfin un moyen de quitter le chat (nous ajouterons les boutons un peu plus tard).

Ajout en CSS et JS

Maintenant que nous avons notre base, nous pouvons commencer à nous développer. En utilisant Bootstrap pour notre CSS, nous pouvons rapidement styliser notre code HTML avec quelques classes simples. Dans le code ci-dessus, ajoutons le CSS inclus (montré ci-dessous) dans le code où nous voyons le bloc de commentaires .

Bien que Boostrap soit génial, ce n’est pas une solution à 100%, alors j’ai ajouté quelques blocs CSS supplémentaires dans un fichier CSS personnalisé (nous y reviendrons un peu plus tard). Cela aidera à régler quelques éléments pour lesquels Bootstrap n’est pas parfait. J'ai également ajouté le cadre CSS de Font Awesome, car nous allons devoir incorporer des icônes pour les différents boutons et FA facilite grandement les choses.

Comme je l'ai mentionné, l'amorçage est génial, mais vous avez parfois besoin d'un peu de CSS personnalisé. Voici les blocs de style pour la référence ci-dessus style.css.

Ajout d'éléments d'interface utilisateur

Ajoutons maintenant quelques boutons pour contrôler le basculement du micro, de la vidéo ou de la sortie du canal et terminer les derniers bits de notre interface utilisateur. C’est là que les polices et le bootstrap rendent vraiment les choses simples. Nous allons utiliser un

Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close