Chatnachrichten im Livestream hervorheben

Ich möchte manchmal in meinen Livestreams die Fragen aus dem Chat hervorheben, um es für die anderen Zuschauer leichter zu machen, dem Gespräch zu folgen. Auch für Zuschauer des Mitschnitts ist es leichter Themen zu finden, wenn die Nachrichten im Bild zu sehen sind. Leider führte mich dieser Wunsch direkt zu einem kleinen Projekt.

Außer du nutzt Ecamm Live, da gibt es die Funktion fertig eingebaut. Leider genügte die eigentlich keinem meiner Ansprüche in Punkto Funktionsumfang und Anpassbarkeit. Aber wenn es für dich reicht und du von einem Mac streamst, sparst du dir eine Menge Kopfschmerzen und kannst eigentlich direkt aufhören zu lesen.

Ich sah die Funktion in einem Livestream eines Ecamm-Nutzers und wollte das sofort haben. Leider fand ich nichts, was sich in mein Livestreamsetup einbinden ließ. Genau genommen fand ich nichts anderes als Ecamm für diese Funktion.

Jedenfalls nicht, bis ich diesen Livestream von Aaron Parecki sah. Im Prinzip erklärt er mein Setup in dem Stream. Den könntest du dir anschauen. Oder – wenn du keine 74 Minuten Video dafür schauen möchtest – erkläre ich dir kurz, wie das Ganze funktioniert.

Funktionsweise

Das ganze Setup besteht im Prinzip aus zwei Teilen. Ich habe diese hochwertige Skizze angefertigt, um das Ganze zu verdeutlichen.

1. Der modifizierte Chat

Ich habe während des Streams einen Laptop vor mir, auf dem der Livechat im Browser zu sehen ist. In dem Browser habe ich ein Plugin installiert, dass mir erlaubt ein paar Modifikationen vorzunehmen:

  1. Ich kann eine Nachricht markieren
  2. Die markierte Nachricht wird in der oberen Bildschirmhälfte angezeigt

Die Darstellung im oberen Bildschirmteil ist dabei besonders: Der Hintergrund ist absolutes und perfektes schwarz während die Chatnachricht etwas heller ist und auch über dem Avatar des Urhebers ein kleiner Filter liegt, der alles minimal aufhellt, damit nichts davon absolut schwarz ist.

So sieht das Ganze in der Wildnis aus

2. Die Komposition

Dann wird einfach der Bildschirminhalt meines Laptops über mein Livebild gelegt und so zugeschnitten, dass nur noch die schwarze Box mit der markierten Nachricht zu sehen ist. Diese wird dann so verschoben, dass sie an der gewünschten Stelle auf meinem Livebild liegt.

Zu guter letzt wird ein sogenannter Luma-Key angewendet. Dabei werden alle absolut schwarzen Pixel ausgeblendet und es bleibt nur noch die isolierte Chatnachricht stehen.


Das solltest du mit den meisten etwas fortgeschritteneren Streaming-Setups hinbekommen. Ich nutze eine Hardware-Lösung auf meinem ATEM mini, du kannst das aber auch per Software machen. Zum Beispiel in OBS.

Mein Setup für YouTube und Twitch

Für meine YouTube-Livestreams nutze ich das Script von Aaron, dass ich einfach ein bisschen angepasst habe, damit es optisch mehr zu meinem Kanal passt. Als Browserplugin in Chrome benutze ich Styler Pro.

Das zusammenfügen passiert dann auf meinem ATEM Mini mit dem Upstream Key statt. Dabei habe ich eine Maske aktiv, die das Ganze zuschneidet und einem Flying Key, der das ganze transparent macht und platziert.

Screenshot meiner Settings aus der ATEM-Software

Für Twitch benutze ich die gleichen Einstellungen am Atem. Ich habe mir dafür auch noch ein Macro gebaut um die entsprechenden Einstellungen während eines Livestreams per Knopfdruck herzustellen. Das ganze passiert dann über Companion auf einem Streamdeck. Mehr dazu bei meinem Livestream-Setup.

Allerdings brauchte ich ja ein angepasstes Javascript weil der Twitch-Chat anders funktioniert als YouTube.

Dankenswerter Weise hat Martin – seines Zeichens Kanalmitglied – eine Twitch-Version gebaut. Diese kommt bei den Twitch-Streams in optisch angepasster Weise zum Einsatz.


Ich bin immer wieder fasziniert wie zusammengebastelt vieles beim Livestreaming funktioniert. Relativ wenig wird mit echten transparenzen gearbeitet und relativ viel wird entweder über Chroma-Keys oder eben Luma-Keys zusammengehackt. Dann bauen die Streamer Websites oder Anwendungen, die die Inhalte wie gewünscht zusammensetzen, bevor diese über das Livebild geprügelt werden.

Gefühlt ist hier noch viel Potential für Verbesserungen und Vereinfachungen in der nahen Zukunft. Die Früchte hängen tief. Aber ich bin froh, erstmal meinen Wunsch nach eingeblendeten Chatnachrichten so gelöst zu haben.