So fügen Sie in wenigen Minuten Streaming zu Ihrer Jamstack-Site hinzu

Letzte Woche hatte ich das besondere Vergnügen, im Livestream „Streaming on Streaming“ meines Kumpels Todd Sharp dabei zu sein. Die Aufzeichnung dieser Sitzung können Sie hier ansehen:

Todd ist der wichtigste Entwicklerbefürworter des Amazon Interactive Video Service (IVS), oder einfacher gesagt, einer Möglichkeit, die unglaubliche Leistungsfähigkeit der Twitch-Plattform in Ihre Hände zu legen. IVS bietet Ihnen:

• Die Möglichkeit, Kanäle für Ihre Inhalte zu erstellen.

• Mehrere Möglichkeiten zur Verbreitung Ihrer Inhalte, von webbasiert bis hin zu leistungsfähigeren Tools wie OBS.

• Mehrere Möglichkeiten zur Anzeige Ihrer Inhalte, einschließlich eines ziemlich einfachen Web-SDK.

• Super detaillierte Berichterstattung.

• Und tiefe Integrationen in den Stream, die Dinge wie Transkriptionen, Lambda-basierte Chat-Moderation und mehr ermöglichen.

  
  

Dies ist ein kommerzieller Dienst, aber wie so ziemlich alles in AWS gibt es eine kostenlose Stufe, mit der Sie Dinge testen und sehen können, ob sie für Sie sinnvoll sind.

In der Sitzung, die ich mit Todd hatte, wollte er seine eigene Dokumentation und Konsole einer „erstmaligen Entwicklererfahrung“ unterziehen. Zunächst einmal ist es wahrscheinlich eines der wichtigsten Dinge, die Sie tun können, über die anfängliche Entwicklererfahrung mit Ihrem Produkt nachzudenken und sich wirklich darum zu kümmern.

Ich weiß, dass es für mich in meiner eigenen Karriere in der Interessenvertretung von Entwicklern nahezu unmöglich ist, etwas Neues auszuprobieren, ohne das Entwickler-Onboarding ständig zu prüfen und zu kommentieren. Todd verdient großen Respekt dafür, dass er das live in seinem Stream macht.

Ich bin irgendwie dafür bekannt, Dinge kaputt zu machen, Dinge falsch zu machen und im Allgemeinen einfach der schlimmste Albtraum zu sein, wenn es um DX geht, also war das ziemlich mutig von seiner Seite.

(Und um es klarzustellen: Wir haben diesen Stream nicht im Voraus geplant. Mir wurde nichts im Voraus mitgeteilt, und das einzige wirkliche Wissen, das ich hatte, war das Lesen seiner Blog-Beiträge und des allgemeinen Chats.)

Wie Sie sich vorstellen können, wird so etwas wie „Erstellen Sie Ihr eigenes IVS“ sehr komplex, aber in unserer einstündigen Sitzung haben wir meinen Kanal eingerichtet, ich habe von OBS und einem Web-Tool gesendet und konnte ein einfaches erstellen Webseite, um den Stream anzuzeigen.

Ich dachte, ich teile hier einige der Highlights mit, da die Idee, Streaming im Jamstack zu unterstützen, unglaublich überzeugend klingt. Dies wird zwar etwas anspruchsvoll sein, aber die Dokumentation ist ziemlich ausführlich und wird Ihnen detailliertere Informationen zu den Einzelheiten liefern.

Sie sollten auch mit dem Leitfaden „Erste Schritte“ beginnen.

Vor diesem Hintergrund finden Sie hier einen grundlegenden Überblick darüber, wie einfach der Einstieg ist.

Schritt eins – Holen Sie sich AWS

Ich werde das einfach überspringen. Ich meine, ich glaube, ich bin nicht so, wie ich es nenne, und Sie sollten nie etwas annehmen, aber da ein großer Prozentsatz der Leute bereits AWS nutzt, gehe ich davon aus, dass Sie bereits ein Konto haben.

