Stream-Overlay (WIP)

Always on Top Electron-Anwendung als Alternative zum “Windows 10 Xbox Mixer Overlay”

Die Idee hinter dieser Anwendung ist, dass Livestreamer mit nur einem Bildschirm übersichtlich alle Livestream-Relevanten Informationen komprimiert in einem kleinen Fenster erhalten können.

Dazu gehören bisher:

  • Der Chatverlauf
  • Aktuelle Zuschauerzahl
  • Dauer des Livestreams
  • Live-Status
  • Statusmeldungen

Um die Anwendung in Aktion zu zeigen, habe ich mich dazu entschieden, die Anwendung mit vorgefertigten Daten in einem iFrame darzustellen. In der richtigen Anwendung wird die Mixer-API abgefragt um beispielsweise den Chat und die Zuschauerzahl auszulesen.

Die Besonderheit an diesem Projekt ist, dass es mit Vanilla Javascript auskommt ohne ein extra Framework zu verwenden. Das hat mir allerdings auch gezeigt, wie sinnvoll solche Frameworks sind und wie sehr damit die Entwicklung beschleunigt werden kann, weil die gesamte Struktur zumeist “vorgegeben” ist.

Technologiewahl

Ich wählte Electron, weil ich die Vorstellung attraktiv finde, eine Webseite als Anwendung und somit als ausführbare .exe (oder das entsprechende Äquivalent für andere Betriebssysteme, denn Electron ist plattformunabhängig) zu haben. Außerdem habe ich die meiste Erfahrung mit Web-Technologien wie HTML, (S)CSS und JavaScript.

Aufgrund des schmalen Charakters der Anwendung habe ich mich gegen eine Datenbank entschieden und stattdessen auf Electron-JSON-Storage gesetzt um Daten zu persistieren.

Die Kommunikation findet ausschließlich zwischen dem Frontend und der Mixer-API statt. Dabei habe ich mich größtenteils an den Beispielen von Mixer selbst gehalten.

Die Verwendung von Vanilla JavaScript hat mich besonders gereizt, weil ich dort meine Kenntnisse weiter vertiefen und herausfinden wollte, was alles (mit welchem Aufwand) ohne Frameworks o.ä. möglich ist. Dabei habe ich mich primär auf den ES6 standard konzentriert, weil eine Electron-Awendung die Fähigkeiten des Chromium-Browsers nutzt und somit auch aktuelles JavaScript unterstützt (im Gegensatz zum Internet Explorer).

Ziel

Das Ziel ist es, eine Anwendung zu entwickeln, die der Nutzer nach den eigenen Bedürfnissen konfigurieren kann um übersichtlich die wichtigsten Informationen auf kleinem Raum zu erhalten. Das muss nicht zwangsläufig einen Livestream-Kontext haben, sondern solch ein “Benachrichtigungs-System” lässt sich in zahlreichen Szenarien einsetzen. Der Code soll von Anfang an darauf ausgelegt sein, als Entwickler, ohne großen Aufwand eine neue Plattform hinzuzufügen.

Zum aktuellen Zeitpunkt wurde das Ziel noch nicht erreicht!

Umsetzung

Das erste Proof of Concept war erstaunlich schnell erstellt. Mit einer halbwegs generischen “Notification”-Klasse und einem grundlegenden, simplen UI war schon die Kernfunktionalität erreicht. Gedauert hat das keine zwei Tage. Jedoch war nichts einstellbar und die Menge an Informationen hielt sich auch in Grenzen. Lediglich den Chat konnte ich halbwegs ordentlich in der Anwendung darstellen.

// Notification-Class constructor
constructor (type, data, user, totalMonths) {
    this.Settings = Settings.get('Notification') || {};
    this.SettingsType = Settings.get(`Notification/${type}`) || {};
    this.Statistics = Statistics.Notifications;
    this.HtmlElement = {};
    this.List = UtilityDOM.NotificationList;
    this.Type = type || null;
    this.User = user || null;
    this.Data = data || {totalMonths: totalMonths} || null;

    this.Settings.isEven = !this.Settings.isEven;

    Settings.set('Notification', this.Settings);
    this.create();
}

Der Constructor für die Notification-Class wurde nach und nach leider immer aufgeblähter und wirklich sauber geschrieben ist es auch nicht, aber es hat zu der Zeit seinen Zweck erfüllt.

// Platform-Class
const PLATFORMS = {
    Mixer,
    Twitch,
}

class Platform {
    constructor (platformClass) {
        if (typeof platformClass === 'string') {

            // Usage example: let Mixer = new Platform('Mixer');
            return new PLATFORMS[platformClass]();
        }
    }
}

Die Plattform-Klasse wiederum ist sehr aufgeräumt und übersichtlich. Was daran liegt, dass es eine “Proxy-Class” ist und ausschließlich dazu dient eine Instanz einer Klasse mit dem entsprechenden Plattform-Namen zu erzeugen. Das macht es durch das new Platform() einheitlich und generisch.

Ausblick

Das finale Produkt sollte sehr gut konfigurier- und erweiterbar sein. Nicht nur das Design der “Notifications” soll anpassbar sein, sondern auch das, was angezeigt wird. Es soll möglich sein, mehrere Plattformen zeitgleich zu aktivieren.

In Zukunft soll es nicht nur für Livestreamer sinnvoll sein, sondern auch für jeden anderen. Beispielsweise könnte es eine RSS-Plattform geben um Nachrichten o.ä. als “Notifications” in der Anwendung darzustellen, sodass man immer auf dem aktuellsten Stand ist, während man sich mit etwas anderem beschäftigt.