Was passiert, wenn man den Minimalismus einer Web-App mit dem haptischen Erlebnis einer Highend-TV-Fernbedienung kombiniert? Mitte 2024 startete ich mit dem Projekt „anb030 webTV” einen kleinen privaten Versuch. Heute, einige Zeit später, ist daraus auraTiVi geworden: eine Streaming-Oberfläche, die zeigt, wie viel Charme in gerade einmal 38 Kilobyte Code stecken kann. Die Grundidee von auraTiVi ist seit dem 1. Juli 2024 unverändert: Ich wollte eine nicht-kommerzielle Streaming-Lösung für die öffentlich-rechtlichen Sender, die keine Installation, kein langes Setup und keine Store-Gängelung benötigt. Ein Klick im Browser der Wahl oder als Web-App auf dem Home-Bildschirm genügt, und der Stream läuft. Doch während die Basis simpel blieb, hat sich das „Drumherum” massiv gewandelt.

Mit der Version 2.26x hat das Projekt seinen finalen Feinschliff erhalten. Es geht nicht mehr nur darum, dass ein Videostream abgespielt wird, sondern auch darum, wie er präsentiert wird. Der Reiz der schönen Einfachheit. Wie bereits erwähnt, ist es ein nicht-kommerzielles Projekt, das einfach zu bedienen ist und datenschutzkonform keine Nutzerdaten sammelt. Besonders stolz bin ich auf die vielen kleinen Details, die manch einer erst auf den zweiten Blick entdeckt. So befindet sich unter den Kanalwahltasten links bspw. eine kleine Art Display-Anzeige für die nachgezeichneten Senderlogos im Glasmorphismus-Stil. Es sind genau diese optischen Ankerpunkte, die dafür sorgen, dass sich auraTiVi nicht wie ein austauschbarer Webplayer, sondern wie ein eigenständiges Gadget anfühlt.

Das Design: Glasmorphismus trifft auf Retro-Feeling

Beim neugestalten von Icon und Benutzeroberfläche hatte ich eine klare Vision: Es sollte modern und fast schon wie eine premium Oberfläche wirken, aber nicht überladen. Das neue Icon mit seinen leuchtenden Linien in Teal-Blue, angelehnt an das Cosmic-Orange des iPhone 17 Pro, bildet eine stilisierte TV-Silhouette und gibt einen kleinen Vorgeschmack auf das, was einen in der WebApp erwartet.

In der Nutzeroberfläche selbst setzte ich konsequent auf Tiefe. Die Oberfläche ist dunkel und arbeitet stark mit Licht und Schattenwürfen (Neumorphismus lässt grüßen). Dadurch wirken die Buttons nicht wie flache Grafiken, sondern wie physische Bedienelemente, die man am liebsten sofort drücken möchte. Ein dezentes Aufleuchten hier, ein gezielter Farbakzent dort – so werden Highlights gesetzt. Das Ergebnis ist eine UI, die Ruhe ausstrahlt, den Videoplayer ins Zentrum rückt und eine logische, intuitive Steuerung ermöglicht.

Die dynamische Kanalleiste zum Wischen und Antippen am unteren Rand fügt sich dabei nahtlos ein und erlaubt schnelle Wechsel, ohne das Bild zu stören. Da mein Fokus klar auf der mobilen Nutzung lag, war es mein Ziel, die Benutzeroberfläche bestmöglich auf größere Displays, wie bspw. das iPad oder den Desktop, zu übertragen, damit das Projekt auch dort gut aussieht.

Unter der Haube: Schlank, flexibel und ehrlich

Technisch gesehen ist auraTiVi ein Leichtgewicht. Das gesamte Projekt kommt ohne ein schwerfälliges Backend aus. Es wird lediglich eine HTML-Datei und eine externe M3U-Datei benötigt. Okay, die selbst gestrickten Sender-Logos und das App-Icon kommen natürlich auch noch dazu, damit hat das gesamte Projekt eine Größe von fast 2 MB. Die Sender-Streams werden dabei beim Start dynamisch aus der m3u-Datei geladen. Das macht die Wartung extrem einfach: Änderungen an der Senderliste können direkt in der m3u-Datei vorgenommen werden, ohne dass der Haupt-Code angefasst werden muss. Hier muss man natürlich ehrlich sein: Die Nutzung solcher M3U-Listen und die Einbindung von Senderlogos bewegen sich oft in einer rechtlichen Grauzone. Ich greife hierbei auf frei zugängliche Open-Source-Quellen zurück, wie sie bspw. auf GitHub für M3U’s und Logos zu finden sind. Es ist ein Community-getriebener Ansatz, der dadurch meine WebApp flexibel hält.