Ich habe es getan und mein Root-Konto verwendet, aber wenn Sie dem Link „Erste Schritte“ folgen, den ich oben geteilt habe, müssen Sie einen Benutzer mit eingeschränkterem Zugriff einrichten, was „The Right Thing to Do“ und „We Always Do The Right Thing in tech“ heißt. Hm.

Schritt zwei – Erstellen Sie Ihren Kanal

Als Nächstes definieren Sie einen Kanal im IVS-Teil der AWS-Konsole:

Zur Erinnerung: Das Suchfeld auf Tox von IVS leistet wirklich gute Arbeit beim Auffinden von Dingen. AWS kann etwas überwältigend sein, aber ihre Suche hat die Dinge in letzter Zeit viel einfacher gemacht.

Ich gehe davon aus, dass die meisten Leute sich mit Streaming auskennen und die Grundidee eines Kanals verstehen, aber wenn ich mit dem Streaming beginnen würde, hätte ich wahrscheinlich nur einen Kanal für mich.

Wenn ich Streaming zur Website meines Unternehmens hinzufügen wollte, könnte ich mir einen Kanal für Dinge wie Schulungen, externe Veranstaltungen usw. vorstellen.

Es wird mindestens ein Kanal benötigt. Beim Erstellen eines neuen Kanals ist der Name das absolute Minimum:

Beachten Sie, dass eine der Optionen darin besteht, die Streams automatisch in S3 zu speichern. Ich habe das im Stream mit Todd nicht aktiviert, aber es ist wirklich schön, dass es so einfach zu aktivieren ist. Natürlich ist das Speichern großer Videodateien mit Kosten verbunden, aber ich schätze, wie einfach die Aktivierung ist.

Schritt drei – Finden Sie Ihren Sender heraus

Die Erste-Schritte-Dokumentation zum Einrichten Ihres Streaming- Covers mit ihren SDKs, OBS Studio oder FFmpeg. Ich habe in der Vergangenheit OBS Studio verwendet, also habe ich es während des Streams mit Todd verwendet. Ich möchte die Leute jedoch warnen: Wenn Sie es noch nie zuvor verwendet haben, kann es ziemlich überwältigend sein.

Es war definitiv für mich (verdammt, ich weiß immer noch kaum, was ich tue).

Lassen Sie mich stattdessen eine andere Option teilen, die Todd mir später im Stream mitgeteilt hat: stream.ivs.rocks . Dies ist eine webbasierte Streaming-Lösung, mit der Sie IVS testen können.

Öffnen Sie die Seite in Ihrem Browser (beachten Sie, dass Edge nicht unterstützt wird, aber ich hatte keine Probleme damit) und klicken Sie auf das Zahnradsymbol, um zu Ihren Einstellungen zu gelangen. Sie möchten Ihren „Ingest-Endpunkt“ und Ihren „Stream-Schlüssel“ angeben, die Sie beide in der AWS-Konsole in Ihren Kanaldetails finden.

Machen Sie nicht den gleichen Fehler wie ich – der „Ingest-Server“ ist NICHT dasselbe wie der „Ingest-Endpunkt“, Sie sollten „Andere Ingest-Optionen“ öffnen und erweitern, um das zu sehen.

Sobald Sie das getan haben, können Sie unten auf die Schaltfläche „Streaming starten“ klicken, und das war’s im wahrsten Sinne des Wortes! Dies ist zwar nicht etwas, was Sie für einen „echten“ Stream tun würden, aber es ist viel einfacher und schneller einzurichten.

Gehen Sie nach dem Streamen zurück zur AWS-Konsole, klicken Sie auf „Live-Kanäle“ und Sie können Ihren Stream in Aktion sehen:

Wenn Sie zu den Kanaldetails gehen, wird es auch dort angezeigt:

Übrigens können Sie dort und in Zukunft vergangene Streams und alle möglichen coolen Messwerte zum Stream anzeigen.

Mit vielen dieser verwendeten Begriffe bin ich nicht vertraut. Das sollten Sie also im Hinterkopf behalten, wenn Sie neu im Streaming sind (und ich habe es Todd als Feedback mitgeteilt), aber wenn Sie Statistiken mögen, ist AWS genau das Richtige für Sie.

