Wir bauen uns mittels SignalR ein Stream Overlay

• Tobias Scholze
• 4. November 2019
• • teilen

Streaming von Inhalten ist in aller Munde. Hierbei muss es nicht zwingend immer um Spiele gehen. Die Streaming-Landschaft ist bunt und reicht von Koch- über Märchenerzähl- und Zeichenstreams bis hin zu Formaten, welche sich mit Programmierung oder komplett anderen Themen befassen.

Allgegenwärtig bei diesen Streams sind die sogenannten Overlays. Also gestalterische Elemente, welche oberhalb des eigentlichen Videos angezeigt werden. Neben den statischen Overlays, welche einen schönen Rahmen für das Bild geben, kommen auch öfter nur kurz sichtbare Grafiken und Co. zur Verwendung. Services wie StreamElements oder Streamlabs haben sich hierherauf spezialisiert.

Allerdings wären wir keine Technik-Freaks, wenn wir es nicht auch einmal selbst programmieren wollen würden. Dieser Aufgabenbereich ist zugleich auch ein tolles und einfaches Beispiel um sich einmal mit ASP.NET Core und das auf WebSockets aufsetzende RPC-Framework SignalR von Microsoft zu beschäftigten.

Buzzword Bingo!

Manchmal können technische Erklärungen auf den ersten Blick verwirrend sein. Aus diesem Grund hier ein grober Überblick über die verwendeten Komponenten.

Mit ASP.NET Core hat Microsoft ein quelloffenes Web-Framework erschaffen, welches, wie der Name es vermuten lässt, auf .NET Core basiert und plattformunabhängig entwickelt und betrieben werden kann. Das mittlerweile in Version 3 verfügbare Framework ermöglicht ein schnelles Entwickeln auch komplexer Webapplikationen auf Basis von bekannten Microsoft Technologien. Zur Darstellung von Webinhalten werden so genannte Razor Pages benutzt. Diese sind eine Kombination aus einer HTML-Seite, welche auf dem Server verarbeitete Kontrollelemente in C#-Manier enthalten kann, und einer „Code Behind“-Datei, die meistens auf C# Basis alle für die HTML-Ansicht relevanten Informationen zu Verfügung stellt.

SignalR setzt nun auf das oberhalb beschriebene ASP.NET Core auf und erweitert dessen Funktionalität um Echtzeit-Kommunikation. Somit existiert eine permanente offene Verbindung zwischen dem Server und dem Client, welcher in unserem Falle ein Browser ist. Da SingalR RPC (Remote Procedure Call) -fähig ist, kann die Serverapplikation dem Client sagen, dass dieser eine definierte Methode in seinem eigenen Kontext ausführen soll.

Die ersten Schritte

Da ASP.NET Core plattformunabhängig ist, können zur Entwicklung hierfür Windows, Mac oder Linux verwendet werden. Auch ist kein großes Visual Studio (Community) erforderlich, sondern ermöglicht es auch das schlankere Visual Studio Code, bequem für dieses Framework zu entwickeln.

Für mich fiel die Entscheidung auf Visual Studio. In dieser Entwicklungsumgebung kann man einfach eine ausgewählte Projektvorlage für ASP.NET Core auswählen und somit mit einem vorgefertigten Strukturskelett das Projekt beginnen. Nachteil hierbei ist, dass auch eine Beispielanwendung mit erstellt wird und man diese, wenn nicht benötigt, händisch entfernen muss. Um dies zu umgehen, könnte man auch eine leere Projektmappe von Visual Studio erstellen lassen und das Konfigurieren der entsprechenden Dateien von Hand übernehmen.

Bilder für das Overlay Board auslesen

Ein Overlay ohne entsprechendes Bild ist im wahrsten Sinne des Wortes keines Blickes wert, da nicht sichtbar. Um die Komplexität des Projektes gering zu halten, lesen wir den Inhalt eines gewissen Ordners innerhalb der Projektstruktur aus und stellen dessen Bilder in einer Liste dar.

