Für Google Cast optimierte Web-App

1. Übersicht

In diesem Codelab erfahren Sie, wie Sie eine vorhandene Webvideo-App so ändern, dass Inhalte auf einem für Google Cast optimierten Gerät wiedergegeben werden.

Was ist Google Cast?

Mit Google Cast können Nutzer Inhalte von einem Mobilgerät auf einen Fernseher streamen. Nutzer können ihr Mobilgerät dann als Fernbedienung für die Medienwiedergabe auf dem Fernseher verwenden.

Mit dem Google Cast SDK können Sie Ihre App erweitern, um einen Fernseher oder ein Soundsystem zu steuern. Mit dem Cast SDK können Sie die erforderlichen UI-Komponenten basierend auf der Google Cast-Design-Checkliste hinzufügen.

Die Google Cast-Design-Checkliste soll dafür sorgen, dass die Cast-User Experience auf allen unterstützten Plattformen einfach und vorhersehbar ist.

Ziele

Nach Abschluss dieses Codelabs haben Sie eine Chrome-Webvideo-App, mit der Sie Videos auf ein Google Cast-Gerät streamen können.

Lerninhalte

• So fügen Sie das Google Cast SDK einer Beispiel-Video-App hinzu.
• So fügen Sie die Schaltfläche „Streamen“ zum Auswählen eines Google Cast-Geräts hinzu.
• Verbindung zu einem Übertragungsgerät herstellen und einen Media Receiver starten
• So streamst du ein Video.
• Cast Connect einbinden

Voraussetzungen

• Die aktuelle Version des Browsers Google Chrome.
• Ein HTTPS-Hostingdienst wie Firebase Hosting oder ngrok.
• Ein Google Cast-Gerät wie ein Chromecast oder Android TV, das für den Internetzugriff konfiguriert ist.
• Einen Fernseher oder Monitor mit HDMI-Eingang
• Für das Testen der Cast Connect-Integration ist ein Chromecast mit Google TV erforderlich. Für den Rest des Codelabs ist er optional. Wenn Sie keine haben, können Sie den Schritt Cast Connect-Unterstützung hinzufügen am Ende dieser Anleitung überspringen.

Erfahrung

• Sie benötigen Vorkenntnisse in der Webentwicklung.
• Außerdem sollten Sie sich mit dem Fernsehen auskennen :)

Probleme mit dem Netzwerk?

Wenn Sie sich an einem Ort befinden, an dem das WLAN nicht zuverlässig ist, kann das Chromecast-Gerät über einen Ethernet-Adapter für Chromecast oder für Chromecast mit Google TV verbunden werden.

Wie werden Sie diese Anleitung verwenden?

Nur lesen Lesen und Übungen durchführen

Wie würden Sie Ihre Erfahrung mit der Entwicklung von Web-Apps bewerten?

Anfänger Mittelstufe Fortgeschrittene

Wie würdest du deine Erfahrung beim Fernsehen bewerten?

Anfänger Mittelstufe Fortgeschritten

2. Beispielcode abrufen

Sie können den gesamten Beispielcode auf Ihren Computer herunterladen…

Quellcode herunterladen

und entpacken Sie die heruntergeladene ZIP-Datei.

Das Codelab-Repository „cast-videos-cast“ enthält zwei Beispielprojekte:

• app-start: Der Startcode, auf dem Sie in diesem Codelab aufbauen.
• app-done: Das ist der vollständige Code der fertigen Beispiel-Video-App.

3. Beispiel-App ausführen

Sehen wir uns zuerst an, wie die fertige Beispiel-App aussieht. Die App ist ein einfacher Videoplayer. Der Nutzer kann ein Video aus einer Liste auswählen und es dann lokal auf dem Gerät abspielen oder auf ein Google Cast-Gerät streamen.

Damit Sie das Projekt nutzen können, muss es gehostet werden.

Wenn Sie keinen Server zur Verfügung haben, können Sie Firebase Hosting oder ngrok verwenden.

Server ausführen

Nachdem Sie den gewünschten Dienst eingerichtet haben, rufen Sie app-done auf und starten Sie den Server.

Rufen Sie in Ihrem Browser die HTTPS-URL für das gehostete Beispiel auf.