Apropos: Um auch rechtlich auf der sicheren Seite zu stehen, habe ich mich gegen die Nutzung urheberrechtlich geschützter Original-Senderlogos entschieden und stattdessen einen kreativen Umweg gewählt. Ich habe sämtliche Sender-Logos neu interpretiert. Mithilfe der iOS-App „GoDaddy Studio” sind die Icons in einem modernen Glasmorphismus-Comic-Stil entstanden. Um die Performance der auraTiVi-WebApp nicht zu gefährden, habe ich diese Entwürfe über meine eigens dafür entwickelte WebApp „WebPify” gejagt. Das Ergebnis: Meine klobigen Original-PNGs wurden durch hochoptimierte WebP-Dateien ersetzt. Diese verleihen auraTiVi nicht nur einen einzigartigen Look, sondern halten auch die Ladezeiten minimal.

Die Wiedergabe selbst läuft über HLS (HTTP Live Streaming) und ist auf Stabilität ausgelegt. Ein Feature, das mir besonders am Herzen lag, ist der eigens entwickelte Vollbildmodus. Anstatt die Standardlösung des Smartphone-Browsers zu nutzen, habe ich eine eigene Logik implementiert. Das macht besonders auf dem Smartphone den Unterschied: Das Gerät ist frei drehbar und die Oberfläche passt sich geschmeidig an – echtes TV-Feeling eben. 

Am Desktop kann selbstverständlich auch die Tastatur zur Bedienung genutzt werden. So kann man bspw. mit den „Pfeiltasten“ durch die Kanäle wechseln. Der Ton lässt sich per „M“-Taste ein- oder ausschalten, die Untertitel per „U“-Taste. Die Wiedergabe bzw. Pause kann über die „Leertaste“ gesteuert werden und das Vollbild kann über die „F“-Taste geöffnet und mit der „Esc“-Taste wieder geschlossen werden.

Zusammengefasst: klein, offen und auf GitHub.

Mit Version 2.26x fühlt sich auraTiVi für mich zum ersten Mal wirklich „rund“ an. Sie ist der Beweis, dass eine WebApp nicht groß sein muss, um eine hochwertige User Experience zu bieten. Trotz aller optischen Spielereien ist meine Anwendung schlank geblieben und hat ihren Fokus dabei nicht verloren. Am Ende ist auraTiVi genau das, was ich mir am Anfang vorgestellt hatte: eine digitale Fernbedienung für den Browser, die verdammt gut aussieht und einfach funktioniert.

Wer mein Projekt privat verwenden möchte, findet es auf GitHub. Es liegt dort mit einer von mir gewählten Creative-Commons-Lizenz (CC BY-NC 4.0). 

auraTiVi ist eine Web-App zur Wiedergabe externer Streaming-Quellen. Im Mittelpunkt stehen die technische Machbarkeit sowie die Demonstration einer modernen, plattformübergreifenden Umsetzung im Web mit einer ansprechenden Benutzeroberfläche. Für Demonstrationszwecke nutzt das Projekt externe, öffentlich zugängliche Open-Source-Datenquellen, die von der Community gepflegt werden. Die Verarbeitung erfolgt ausschließlich exemplarisch im Rahmen dieser Machbarkeitsstudie. Für die Inhalte der verwendeten externen Datenquellen – einschließlich communitygepflegter Open-Source-Listen auf Plattformen wie GitHub – sind ausschließlich die jeweiligen Anbieter verantwortlich.

Ich bin ein „Ein-Personen-Betrieb“, arbeite hauptberuflich im Gesundheitswesen und betreibe diese Seite als Hobbyprojekt in meiner Freizeit. Wenn Ihnen meine Arbeit gefällt (die Beiträge, die Hintergrundbilder, mein allgemeines Auftreten … einfach alles), so dürfen Sie gerne in Erwägung ziehen, mir eine kleine Spende für zum Beispiel einen Café ☕️ per PayPal.com zukommen zu lassen! Ihre Beteiligung ist unglaublich wertvoll und trägt viel zur Unterstützung und Erhalt dieser werbefreien Seite bei!

Unterstützen

André K. ist der Autor dieses Blogartikels.