){kind=small}
Créez un Twitch personnel avec l'API Video et les composants Web de Vonage
Temps de lecture : 5 minutes
Post a été mis à jour pour inclure la version mars 2022 de l'API Video de Vonage, avec une augmentation du nombre de participants interactifs simultanés en direct, des diffusions HLS à faible latence, et le nouveau Vonage Experience Composer.
Pour commencer, définissons certaines choses et fixons des attentes. Twitch est une gigantesque plateforme qui permet aux gens de diffuser des émissions et d'interagir avec les spectateurs. Tiré de Wikipédia: "En février 2020, elle comptait 3 millions de diffuseurs mensuels et 15 millions d'utilisateurs actifs quotidiens, avec 1,4 million d'utilisateurs simultanés en moyenne."
Construire quelque chose de cette envergure demande bien plus que ce que l'on peut apprendre dans un seul article de blog. L'objectif de ce billet sera plutôt de créer un "Twitch personnel". Moins de concerts de pop stars dans des stades et plus d'artistes locaux/indépendants dans un café. Un endroit où la personne qui diffuse peut réellement lire les messages dans le salon de discussion.
Ainsi, l'application finale permettra à un animateur de se diffuser avec ses invités auprès d'un public et d'interagir avec eux par le biais d'un chat textuel. De plus, c'est l'occasion de montrer comment vous pouvez intégrer des composants Web dans une application existante afin d'y ajouter des fonctionnalités supplémentaires.
L'application existante mentionnée ci-dessus est la Exemple d'application de diffusion créée pour présenter les capacités de diffusion de l'API Video de Vonage. Pour ajouter un chat textuel, l'application Client SDK UI Web Components seront utilisés.
L'API Video de Vonage offre deux façons de partager des sessions vidéo avec des publics.
Diffusions vidéo interactives en direct - Cette option permet aux présentateurs (hôte et invité) ainsi qu'aux spectateurs d'être connectés à la session vidéo. Les présentateurs publient et s'abonnent aux flux audio et vidéo des uns et des autres, tandis que les spectateurs s'abonnent simplement aux flux individuels des présentateurs. (Remarque : les spectateurs peuvent être autorisés à publier leurs flux puisqu'ils sont déjà connectés à la session). Étant donné que tout le monde s'abonne au flux de chacun, la latence est plus faible, mais il existe une limite supérieure au nombre de participants en fonction du nombre de flux publiés. Cette limite est de 15 000 participants interactifs simultanés en direct. La documentation contient un tableau pratique qui permet de déterminer le nombre de spectateurs possibles.
Diffusions en direct - Les présentateurs continuent de publier et de s'abonner aux flux de chacun, mais les téléspectateurs consomment un flux de diffusion unique combiné. La fusion des flux ajoutera une certaine latence pour le spectateur. Les flux HLS et RTMP sont disponibles pour la diffusion. La dernière version introduit une option de diffusion HLS à faible latence qui réduit considérablement la latence à environ 4 à 6 secondes. Cette option est plus proche de la façon dont Twitch, YouTube, Facebook et d'autres gèrent les flux en direct. Il existe également une nouvelle option HLS DVR qui permet aux spectateurs de mettre en pause et de reprendre les diffusions en direct.
L'exemple de diffusion de l'API Video de Vonage peut faire les deux, mais nous nous concentrerons ici sur l'option de diffusion en direct pour notre application personnelle Twitch.
Qu'est-ce qu'une diffusion en direct sur Twitch sans chat ? Pour ajouter cette fonctionnalité, le Client SDK UI Web Components seront utilisés. Plus précisément, les composants Web vc-messages, vc-text-input, et vc-typing-indicator seront intégrés.
L'ajout de composants Web à une application existante que vous n'avez pas créée peut nécessiter quelques considérations supplémentaires que s'il s'agissait d'un nouveau projet ou d'une application que vous êtes en train de construire. Voici ce que j'ai fait lorsque j'ai ajouté un chat à l'application d'exemple Broadcast.
L'application existante a-t-elle encore de la place pour l'ajout des Web Components ? En fonction de la disposition, un certain réarrangement peut s'avérer nécessaire. Il est utile de planifier à l'avance ce à quoi vous voulez que le résultat final ressemble, puis de plonger dans le code pour voir ce qui doit être déplacé. Par chance, la présentation de l'application Broadcast n'était pas trop complexe. Il a juste fallu rétrécir un peu la section vidéo pour faire de la place à l'interface de chat. Il s'agit principalement de CSS.
Pour intégrer de manière plus transparente le chat dans l'application, vous pouvez styliser les composants Web pour qu'ils correspondent aux autres éléments de l'interface utilisateur.
Nous venons d'aborder l'intégration des composants Web dans l'interface utilisateur de l'application, mais qu'en est-il de l'intégration dans l'expérience de l'utilisateur ? De quoi les composants Web ont-ils besoin pour fonctionner et sont-ils déjà disponibles dans l'application ?
Par exemple, le chat nécessite un nom d'utilisateur afin que tout le monde sache qui a tapé quel message. Il ne serait pas très agréable qu'après s'être connecté à une application avec un nom d'utilisateur et un mot de passe, l'utilisateur doive à nouveau saisir son nom d'utilisateur pour participer à la discussion. Le champ d'application de l'exemple de diffusion impliquait une connexion, j'ai donc simplement ajouté un champ de saisie permettant à l'utilisateur d'ajouter le nom d'utilisateur qu'il souhaite utiliser dans le chat.
Les composants Web de l'interface client SDK ont également besoin de connaître l'identifiant de la conversation afin d'envoyer et d'afficher les messages dans le bon chat. L'exemple d'application de diffusion utilise des paramètres dans l'URL pour transmettre des informations sur le flux, j'en ai juste ajouté un autre pour l'identifiant de conversation afin que tout le monde rejoigne le même chat.
Une dernière chose. Êtes-vous déjà allé sur une page de Twitch où il y a un flux en direct et la vidéo était en cours de lecture, mais le volume était en sourdine ? Eh bien, c'est à cause de la politique de lecture automatique de nombreux navigateurs. Pour être en accord avec la politique, j'ai mis en sourdine le flux vidéo diffusé par défaut et j'ai ajouté un bouton pour le désactiver et l'activer.
Si vous souhaitez voir l'application créée en action par vous-même, vous pouvez remixer le projet Glitch. En exécutant un script d'installation et en saisissant quelques clés et secrets API, vous pouvez vous aussi avoir votre propre Twitch.
Restez à l'affût d'un prochain article de blogue dans lequel nous incorporerons le nouveau Vonage Experience Composer. Considérez-le comme un moyen de capturer l'écran de l'ensemble de votre application (flux vidéo, interface utilisateur, clavardage, etc.) qui peut ensuite être utilisé pour des enregistrements et/ou la diffusion.
Comme toujours, si vous avez des questions ou des commentaires, n'hésitez pas à vous connecter avec nous dans notre canal Slack de la communauté.