1. Die Video-App sollte angezeigt werden.
2. Klicken Sie auf das Cast-Symbol und wählen Sie Ihr Google Cast-Gerät aus.
3. Wählen Sie ein Video aus und klicken Sie auf die Wiedergabeschaltfläche.
4. Die Wiedergabe des Videos beginnt auf deinem Google Cast-Gerät.

Klicke im Videoelement auf die Pausenschaltfläche, um das Video auf dem Empfängergerät zu pausieren. Klicken Sie im Videoelement auf die Wiedergabeschaltfläche, um das Video wieder abzuspielen.

Klicke auf das Cast-Symbol, um das Streamen auf das Google Cast-Gerät zu beenden.

Bevor wir fortfahren, stoppen Sie den Server.

4. Startprojekt vorbereiten

Wir müssen der heruntergeladenen Start-App Unterstützung für Google Cast hinzufügen. Hier sind einige Google Cast-Begriffe, die in diesem Codelab verwendet werden:

• Eine Absender-App wird auf einem Mobilgerät oder Laptop ausgeführt.
• Auf dem Google Cast-Gerät wird eine Receiver-App ausgeführt.

Jetzt können Sie mit Ihrem bevorzugten Texteditor auf dem Starterprojekt aufbauen:

1. Wählen Sie das Verzeichnis app-start aus dem Download des Beispielcodes aus.
2. Führen Sie die App mit Ihrem Server aus und sehen Sie sich die Benutzeroberfläche an.

Hinweis: Wenn Sie dieses Codelab durcharbeiten, müssen Sie das Beispiel je nach Dienst auf Ihrem Server neu hosten.

App-Design

Die App ruft eine Liste von Videos von einem Remote-Webserver ab und stellt dem Nutzer eine Liste zum Durchsuchen zur Verfügung. Nutzer können ein Video auswählen, um die Details aufzurufen oder das Video lokal auf dem Mobilgerät abzuspielen.

Die App besteht aus einer Hauptansicht, die in index.html definiert ist, und dem Hauptcontroller CastVideos.js..

index.html

In dieser HTML-Datei wird fast die gesamte Benutzeroberfläche der Web-App deklariert.

Es gibt einige Abschnitte mit Ansichten. Wir haben div#main_video, das das Videoelement enthält. Im Zusammenhang mit unserem Video-Div haben wir div#media_control, das alle Steuerelemente für das Videoelement definiert. Darunter befindet sich media_info, in dem die Details des angezeigten Videos zu sehen sind. Schließlich wird im carousel-Div eine Liste von Videos angezeigt.

Die Datei index.html startet auch das Cast SDK und weist die Funktion CastVideos an, geladen zu werden.

Der Großteil der Inhalte, die in diesen Elementen angezeigt werden, wird in CastVideos.js definiert, eingefügt und gesteuert. Sehen wir uns das mal an.

CastVideos.js

Dieses Skript verwaltet die gesamte Logik für die Cast-Videos-Web-App. Die Liste der Videos und der zugehörigen Metadaten, die in CastVideos.js definiert sind, ist in einem Objekt mit dem Namen mediaJSON enthalten.

Es gibt einige wichtige Abschnitte, die zusammen für die Verwaltung und Wiedergabe des Videos sowohl lokal als auch remote verantwortlich sind. Insgesamt ist dies eine recht einfache Webanwendung.

CastPlayer ist die Hauptklasse, die die gesamte App verwaltet, den Player einrichtet, Medien auswählt und Ereignisse an PlayerHandler bindet, um Medien abzuspielen. CastPlayer.prototype.initializeCastPlayer ist die Methode, mit der alle Cast-Funktionen eingerichtet werden. Mit CastPlayer.prototype.switchPlayer wird zwischen lokalen und Remote-Playern gewechselt. Mit CastPlayer.prototype.setupLocalPlayer und CastPlayer.prototype.setupRemotePlayer werden lokale und Remote-Spieler initialisiert.

PlayerHandler ist die Klasse, die für die Verwaltung der Medienwiedergabe zuständig ist. Es gibt eine Reihe weiterer Methoden, die für die Details der Medienverwaltung und ‑wiedergabe verantwortlich sind.

Cast-Dokumentation?

Wir haben eine umfassende Dokumentation für iOS-, Android- und Chrome-Absender.

Häufig gestellte Fragen

• Was ist Google Cast?
• Wie werde ich Google Cast-Entwickler?

5. Cast-Symbol hinzufügen

