Agora : Mettre en évidence les locuteurs actifs lors d’un appel vidéo de groupe

Ce blog a été écrit par Akshat Gupta un stagiaire évangéliste développeur Agora qui avait commencé son voyage sur Agora en tant que superstar. Le programme Agora Superstar permet aux développeurs du monde entier de partager leur passion et leur expertise technique, et de créer des applications et des projets de communication en temps réel innovants à l’aide des SDK personnalisables d’Agora. Vous pensez avoir ce qu’il faut pour être une Superstar Agora ? Appliquer ici.

Nous voulons tous que nos participants à la vidéoconférence à distance aient l’impression qu’ils peuvent participer et qu’ils font vraiment partie de la réunion. Les interruptions et les discussions sont deux des plus grands défis de réunion pour les travailleurs à distance et sur site.

Mettre en évidence ou différencier visuellement le locuteur actif crée une atmosphère de conversation organique qui engage bien plus les participants distants que lors d’un appel vidéo normal. L’attention des participants est dirigée vers la bonne personne, afin qu’ils sachent où regarder sur l’écran. Dans ce tutoriel, nous allons développer une application Web qui met en évidence les locuteurs actifs dans une application d’appel vidéo de groupe en utilisant le SDK Web Agora.

Capture d’écran de l’application d’appel vidéo que nous allons développer.

Conditions préalables

Configuration du projet

Commençons par présenter notre structure HTML de base. Quelques éléments d’interface utilisateur sont nécessaires, tels que l’UID du flux audio local, les UID des flux audio distants et les boutons pour rejoindre, quitter, désactiver et réactiver. J’ai également importé les CDN nécessaires et lié les fichiers customCSS et JS.

Capture d’écran de notre site avec le code ci-dessus.

Ajout de couleur

Maintenant que notre mise en page de base est prête, il est temps d’ajouter quelques CSS.J’ai déjà ajouté des classes Bootstrap de base au code HTML pour rendre le site présentable, mais nous utiliserons un CSS personnalisé pour faire correspondre le site avec un bleu Thème basé sur l’Agora.

La magie du CSS.

Fonctionnalité de base (JS)

Maintenant que nous avons défini la structure HTML/DOM, nous pouvons ajouter le JS, qui utilise le SDK Web Agora. Cela peut sembler intimidant au début, mais si vous suivez Agora documents officiels et démos et mettez un peu d’entraînement, ce sera un jeu d’enfant.

Dans l’extrait suivant, nous créons d’abord un client, puis créons une piste audio de microphone et vidéo de caméra.

Les jetons sont utilisés pour incorporer une sécurité supplémentaire dans notre application. Si vous n’utilisez pas de jetons, spécifiez les jetons comme null.

Lorsqu’un utilisateur rejoint un canal en cliquant sur le bouton, vous commencez à lire les pistes spécifiées lors de la création du client. Le flux de l’utilisateur est ensuite publié et abonné, ce qui peut être basculé à l’aide des commandes de l’interface utilisateur.

Lorsqu’un utilisateur part, supprimez l’uid de l’écran de l’utilisateur.

Enfin, nous donnons à l’utilisateur la possibilité de mettre fin à l’appel et de quitter le canal.

Maintenant que notre application prend en charge les appels vidéo de groupe, il est temps d’intégrer la fonctionnalité principale : mettre en évidence tout utilisateur qui parle à travers une ombre de boîte bleue autour du flux vidéo de l’utilisateur.

Mettre un orateur en surbrillance

Suivant le Agora Docs, nous activons l’indicateur de volume. Cette méthode permet au SDK de signaler régulièrement les utilisateurs distants qui parlent et leurs volumes.

Une fois l’indicateur de volume activé, le SDK déclenche le AgoraRTCClient.on(‘indicateur de volume’) rappel pour signaler les volumes toutes les deux secondes, que des haut-parleurs actifs soient ou non dans le canal.

Le indicateur de volume le rappel signale tous les utilisateurs distants parlants et leurs volumes. Il est désactivé par défaut. Il est activé uniquement via le enableAudioVolumeIndicator. S’il est activé, il signale les volumes des utilisateurs toutes les deux secondes, que les utilisateurs parlent ou non.

Le volume est un nombre entier compris entre 0 et 100. Généralement, un utilisateur dont le volume est supérieur à 5 est un utilisateur parlant.

Vous pouvez maintenant exécuter et tester l’application.

Noter: Pour les tests, vous pouvez utiliser plusieurs onglets de navigateur pour simuler plusieurs utilisateurs lors de l’appel.

Conclusion

Tu l’as fait!

Nous avons réussi à créer notre propre application d’appel vidéo qui met en évidence le locuteur actif. Au cas où vous n’auriez pas codé ou que vous vouliez voir le produit fini ensemble, j’ai téléchargé tout le code sur GitHub :

Si vous souhaitez voir la démo en action, consultez la démo du code en action :

Merci d’avoir pris le temps de lire mon tutoriel. Si vous avez des questions, faites-le moi savoir avec un commentaire. Si vous voyez une marge d’amélioration, n’hésitez pas à forker le repo et à faire une pull request !

Autres ressources

Pour en savoir plus sur le SDK Web Agora et d’autres cas d’utilisation, vous pouvez vous référer au guide du développeur ici.

Vous pouvez également rejoindre notre chaîne Slack :

Et je vous invite à rejoindre le Communauté de développeurs Agora Slack. N’hésitez pas à poser des questions sur l’UIKit dans le canal #react-native-help-me.

Vous voulez créer des applications d’engagement en temps réel ?

Commencez dès aujourd’hui avec 10 000 minutes gratuites !

Si vous avez des questions, veuillez nous appeler au 408-879-5885. Nous serions heureux de vous aider à ajouter le chat vocal ou vidéo, le streaming et la messagerie dans vos applications.

Partager

Avertissement

Agora inc. publié ce contenu sur 23 juillet 2021 et est seul responsable des informations qu’il contient. Distribué par Publique, non édité et non modifié, sur 23 juillet 2021 16:27:10 UTC.

.

— to www.marketscreener.com