){kind=small}
Erstellen Sie ein persönliches Twitch mit Vonage Video API und Webkomponenten
Lesedauer: 4 Minuten
Der Beitrag wurde aktualisiert und enthält nun das Vonage Video API March 2022 Release mit mehr gleichzeitigen interaktiven Live-Teilnehmern, HLS-Übertragungen mit geringer Latenz und dem neuen Vonage Experience Composer.
Zu Beginn sollten wir einige Dinge definieren und Erwartungen festlegen. Twitch ist eine gigantische Plattform, die es Menschen ermöglicht, zu senden und mit Zuschauern zu interagieren. Von Wikipedia: "Im Februar 2020 hatte Twitch monatlich 3 Millionen Broadcaster und 15 Millionen täglich aktive Nutzer, mit durchschnittlich 1,4 Millionen gleichzeitigen Nutzern."
Um etwas in dieser Größenordnung aufzubauen, braucht man weit mehr als das, was man in einem einzigen Blogbeitrag lernen kann. In diesem Beitrag geht es vielmehr darum, eine Art "persönliches Twitch" zu schaffen. Weniger Popstar-Konzert in Stadiongröße und mehr lokaler/unabhängiger Künstler in einem Café. Ein Ort, an dem die sendende Person die Nachrichten im Chatroom tatsächlich lesen kann.
Im Kern wird die endgültige Anwendung es einem Gastgeber ermöglichen, sich selbst und seine Gäste an ein Publikum zu senden und mit ihnen über einen Textchat zu interagieren. Außerdem ist es eine Gelegenheit zu zeigen, wie man Webkomponenten in eine bestehende Anwendung integrieren kann, um zusätzliche Funktionen hinzuzufügen.
Die oben erwähnte bestehende Anwendung ist die Broadcast-Beispielanwendung die erstellt wurde, um die Broadcasting-Funktionen der Vonage Video API zu demonstrieren. Um einen Text-Chat hinzuzufügen, müssen die Client SDK UI-Webkomponenten verwendet werden.
Die Vonage Video API bietet zwei Möglichkeiten, um Videositzungen mit Zuschauern zu teilen.
Interaktive Live-Videoübertragungen - Bei dieser Option sind sowohl die Moderatoren (Gastgeber und Gäste) als auch die Zuschauer an der Videositzung beteiligt. Die Moderatoren veröffentlichen und abonnieren die Audio- und Videostreams der anderen, während die Zuschauer nur die individuellen Streams der Moderatoren abonnieren. (Hinweis: Den Zuschauern kann erlaubt werden, ihre Streams zu veröffentlichen, da sie bereits mit der Sitzung verbunden sind). Da jeder den Stream eines anderen abonniert, ist die Latenzzeit geringer, aber es gibt eine Obergrenze für die Anzahl der Teilnehmer, die sich nach der Anzahl der veröffentlichten Streams richtet. Diese Grenze liegt bei 15.000 gleichzeitigen interaktiven Live-Teilnehmern. In den Dokumenten finden Sie eine praktische Tabelle, mit der Sie die Anzahl der möglichen Zuschauer ermitteln können.
Live-Streaming-Übertragungen - Die Moderatoren veröffentlichen und abonnieren weiterhin die Streams der anderen, aber es gibt einen kombinierten, einzigen Sendestream, den die Zuschauer konsumieren. Durch das Zusammenführen der Streams entsteht für den Zuschauer eine gewisse Latenz. Es stehen sowohl HLS- als auch RTMP-Streams für die Übertragung zur Verfügung. Mit der neuesten Version wird eine HLS-Übertragungsoption mit geringer Latenz eingeführt, die die Latenz auf etwa 4 bis 6 Sekunden reduziert. Diese Option ist näher an der Art und Weise, wie Twitch, YouTube, Facebook und andere Live-Streams handhaben. Außerdem gibt es die neue HLS-DVR-Option, mit der die Zuschauer Live-Übertragungen anhalten und fortsetzen können.
Das Vonage Video API Broadcast-Beispiel kann beides, aber wir konzentrieren uns hier auf die Option der Live-Streaming-Übertragungen für unsere persönliche Twitch-Anwendung.
Was wäre ein Twitch-Livestream ohne einen Chat? Um diese Funktionalität hinzuzufügen, wurden die Client SDK UI-Webkomponenten verwendet werden. Genauer gesagt, die vc-messages, vc-text-input, und vc-typing-indicator Elemente integriert werden.
Das Hinzufügen von Webkomponenten zu einer bestehenden Anwendung, die Sie nicht selbst erstellt haben, kann ein paar mehr Überlegungen erfordern, als wenn es sich um ein neues Projekt oder eine Anwendung handelt, die Sie gerade erstellen. Hier sind einige Dinge, die ich beim Hinzufügen eines Chats zur Beispielanwendung Broadcast beachtet habe.
Hat die bestehende Anwendung überhaupt Platz für die Webkomponenten? Je nach Layout kann eine gewisse Umstellung erforderlich sein. Es ist hilfreich, im Voraus zu planen, wie das Endergebnis aussehen soll, und dann in den Code einzutauchen, um zu sehen, was umgestellt werden muss. Glücklicherweise war das Layout der Broadcast-Beispielanwendung nicht allzu komplex. Ich musste nur den Video-Bereich etwas schmaler gestalten, um Platz für die Chat-Oberfläche zu schaffen. Dafür wurde hauptsächlich CSS verwendet.
Um den Chat noch nahtloser in die Anwendung zu integrieren, können Sie Stil der Webkomponenten so gestalten, dass sie zu anderen UI-Elementen passen.
Wir haben gerade die Einbindung der Webkomponenten in die Benutzeroberfläche der Anwendung behandelt, aber was ist mit der Einbindung in die Benutzererfahrung? Welche Dinge brauchen die Webkomponenten, um zu funktionieren, und sind sie bereits in der Anwendung vorhanden?
Für den Chat ist zum Beispiel ein Benutzername erforderlich, damit jeder weiß, wer welche Nachricht geschrieben hat. Es wäre nicht sehr angenehm, wenn der Benutzer nach der Anmeldung bei einer Anwendung mit einem Benutzernamen und einem Kennwort erneut seinen Benutzernamen eingeben müsste, um dem Chat beizutreten. Der Umfang der Broadcast-Beispielanwendung beinhaltete die Anmeldung, also habe ich einfach ein Eingabefeld hinzugefügt, in das der Benutzer den Benutzernamen eingeben kann, den er im Chat verwenden möchte.
Die Client SDK UI-Webkomponenten müssen auch die Conversation Id kennen, damit sie die Nachrichten im richtigen Chat senden und anzeigen können. Die Broadcast-Beispielanwendung verwendet Parameter in der URL, um einige Informationen über den Stream zu übergeben. Ich habe einfach einen weiteren für die Conversation Id hinzugefügt, damit jeder demselben Chat beitritt.
Noch eine Sache. Haben Sie schon einmal eine Seite auf Twitch besucht, auf der ein Live-Stream läuft, und das Video wurde abgespielt, aber die Lautstärke war gedämpft? Nun, das liegt an der Autoplay-Politik von vielen Browsern. Um der Richtlinie gerecht zu werden, habe ich den Video-Stream standardmäßig stummgeschaltet und eine Schaltfläche hinzugefügt, mit der man ihn ein- und ausschalten kann.
Wenn Sie die erstellte Anwendung selbst in Aktion sehen möchten, können Sie das Glitch-Projekt. Wenn Sie ein Einrichtungsskript ausführen und einige API-Schlüssel und Geheimnisse eingeben, können auch Sie Ihr eigenes persönliches Twitch haben.
Halten Sie Ausschau nach einem kommenden Blogbeitrag, in dem wir den neuen Vonage Experience Composer vorstellen. Betrachten Sie es als eine Möglichkeit, Ihre gesamte Anwendung (Videostreams, Benutzeroberfläche, Chat und alles andere) zu erfassen, die dann für Aufnahmen und/oder Sendungen verwendet werden kann.
Wie immer, wenn Sie Fragen oder Kommentare haben, können Sie sich gerne mit uns in unserem Slack-Kanal der Gemeinschaft.