In einer für Google Cast optimierten Anwendung wird das Cast-Symbol im Videoelement angezeigt. Wenn ein Nutzer auf das Cast-Symbol klickt, wird eine Liste mit Cast-Geräten angezeigt, die er auswählen kann. Wenn der Nutzer Inhalte lokal auf dem Absendergerät wiedergegeben hat, wird die Wiedergabe auf dem ausgewählten Übertragungsgerät gestartet oder fortgesetzt. Der Nutzer kann während einer Cast-Sitzung jederzeit auf das Cast-Symbol klicken und die Übertragung Ihrer Anwendung auf das Cast-Gerät beenden. Der Nutzer muss sich auf jedem Bildschirm Ihrer Anwendung mit dem Cast-Gerät verbinden oder die Verbindung trennen können, wie in der Google Cast Design Checklist beschrieben.

Konfiguration

Für das Startprojekt sind dieselben Abhängigkeiten und dieselbe Einrichtung erforderlich wie für die fertige Beispiel-App. Diesmal müssen Sie jedoch den Inhalt von app-start hosten.

Rufen Sie in Ihrem Browser die https-URL für das gehostete Beispiel auf.

Denken Sie daran, dass Sie das Beispiel je nach Dienst auf Ihrem Server neu hosten müssen, wenn Sie Änderungen vornehmen.

Initialisierung

Das Cast-Framework hat ein globales Singleton-Objekt, das CastContext, das alle Aktivitäten des Frameworks koordiniert. Dieses Objekt muss früh im Lebenszyklus der Anwendung initialisiert werden. Es wird in der Regel über einen Callback aufgerufen, der window['__onGCastApiAvailable'] zugewiesen ist. Dieser Callback wird aufgerufen, nachdem das Cast SDK geladen wurde und verwendet werden kann. In diesem Fall wird CastContext in CastPlayer.prototype.initializeCastPlayer aufgerufen, das vom oben genannten Callback aufgerufen wird.

Bei der Initialisierung von CastContext muss ein options-JSON-Objekt angegeben werden. Diese Klasse enthält Optionen, die sich auf das Verhalten des Frameworks auswirken. Die wichtigste davon ist die Empfängeranwendungs-ID. Sie wird verwendet, um die Liste der verfügbaren Cast-Geräte zu filtern und nur Geräte anzuzeigen, auf denen die angegebene App ausgeführt werden kann. Außerdem wird die Empfängeranwendung gestartet, wenn eine Cast-Sitzung beginnt.

Wenn Sie Ihre eigene für Google Cast optimierte App entwickeln, müssen Sie sich als Cast-Entwickler registrieren und dann eine Anwendungs-ID für Ihre App erhalten. In diesem Codelab verwenden wir eine Beispiel-App-ID.

Wie werde ich Cast-Entwickler?

Wenn Sie sich in der Google Cast Developer Console registrieren, erhalten Sie eine Anwendungs-ID für Ihre App.

Fügen Sie den folgenden Code in index.html ganz am Ende des body-Abschnitts ein:

<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

Fügen Sie den folgenden Code zu index.html hinzu, um die CastVideos-App und die CastContext zu initialisieren:

<script src="CastVideos.js"></script>
<script type="text/javascript">
var castPlayer = new CastPlayer();
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    castPlayer.initializeCastPlayer();
  }
};
</script>

Jetzt müssen wir in CastVideos.js eine neue Methode hinzufügen, die der Methode entspricht, die wir gerade in index.html aufgerufen haben. Fügen wir eine neue Methode namens initializeCastPlayer hinzu, die Optionen für CastContext festlegt und neue RemotePlayer und RemotePlayerControllers initialisiert:

/**
 * This method sets up the CastContext, and a few other members
 * that are necessary to play and control videos on a Cast
 * device.
 */
CastPlayer.prototype.initializeCastPlayer = function() {

    var options = {};

    // Set the receiver application ID to your own (created in
    // the Google Cast Developer Console), or optionally
    // use the chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
    options.receiverApplicationId = 'C0868879';

    // Auto join policy can be one of the following three:
    // ORIGIN_SCOPED - Auto connect from same appId and page origin
    // TAB_AND_ORIGIN_SCOPED - Auto connect from same appId, page origin, and tab
    // PAGE_SCOPED - No auto connect
    options.autoJoinPolicy = chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED;

    cast.framework.CastContext.getInstance().setOptions(options);

    this.remotePlayer = new cast.framework.RemotePlayer();
    this.remotePlayerController = new cast.framework.RemotePlayerController(this.remotePlayer);
    this.remotePlayerController.addEventListener(
        cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED,
        this.switchPlayer.bind(this)
    );
};

