Chromecast-App selbst programmieren

Als Google seinen Streaming-Stick Chromecast im Spätsommer 2013 einführte, unterschied sich dieser radikal von anderen HDMI-Streaming-Lösungen auf dem Markt: Statt etablierter Protokolle wie DLNA oder UPnP setzte Google auf einen um die Bedienelemente beraubten Chrome-Browser, der um einen Push-Kanal für die Übertragung von Kommandos erweitert war. Auf eine Fernbedienung verzichtete Google zunächst. Diese Rolle sollte ein Android- oder iOS-Tablet oder Smartphone übernehmen.

In den ersten Wochen war Chromecast auf Googles eigene Dienste Play Movies, Play Music und Youtube beschränkt, es gesellten sich schließlich andere Webdienste hinzu. Seit Veröffentlichung des SDKs für iOS, Android und den Chrome Browser ist es auch möglich, Videos zu streamen, die im lokalen Netz per HTTP bereit gestellt werden. Das sind ideale Voraussetzungen für eigene Hacks, beispielsweise um Musik oder Videos von einer NAS oder einem Raspberry Pi zu Chromecast zu senden.

Kein Streaming im klassischen Sinne

Die Funktionsweise von Chromecast ähnelt stark der von UPnP oder DLNA, es sind bis zu drei Parteien beteiligt: Chromecast selbst stellt die Medien dar (Media Renderer); Tablet, Smartphone oder ein PC mit Chrome-Browser dienen als Fernsteuerung (Control Point); und ein Webserver liefert die Daten aus. Vom Smartphone zu Chromecast werden lediglich Steuerinformationen wie die URL des abzuspielenden Films oder der Pause-Befehl übertragen. Das hat mehrere Vorteile.

Der größte ist, dass beispielsweise ein recht schwaches Smartphone nicht ständig per WLAN senden muss, was daneben die Netzwerklast gering hält - in Szenarien, in denen ein Smartphone sendet, muss das Video zunächst den WLAN-Weg zum Accesspoint nehmen, dieser sendet es zum Streaming-Adapter.

Hinsichtlich der Medienquellen ist Chromecast sehr genügsam: Möchte man nicht on the fly transcodieren, genügt ein Webserver, der das Springen an beliebige Positionen großer Dateien zulässt - Apache und Lighttpd unterstützen dies und überfordern einen Raspberry Pi nicht. Als Medienformate unterstützt Chromecast primär MP3 für Audio, MP4-Container mit H.264-Videospur und MP3-Audiospur, daneben Googles eigene Codecs und Vorbis. Nicht offiziell unterstützt, aber dennoch derzeit nutzbar sind MKV-Container.

Einfacher Start im Chrome-Browser

Wer mit der Softwareentwicklung für Chromecast loslegen möchte, sollte etwas Javascript-Kenntnisse mitbringen - dann ist lediglich Chrome mit der Chromecast-Erweiterung, ein HTTP-Server und ein guter Editor notwendig. Sie müssen weder ein SDK herunterladen noch einen Entwicklerschlüssel beantragen. Winziges Manko der Entwicklung ohne Key: Sie können den Player nicht mit einem eigenen Design versehen - beispielsweise einem Logo, bevor ein Video geladen wird.

Unser Beispiel basiert auf einer offiziellen Demo von Cast Hello Video, dünnt das Javascript aber radikal aus: Weder eine Anzeige von Vorschaubildern im Browser ist vorgesehen noch legen wir Wert auf das Speichern oder Laden einer Session. Mit solchen fortgeschrittenen Methoden ist es später möglich, eine Streaming-Sitzung an einem Gerät zu beenden und an einem anderen wieder aufzunehmen - ohne dass ein Video zwischendrin stoppen würde.

Tipp: In den GitHub-Repositories des Autors finden Sie sowohl die hier vorgestellte Beispielanwendung als auch eine umfangreichere Version mit lokalem Player:

• https://github.com/mschlenker/PC-Magazin
• https://github.com/mschlenker/RollerCaster

Als Beispielvideos sollten Sie zunächst Big Buck Bunny und Elephants Dream von Googles Servern herunterladen. Bei diesen ist sichergestellt, dass sie sowohl im Chrome Browser als auch in Chromecast laufen. Neben den beiden Videos wird nur eine HTML- und eine Javascript-Datei benötigt, für kleine Anzeigetricks ist eine CSS-Datei sinnvoll. Bilder etc. können Sie später ergänzen. Im Beispiel verzichten wir auf einen lokalen Player in der HTML-Seite. Stattdessen verlinken wir auf das Video - Chrome spielt es dann in einem neuen Tab ab.