Schritt vier – Das Frontend

Um den Stream tatsächlich anzusehen, müssen Sie herausfinden , wo Sie dies tun möchten. Wenn man bedenkt, dass ich ein Web-Typ bin und es in diesem Beitrag darum geht, dies auf dem Jamstack zu tun, ist der Web-Leitfaden in der Dokumentation der richtige Ausgangspunkt für Sie. Auch hier kann die anfängliche Implementierung sehr einfach sein.

Hier ist eine vollständige Implementierung:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script src="https://player.live-video.net/1.18.0/amazon-ivs-player.min.js"></script> <style> video#video-player { width: 800px; height: 450px; } </style> </head> <body> <h2>My Stream</h2> <video id="video-player" playsinline controls autoplay></video> <script> const pbURL = 'https://e0e6ec1c389e.us-east-1.playback.live-video.net/api/video/v1/us-east-1.100330257216.channel.4tjprROF5ZWE.m3u8'; document.addEventListener('DOMContentLoaded', init, false); async function init() { if (IVSPlayer.isPlayerSupported) { const player = IVSPlayer.create(); player.attachHTMLVideoElement(document.getElementById('video-player')); console.log('player made'); player.load(pbURL); player.play(); } else console.log('u stink'); } </script> </body> </html>

Lassen Sie es uns aufschlüsseln. Sie haben ein Skript-Tag oben beim Laden ihres SDK. Als nächstes habe ich mein HTML mit den wichtigen Teilen, dem <video> -Tag, und meinem CSS, um es richtig dimensionieren zu können.

Das JavaScript erstellt eine Instanz des IVSPlayer und hängt sie an das DOM an. Der pbURL Wert stammt aus der AVS-Kanalkonfiguration:

Und hier ist es in Aktion!

Bevor Sie sich jetzt zu sehr aufregen, beachten Sie, dass dies der einfachste Code ist, den Sie verwenden können, der jedoch nicht sehr kugelsicher ist. Beim Testen werden Sie auf jeden Fall darauf stoßen. Wenn Sie nicht streamen, erhalten Sie beim Versuch eine Fehlermeldung um den Stream zu laden. Das macht absolut Sinn, also würde besserer Code damit umgehen.

Ich habe einen kurzen Blick auf die Web-Referenz geworfen und sehe eine Ereignisunterstützung. Sie sollten also in der Lage sein, darauf zu warten, dass ein Stream beginnt. Entweder an diesem Punkt laden oder etwas im DOM tun, um der Person, die die Webseite betrachtet, mitzuteilen, dass ein Stream begonnen hat.

Das ist es!

Ok, sicher, das ist nicht sehr produktionswürdig, aber ich hatte buchstäblich eine Streaming-Lösung in einer Stunde fertig. Nun, das wird nicht kostenlos sein, also sollten Sie das im Hinterkopf behalten, aber ich bin wirklich überwältigt davon, wie schnell Sie loslegen können und wie viel Leistung Sie sofort erhalten.

Und da AWS alles übernimmt, passt es hervorragend zum Jamstack. Es gibt auch serverbasierte APIs, die Sie integrieren könnten, und dort würde ich so etwas wie Netlify Functions verwenden.

Schauen Sie sich also noch einmal die Dokumente an. Es wird eine Menge zu verdauen geben, aber es gibt noch viel mehr, als ich hier angesprochen habe.

Schauen Sie sich als Nächstes die Beiträge von Todd auf dev.to an, wo er eine Reihe von Beispielen geteilt hat. Zuletzt demonstrierte er einen Echtzeit-Video-Chat mit mehreren Hosts im Browser und führte anschließend ein Beispiel für mehrere Hosts und Live-Streaming durch, wiederum über den Browser .

Seine Beiträge zum Thema Chat und die Macht, die man dort hat, um zu moderieren, sind meiner Meinung nach meine Favoriten. Als besonders cool empfehle ich auch den Beitrag, den er über die Gründung eines eigenen „LoFi“-Radiosenders geschrieben hat.