Hierbei machen wir uns eine praktische Eigenschaft von ASP.NET Core zu Eigen. Dank der integrierten Dependency Injection (Wiki, Docs) Funktionalität müssen in unserem einfachen Falle Objekte, welche die komplette App betreffen, nicht per Hand weitergegeben, sondern können im Konstruktor der Klasse definiert und dann sofort verwendet werden. Um dies zu ermöglichen, müssen die entsprechenden, via Dependency Injection abgreifbaren Instanzen in der Startup.cs definiert werden. Dies geschieht im Falle unserer App mittels dem services.AddSignalR() Aufruf im Block der ConfigureServices(IServiceCollection services) Methode. Die Fähigkeit, komplexe Themen wie Depdendency Injection runter zu brechen, sind für mich eine der größten Stärken von ASP.NET Core. Dies ist mit ein Grund, warum ich dieses Framework auch für einen prima Einstiegspunkt für neue Entwickler und Bastler halte.

Kurzum, dies alles ermöglicht dem Page Model der App mittels einfacher, geschachtelter LINQ-Queries (Docs) die Dateipfade der Bilder aus dem Dateisystem auszulesen, diese zu bearbeiten und schließlich daraus für die App verständliche Datenobjekte zu erstellen.

Bilder auswählbar anzeigen

Eingelesene Bilder bringen nichts, ohne diese auch auswählen zu können. Die im ersten Schritt oberhalb ausgelesenen Dateipfade werden hierbei in Razor Pages dargestellt. Innerhalb einer Razor Page kann, wie aus der Web-Entwicklung gewohnt, HTML, CSS und Co benutzen und diese mit C#-Funktionalität anreichern, welche dann auch Zugriff auf das dahinterliegende Page Model haben.

Über den Link, welches jedes Bild für sich hat, kann hierfür in der Methode des Page Models eine entsprechende Aktion ausgelöst werden, die schlussendlich dafür sorgt, dass auf einer anderen Webseite das gewählte Bild angezeigt wird.

SignalR sorgt für Kommunikation

Die Kommunikation mit SignalR läuft in einer simplen Sender -> Verteiler (Hub) -> Empfänger Manier ab. Hierbei handelt es sich meistens um RPC-Aufforderungen. In unserem kleinen Beispiel sagt unser IndexPage.chshtml.cs  dass es das Event „BoardItemChanged“ mit einem Parameter, dem neuen Bildpfad, gegeben hat. Das hierauf hörende JavaScript File streamOverlay.js ruft dementsprechend eine Methode auf, welche dies in dessen Kontext verarbeitet und im Endeffekt für fünf Sekunden ein Bild auf der StreamOverlay.cshtml Seite anzeigt.

Einbinden in OBS

Bisher war es uns möglich, ein Bild auf einer leeren HTML-Seite im Browser anzuzeigen. Um hieraus ein Stream Overlay zu machen, genügt es bereits in OBS, oder vergleichbaren Programmen, eine Web View auf die URL https://localhost:44339/StreamOverlay zu richten.

Es sei empfohlen, den Haken bei „Unload if Source is not available” zu entfernen. Damit wird die OBS-Komponente nicht abgeschaltet, wenn unser lokaler Webserver noch nicht läuft.

Weitere Verwendungsmöglichkeiten

Viele Streamer benutzen das StreamDeck des Deutschland gegründeten Herstellers Elgato. Dies ist ein via USB angeschlossenes Gerät, welches über haptische und mittels kleinen Displays gestaltbare Buttons verfügt, welche frei belegbare Aktionen ausführen können.

Hierbei genügt es, einen sich im Hintergrund öffnenden, Web Link anzustoßen um das Bild dann in OBS und Co. sichtbar zu schalten.

Auch sind natürlich Steuerungen via Smartphone Browser, Raspberry Pi und Co. dank der einfachen Ansteuerung kein Problem. Der Kreativität kann hier freien Lauf gelassen werden. Ist das nicht toll?

Quellcode

Die Quelldateien für das Projekt sind im Repository dotnet-aspcore-llifo-overlay auf GitHub frei verfügbar. Forken, mitentwickeln und bewerten ist ausdrücklich erwünscht. Dieses Projekt ist als reines Beispiel für eine auch für Einsteiger geeignete, einfach zu verstehende Nutzung von SignalR gedacht.

#communityrocks

• Thema:

• News

Über den Autor

Tobias Scholze

Bayrischer Open Source- und Community-Enthusiast, Verfechter des neuen Microsoft und Wandler zwischen den Betriebssystemwelten. #communityrocks Von Herzen ein Nerd mit der festen Überzeugung, dass man gemeinsam und durch den Einsatz von moderner IT die Welt für jeden ein Stückchen besser machen kann.