Im Skript sehen Sie, dass die wichtigsten Bedienelemente vorhanden sind - wenn auch als normale HTML-Formularelemente alles andere als hübsch. Die beiden Buttons Launch app und Stop app dienen dabei der Verbindung der HTML-App mit Chromecast, beziehungsweise der Trennung davon. Erst wenn diese Verbindung hergestellt ist, haben alle anderen Elemente eine Funktion.

Etwas umfangreicher ist das Javascript, weshalb wir uns hier auf die wichtigsten Funktionen konzentrieren. Zunächst gilt es, die Cast-API zu initialisieren. Hier legen wir fest, dass der Default-Receiver (Player ohne eigene Theming-Möglichkeiten) zum Einsatz kommen soll und setzen die Auto- Join-Policy, die festlegt, wann automatisch mit einem bestimmten Chromecast verbunden werden.

Die Funktion chrome.cast.initialize() schließlich übernimmt als zweiten und dritten Parameter Callback-Funktionen für den Erfolgs- und den Fehlerfall. Diese Callback-Funktionen haben wir auf das absolute Minimum ausgedünnt, meist weisen sie nur eine Variable zu oder geben eine Meldung auf der Javascript-Konsole aus. Sie können diese Callback-Funktionen später erweitern, um aussagekräftige Fehler anzuzeigen oder bestimmte Bedienelemente aus- und einzublenden:

function initializeCastApi() { var sessionRequest = new chrome.cast. SessionRequest(chrome.cast.media.DE FAULT_MEDIA_RECEIVER_APP_ID); var apiConfig = new chrome.cast. ApiConfig(sessionRequest, sessionListener, receiverListener, chrome.cast.AutoJoinPolicy.TAB_AND_ ORIGIN_SCOPED); chrome.cast.initialize(apiConfig, on InitSuccess, onError); console.log("Cast API initialized");}

Die eigentliche Verbindungsaufnahme mit der Chromecast wird hergestellt mit:

function launchApp() { console.log(,Launching app...'); chrome.cast.requestSession(onRequest SessionSuccess, onError);}

Um ein Video abzuspielen, muss dieses zunächst von Chromecast geladen werden. Hierfür haben wir eine Funktion loadMedia() definiert, welche eine URL übergeben bekommt. Chromecast versucht, diese URL zu laden und springt zum Anfang des Filmes. In der Callback-Funktion onMediaDiscovered() machen wir es uns einfach und starten unmittelbar das Abspielen des geladenen Films.

Die vom Knopf "Play" getriggerte Funktion playMedia() wiederum ermittelt, welchen Radiobutton der Nutzer angeklickt hat, erzeugt daraus die URL des Videos und ruft damit ruft loadMedia() auf. Hiermit ist die Grundfunktionalität in der allereinfachsten Form komplett:

1. Die API wird initialisiert
2. Die Verbindung zu Chromecast wird hergestellt
3. Beim Klick auf Play wird die URL erzeugt und zur Chromecast geschickt
4. Das Abspielen startet automatisch

Neben play() stellt das mediaSession-Objekt auch Funktionen pause(), resume() und stop() bereit, die einfach zu verdrahten sind. Im Falle von Pause/Fortsetzen verwenden wir hierfür einen Button, der die Beschriftung ändert. Nur wenig aufwendiger ist die Lautstärkeeinstellung: Das API stellt hierfür ein Objekt bereit, das einen Float-Wert zwischen 0 und 1 für die Lautstärke annimmt und darüber hinaus einen Boolean für die Stummschaltung.

Noch viel zu tun

Unser Beispiel führt nur wenige Plausibilitätsprüfungen durch und achtet nicht darauf, aktuell nicht nutzbare Bedienelemente zu deaktivieren. Um das Beispiel besser nutzbar zu machen, sollten Sie zunächst eine Fehlermeldung bringen, wenn es in einem anderen Browser oder in Chrome ohne Chromecast-Erweiterung aufgerufen wird.

Der nächste Schritt sollte sein, in der Funktion initCast() die zu Beginn nicht nutzbaren Bedienelemente zu deaktivieren und diese via Callback zu aktivieren, wenn sie benutzbar sind - beispielsweise die Buttons Play und Stop app erst aktiv zu setzen, wenn die Verbindung zur Chromecast hergestellt ist. Analog machen aktive Buttons Pause und Stop nur Sinn, wenn gerade ein Film abgespielt wird.

Spannend ist die Anzeige eines Fortschrittsbalkens und der aktuellen Stelle des Filmes. Um dies zu bewerkstelligen, müssen Sie Timer einbauen, die in regelmäßigen Abständen das aktualisierte mediaSession-Objekt auslesen und die entsprechenden Elemente im DOM-Tree aktualisieren.

Mit lokalem Player kombiniert

Besonders attraktiv wird die selbst gebaute Streaming-Lösung, wenn man sie mit einem lokalen Player kombiniert, die Steuerung eines HTML5-Video-Objektes soll jedoch nicht Teil dieses Artikels sein. Das zweite offizielle Beispiel nutzt diese Verbindung: Startet man ein Video, wird dieses zunächst lokal abgespielt und nach Verbindung mit einem Chromecast auf dem Fernseher. Genauso einfach ist, mit maximal einer Sekunde Fehler das Zurückholen des abgespielten Videos von Chromecast zum Chrome-Browser.

Angesichts der Tatsache, dass die Chromecast selbst jedem Gerät im Netz Auskunft darüber gibt, ob und was sie gerade abspielt, sind bei entsprechender Programmierung sehr praktische Anwendungen möglich: So können Sie ein Video übers Smartphone aussuchen und an Chromecast und Fernseher mit dem Ansehen beginnen.

Wird es auf dem Sofa ungemütlich, und Sie wollen das Video am Notebook fertig sehen, starten Sie Chrome, verbinden mit der Chromecast und lassen Ihre App fragen, ob die bestehende Sitzung aufgegriffen werden soll. Nach dem Trennen der Geräteverbindung kann der Fernseher ausgeschaltet werden, und der Film läuft lokal weiter.

Zwar ist die Möglichkeit, Chromecast mit mehreren Control Points zu bedienen, für das eben erwähnte Szenario gedacht, sie gibt dem kreativen Programmierer die Möglichkeit, über einen Custom Receiver beispielsweise ein Quiz zu realisieren, das zwei Personen mit dem Smartphone als Heißen Knopf bedienen können.

Denkbar ist, dass als Erklärung für die richtigen Antworten dann nicht nur Text angezeigt wird, sondern Video- und Audio-Einspieler benutzt werden. Eine weitere Anwendungsmöglichkeit des Javascript-APIs ist die Kontrolle von Filmen, die das in letzter Zeit aufkommende Second-Screen-Format implementieren. Hier ist denkbar, dass im Browser nicht nur ergänzende Informationen angezeigt werden, sondern interaktiv Einfluss auf das Geschehen genommen oder die Perspektive gewechselt werden kann.

Tipp: Medien-Apps für Chromecast

Einige praktische Apps eignen sich im Zusammenspiel mit Chromecast.

• Das vielseitige Plex Media Center implementiert die Chromecast-Unterstützung nicht nur als iOS- und Android-App sondern auch per Browser. Wer eine fertige Mediencenterlösung für Linux-Server oder NAS sucht, sollte sich hier umsehen.
• Die Android-App Play to Chromecast streamt verschiedene Videodienste, die noch keine native Googlecast-Unterstützung bieten zur Chromecast.
• Localcast streamt lokal auf dem Handy oder Tablet gespeicherte Fotos und Videos zur Chromecast. Achtung: Wegen ständiger WLAN-Aktivität ist eine gute Netzwerkverbindung und ein voller Akku Voraussetzung.

Fazit

Googles Chromecast überzeugt mit einem aufgeräumten und leicht erlernbaren Javascript-API. Jeder, der bereits erste Erfahrungen mit Responsive Webdesign sammeln konnte, wird sich schnell mit dem API zurechtfinden und kann an Hand der umfangreichen Beispielprogramme leicht Player-Anwendungen fürs eigene Heimnetz oder die eigene Webseite erstellen.

Von der anfänglichen Geschlossenheit auf reines Webstreaming ist heute nichts mehr übrig - auch wenn sich bei vielen Nutzern das Gerücht hartnäckig hält, Chromecast wäre eine entwicklerfeindliche Plattform: Das Gegenteil ist der Fall. Es bleibt als einziges echtes Manko die sehr übersichtliche Codec-Ausstattung, die in vielen Fällen das Transcoding großer Teile der eigenen Video-Sammlung erforderlich machen dürfte, soll diese per Browser Control Point auf dem eigenen Fernseher wiedergegeben werden.