Schließlich müssen wir die Variablen für RemotePlayer und RemotePlayerController erstellen:

var CastPlayer = function() {
  //...
  /* Cast player variables */
  /** @type {cast.framework.RemotePlayer} */
  this.remotePlayer = null;
  /** @type {cast.framework.RemotePlayerController} */
  this.remotePlayerController = null;
  //...
};

Cast-Symbol

Nachdem CastContext initialisiert wurde, müssen wir die Schaltfläche „Streamen“ hinzufügen, damit der Nutzer ein Streaminggerät auswählen kann. Das Cast SDK bietet eine Cast-Schaltflächenkomponente namens google-cast-launcher mit der ID „castbutton"“. Sie kann dem Videoelement der Anwendung hinzugefügt werden, indem einfach ein button im Bereich media_control hinzugefügt wird.

So sieht das Schaltflächenelement aus:

<google-cast-launcher id="castbutton"></google-cast-launcher>

Fügen Sie den folgenden Code in index.html im Abschnitt media_control ein:

<div id="media_control">
  <div id="play"></div>
  <div id="pause"></div>
  <div id="progress_bg"></div>
  <div id="progress"></div>
  <div id="progress_indicator"></div>
  <div id="fullscreen_expand"></div>
  <div id="fullscreen_collapse"></div>
  <google-cast-launcher id="castbutton"></google-cast-launcher>
  <div id="audio_bg"></div>
  <div id="audio_bg_track"></div>
  <div id="audio_indicator"></div>
  <div id="audio_bg_level"></div>
  <div id="audio_on"></div>
  <div id="audio_off"></div>
  <div id="duration">00:00:00</div>
</div>

Aktualisieren Sie die Seite in Ihrem Chrome-Browser. Im Videoelement sollte ein Cast-Symbol angezeigt werden. Wenn Sie darauf klicken, werden die Cast-Geräte in Ihrem lokalen Netzwerk aufgelistet. Die Geräteerkennung wird automatisch vom Chrome-Browser verwaltet. Wählen Sie Ihr Übertragungsgerät aus. Die Beispiel-Receiver-App wird auf dem Übertragungsgerät geladen.

Wir haben noch keine Unterstützung für die Medienwiedergabe eingerichtet, daher können Sie noch keine Videos auf dem Cast-Gerät abspielen. Klicke auf das Cast-Symbol, um das Streamen zu beenden.

6. Videoinhalte streamen

Wir werden die Beispiel-App so erweitern, dass Videos auch auf einem Cast-Gerät wiedergegeben werden können. Dazu müssen wir auf die verschiedenen Ereignisse achten, die vom Cast-Framework generiert werden.

Medien streamen

Wenn Sie Medien auf einem Cast-Gerät abspielen möchten, muss Folgendes passieren:

1. Erstellen Sie ein MediaInfo-JSON-Objekt aus dem Cast SDK, das ein Media-Element modelliert.
2. Der Nutzer stellt eine Verbindung zum Cast-Gerät her, um deine Empfängeranwendung zu starten.
3. Lade das MediaInfo-Objekt auf deinen Empfänger und spiele die Inhalte ab.
4. Medienstatus verfolgen
5. Sende Wiedergabebefehle basierend auf Nutzerinteraktionen an den Empfänger.

In Schritt 1 wird ein Objekt einem anderen zugeordnet. MediaInfo ist etwas, das das Cast SDK versteht, und mediaJSON ist die Kapselung unserer App für ein Media-Element. Wir können mediaJSON ganz einfach MediaInfo zuordnen. Schritt 2 haben wir bereits im vorherigen Abschnitt ausgeführt. Schritt 3 ist mit dem Cast SDK ganz einfach.

In der Beispiel-App CastPlayer wird in der Methode switchPlayer bereits zwischen lokaler und Remote-Wiedergabe unterschieden:

if (cast && cast.framework) {
  if (this.remotePlayer.isConnected) {
    //...

In diesem Codelab ist es nicht wichtig, dass Sie genau verstehen, wie die gesamte Beispiel-Player-Logik funktioniert. Es ist jedoch wichtig zu wissen, dass der Media Player Ihrer App so geändert werden muss, dass er sowohl die lokale als auch die Remote-Wiedergabe erkennt.

Der lokale Player befindet sich derzeit immer im lokalen Wiedergabestatus, da er noch nichts über die Streaming-Status weiß. Wir müssen die Benutzeroberfläche basierend auf Statusübergängen im Cast-Framework aktualisieren. Wenn wir beispielsweise mit dem Streamen beginnen, müssen wir die lokale Wiedergabe beenden und einige Steuerelemente deaktivieren. Wenn wir das Casting beenden, während wir uns in diesem Ansichtscontroller befinden, müssen wir zur lokalen Wiedergabe wechseln. Dazu müssen wir auf die verschiedenen Ereignisse achten, die vom Cast-Framework generiert werden.

Verwaltung von Cast-Sitzungen

Im Cast-Framework werden die Schritte zum Herstellen einer Verbindung zu einem Gerät, zum Starten (oder Beitreten einer vorhandenen Sitzung), zum Herstellen einer Verbindung zu einer Receiver-Anwendung und zum Initialisieren eines Mediensteuerung-Channels (falls erforderlich) in einer Cast-Sitzung zusammengefasst. Über den Media Control Channel werden Nachrichten zur Medienwiedergabe zwischen dem Cast-Framework und dem Receiver gesendet und empfangen.

Die Cast-Sitzung wird automatisch gestartet, wenn der Nutzer über die Cast-Schaltfläche ein Gerät auswählt, und automatisch beendet, wenn der Nutzer die Verbindung trennt. Auch das erneute Herstellen einer Verbindung zu einer Empfängersitzung aufgrund von Netzwerkproblemen wird automatisch vom Cast-Framework übernommen.

Cast-Sitzungen werden von CastSession verwaltet, auf die über cast.framework.CastContext.getInstance().getCurrentSession() zugegriffen werden kann. Mit den EventListener-Callbacks können Sie Sitzungsereignisse wie Erstellung, Unterbrechung, Fortsetzung und Beendigung überwachen.

In unserer aktuellen Anwendung wird die gesamte Sitzungs- und Statusverwaltung für uns in der Methode setupRemotePlayer übernommen. Fügen Sie dazu Ihrer CastVideos.js den folgenden Code hinzu:

/**
 * Set the PlayerHandler target to use the remote player
 */
CastPlayer.prototype.setupRemotePlayer = function () {
    var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

    this.playerHandler.setTarget(playerTarget);

    // Setup remote player volume right on setup
    // The remote player may have had a volume set from previous playback
    if (this.remotePlayer.isMuted) {
        this.playerHandler.mute();
    }
    var currentVolume = this.remotePlayer.volumeLevel * FULL_VOLUME_HEIGHT;
    var p = document.getElementById('audio_bg_level');
    p.style.height = currentVolume + 'px';
    p.style.marginTop = -currentVolume + 'px';

    this.hideFullscreenButton();

    this.playerHandler.play();
};

Wir müssen weiterhin alle Ereignisse aus den Rückrufen binden und alle eingehenden Ereignisse verarbeiten. Das ist ganz einfach. So gehts:

/**
 * Set the PlayerHandler target to use the remote player
 */
CastPlayer.prototype.setupRemotePlayer = function () {
    var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

    // Add event listeners for player changes which may occur outside sender app
    this.remotePlayerController.addEventListener(
        cast.framework.RemotePlayerEventType.IS_PAUSED_CHANGED,
        function() {
            if (this.remotePlayer.isPaused) {
                this.playerHandler.pause();
            } else {
                this.playerHandler.play();
            }
        }.bind(this)
    );

    this.remotePlayerController.addEventListener(
        cast.framework.RemotePlayerEventType.IS_MUTED_CHANGED,
        function() {
            if (this.remotePlayer.isMuted) {
                this.playerHandler.mute();
            } else {
                this.playerHandler.unMute();
            }
        }.bind(this)
    );

    this.remotePlayerController.addEventListener(
        cast.framework.RemotePlayerEventType.VOLUME_LEVEL_CHANGED,
        function() {
            var newVolume = this.remotePlayer.volumeLevel * FULL_VOLUME_HEIGHT;
            var p = document.getElementById('audio_bg_level');
            p.style.height = newVolume + 'px';
            p.style.marginTop = -newVolume + 'px';
        }.bind(this)
    );

    // This object will implement PlayerHandler callbacks with
    // remotePlayerController, and makes necessary UI updates specific
    // to remote playback
    var playerTarget = {};

    playerTarget.play = function () {
        if (this.remotePlayer.isPaused) {
            this.remotePlayerController.playOrPause();
        }

        var vi = document.getElementById('video_image');
        vi.style.display = 'block';
        var localPlayer = document.getElementById('video_element');
        localPlayer.style.display = 'none';
    }.bind(this);

    playerTarget.pause = function () {
        if (!this.remotePlayer.isPaused) {
            this.remotePlayerController.playOrPause();
        }
    }.bind(this);

    playerTarget.stop = function () {
         this.remotePlayerController.stop();
    }.bind(this);

    playerTarget.getCurrentMediaTime = function() {
        return this.remotePlayer.currentTime;
    }.bind(this);

    playerTarget.getMediaDuration = function() {
        return this.remotePlayer.duration;
    }.bind(this);

    playerTarget.updateDisplayMessage = function () {
        document.getElementById('playerstate').style.display = 'block';
        document.getElementById('playerstatebg').style.display = 'block';
        document.getElementById('video_image_overlay').style.display = 'block';
        document.getElementById('playerstate').innerHTML =
            this.mediaContents[ this.currentMediaIndex]['title'] + ' ' +
            this.playerState + ' on ' + castSession.getCastDevice().friendlyName;
    }.bind(this);

    playerTarget.setVolume = function (volumeSliderPosition) {
        // Add resistance to avoid loud volume
        var currentVolume = this.remotePlayer.volumeLevel;
        var p = document.getElementById('audio_bg_level');
        if (volumeSliderPosition < FULL_VOLUME_HEIGHT) {
            var vScale =  this.currentVolume * FULL_VOLUME_HEIGHT;
            if (volumeSliderPosition > vScale) {
                volumeSliderPosition = vScale + (pos - vScale) / 2;
            }
            p.style.height = volumeSliderPosition + 'px';
            p.style.marginTop = -volumeSliderPosition + 'px';
            currentVolume = volumeSliderPosition / FULL_VOLUME_HEIGHT;
        } else {
            currentVolume = 1;
        }
        this.remotePlayer.volumeLevel = currentVolume;
        this.remotePlayerController.setVolumeLevel();
    }.bind(this);

    playerTarget.mute = function () {
        if (!this.remotePlayer.isMuted) {
            this.remotePlayerController.muteOrUnmute();
        }
    }.bind(this);

    playerTarget.unMute = function () {
        if (this.remotePlayer.isMuted) {
            this.remotePlayerController.muteOrUnmute();
        }
    }.bind(this);

    playerTarget.isMuted = function() {
        return this.remotePlayer.isMuted;
    }.bind(this);

    playerTarget.seekTo = function (time) {
        this.remotePlayer.currentTime = time;
        this.remotePlayerController.seek();
    }.bind(this);

    this.playerHandler.setTarget(playerTarget);

    // Setup remote player volume right on setup
    // The remote player may have had a volume set from previous playback
    if (this.remotePlayer.isMuted) {
        this.playerHandler.mute();
    }
    var currentVolume = this.remotePlayer.volumeLevel * FULL_VOLUME_HEIGHT;
    var p = document.getElementById('audio_bg_level');
    p.style.height = currentVolume + 'px';
    p.style.marginTop = -currentVolume + 'px';

    this.hideFullscreenButton();

    this.playerHandler.play();
};

Medien werden geladen

Im Cast SDK bieten die RemotePlayer- und RemotePlayerController-Klassen eine Reihe praktischer APIs zum Verwalten der Remote-Medienwiedergabe auf dem Empfängergerät. Für ein CastSession, das die Medienwiedergabe unterstützt, werden Instanzen von RemotePlayer und RemotePlayerController automatisch vom SDK erstellt. Sie können darauf zugreifen, indem Sie Instanzen von cast.framework.RemotePlayer und cast.framework.RemotePlayerController erstellen, wie weiter oben im Codelab gezeigt.

Als Nächstes müssen wir das aktuell ausgewählte Video auf dem Empfängergerät laden. Dazu erstellen wir ein MediaInfo-Objekt, das vom SDK verarbeitet und in die Anfrage eingefügt wird. Fügen Sie setupRemotePlayer den folgenden Code hinzu:

/**
 * Set the PlayerHandler target to use the remote player
 */
CastPlayer.prototype.setupRemotePlayer = function () {
    //...

    playerTarget.load = function (mediaIndex) {
        console.log('Loading...' + this.mediaContents[mediaIndex]['title']);
        var mediaInfo = new chrome.cast.media.MediaInfo(
            this.mediaContents[mediaIndex]['sources'][0], 'video/mp4');

        mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
        mediaInfo.metadata.metadataType = chrome.cast.media.MetadataType.GENERIC;
        mediaInfo.metadata.title = this.mediaContents[mediaIndex]['title'];
        mediaInfo.metadata.images = [
            {'url': MEDIA_SOURCE_ROOT + this.mediaContents[mediaIndex]['thumb']}];

        var request = new chrome.cast.media.LoadRequest(mediaInfo);
        castSession.loadMedia(request).then(
            this.playerHandler.loaded.bind(this.playerHandler),
            function (errorCode) {
                this.playerState = PLAYER_STATE.ERROR;
                console.log('Remote media load error: ' +
                    CastPlayer.getErrorMessage(errorCode));
            }.bind(this));
    }.bind(this);

    //...
};

Fügen Sie nun eine Methode hinzu, um zwischen lokaler und Remote-Wiedergabe zu wechseln:

/**
 * This is a method for switching between the local and remote
 * players. If the local player is selected, setupLocalPlayer()
 * is run. If there is a cast device connected we run
 * setupRemotePlayer().
 */
CastPlayer.prototype.switchPlayer = function() {
    this.stopProgressTimer();
    this.resetVolumeSlider();
    this.playerHandler.stop();
    this.playerState = PLAYER_STATE.IDLE;
    if (cast && cast.framework) {
        if (this.remotePlayer.isConnected) {
            this.setupRemotePlayer();
            return;
        }
    }
    this.setupLocalPlayer();
};

Fügen Sie schließlich eine Methode zum Verarbeiten von Cast-Fehlermeldungen hinzu:

/**
 * Makes human-readable message from chrome.cast.Error
 * @param {chrome.cast.Error} error
 * @return {string} error message
 */
CastPlayer.getErrorMessage = function(error) {
  switch (error.code) {
    case chrome.cast.ErrorCode.API_NOT_INITIALIZED:
      return 'The API is not initialized.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.CANCEL:
      return 'The operation was canceled by the user' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.CHANNEL_ERROR:
      return 'A channel to the receiver is not available.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.EXTENSION_MISSING:
      return 'The Cast extension is not available.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.INVALID_PARAMETER:
      return 'The parameters to the operation were not valid.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.RECEIVER_UNAVAILABLE:
      return 'No receiver was compatible with the session request.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.SESSION_ERROR:
      return 'A session could not be created, or a session was invalid.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.TIMEOUT:
      return 'The operation timed out.' +
        (error.description ? ' :' + error.description : '');
  }
};

Führen Sie die App nun aus, stellen Sie eine Verbindung zu Ihrem Cast-Gerät her und starten Sie die Wiedergabe eines Videos. Das Video sollte jetzt auf dem Empfängergerät wiedergegeben werden.

7. Cast Connect-Unterstützung hinzufügen

Mit der Cast Connect-Mediathek können vorhandene Senderanwendungen über das Cast-Protokoll mit Android TV-Anwendungen kommunizieren. Cast Connect basiert auf der Cast-Infrastruktur. Ihre Android TV-App fungiert dabei als Empfänger.

Abhängigkeiten

• Chrome-Browser ab Version M87

Android-Receiver kompatibel machen

Damit die Android TV-Anwendung, auch als Android-Receiver bezeichnet, gestartet werden kann, muss das Flag androidReceiverCompatible im CastOptions-Objekt auf „true“ gesetzt werden.

Fügen Sie Ihrer CastVideos.js-Datei den folgenden Code in die initializeCastPlayer-Funktion ein:

var options = {};
...
options.androidReceiverCompatible = true;

cast.framework.CastContext.getInstance().setOptions(options);

Hinweis: Wenn Sie diese Funktion mit dem bereitgestellten app-done-Projekt testen möchten, legen Sie das oben erwähnte androidReceiverCompatible-Flag vor dem Ausführen auf true fest.

Startanmeldedaten festlegen

Auf der Senderseite können Sie CredentialsData angeben, um darzustellen, wer der Sitzung beitritt. credentials ist ein String, der vom Nutzer definiert werden kann, sofern Ihre ATV-App ihn interpretieren kann. Der CredentialsData wird nur beim Start oder beim Beitreten an Ihre Android TV-App übergeben. Wenn Sie die Einstellung noch einmal festlegen, während Sie verbunden sind, wird sie nicht an Ihre Android TV-App übergeben.

Damit Sie Startanmeldedaten festlegen können, muss CredentialsData jederzeit nach dem Festlegen der Startoptionen definiert werden.

Fügen Sie der Klasse CastVideos.js unter der Funktion initializeCastPlayer den folgenden Code hinzu:

cast.framework.CastContext.getInstance().setOptions(options);
...
let credentialsData = new chrome.cast.CredentialsData("{\"userId\": \"abc\"}");
cast.framework.CastContext.getInstance().setLaunchCredentialsData(credentialsData);
...

Anmeldedaten für die Ladeanfrage festlegen

Wenn Ihre Web Receiver-App und Ihre Android TV-App credentials unterschiedlich verarbeiten, müssen Sie möglicherweise separate Anmeldedaten für jede App definieren. Fügen Sie dazu den folgenden Code in Ihre CastVideos.js-Datei unter playerTarget.load in der Funktion setupRemotePlayer ein:

...
var request = new chrome.cast.media.LoadRequest(mediaInfo);
request.credentials = 'user-credentials';
request.atvCredentials = 'atv-user-credentials';
...

Je nachdem, auf welche Empfänger-App der Absender streamt, wird im SDK jetzt automatisch festgelegt, welche Anmeldedaten für die aktuelle Sitzung verwendet werden.

Cast Connect testen

Hinweis: Um diese Funktion zu testen, müssen Sie die Android TV-APK auf Ihrem Chromecast mit Google TV installieren. Falls noch nicht geschehen, folgen Sie auf Ihrem Chromecast mit Google TV den Schritten unter Für die Entwicklung einrichten.

So installierst du die Android TV-APK auf dem Chromecast mit Google TV:

1. Finde die IP-Adresse deines Android TV-Geräts. Normalerweise finden Sie sie unter Einstellungen > Netzwerk & Internet > (Name des Netzwerks, mit dem Ihr Gerät verbunden ist). Rechts werden die Details und die IP-Adresse Ihres Geräts im Netzwerk angezeigt.
2. Verwenden Sie die IP-Adresse Ihres Geräts, um über das Terminal eine Verbindung über ADB herzustellen:

$ adb connect <device_ip_address>:5555

3. Wechseln Sie im Terminalfenster in den Ordner der obersten Ebene für die Codelab-Beispiele, die Sie zu Beginn dieses Codelabs heruntergeladen haben. Beispiel:

$ cd Desktop/chrome_codelab_src

4. Installieren Sie die APK-Datei in diesem Ordner auf Ihrem Android TV-Gerät, indem Sie Folgendes ausführen:

$ adb -s <device_ip_address>:5555 install android-tv-app.apk

5. In der Meine Apps-Ansicht auf deinem Android TV-Gerät sollte jetzt die App Videos streamen angezeigt werden.
6. Führen Sie den aktualisierten Web-Sender-Code aus und starten Sie eine Cast-Sitzung mit Ihrem Android TV-Gerät. Verwenden Sie dazu das Cast-Symbol oder wählen Sie in Ihrem Chrome-Browser im Drop-down-Menü Cast.. aus. Dadurch sollte jetzt die Android TV App auf deinem Android-Receiver gestartet werden und du kannst die Wiedergabe mit deiner Android TV-Fernbedienung steuern.

8. Glückwunsch

Sie wissen jetzt, wie Sie eine Video-App mit den Cast SDK-Widgets in einer Chrome-Web-App für Google Cast optimieren.

Weitere Informationen finden Sie im Entwicklerleitfaden für Web Sender.

Du möchtest mehr Cast-Inhalte?

Sehen Sie sich die anderen Cast-Codelabs und unsere Beispiel-Apps auf GitHub an.