Diese Seite wurde von der Cloud Translation API übersetzt.

Cast SDK in die Web Sender App einbinden

In diesem Entwicklerhandbuch wird beschrieben, wie du deiner Websender-App mit dem Cast SDK Google Cast-Unterstützung hinzufügen kannst.

Terminologie

Das Mobilgerät oder der Browser ist der Sender, der die Wiedergabe steuert. Das Google Cast-Gerät ist der Empfänger, der die Inhalte zur Wiedergabe auf dem Bildschirm anzeigt.

Das Web Sender SDK besteht aus zwei Teilen: der Framework API (cast.framework) und der Base API (chrome.cast). Im Allgemeinen werden Aufrufe an die einfachere, übergeordnete Framework API gesendet, die dann von der untergeordneten Base API verarbeitet werden.

Das Sender-Framework bezieht sich auf die Framework API, das Modul und die zugehörigen Ressourcen, die eine Ummantelung für Funktionen auf niedrigerem Niveau bieten. Die Sender-App oder Google Cast Chrome App bezieht sich auf eine Web-App (HTML/JavaScript), die in einem Chrome-Browser auf einem Sendergerät ausgeführt wird. Eine Web-Receiver-App ist eine HTML-/JavaScript-App, die auf Chromecast oder einem Google Cast-Gerät ausgeführt wird.

Das Sender-Framework verwendet ein asynchrones Callback-Design, um die Sender-App über Ereignisse zu informieren und zwischen verschiedenen Status des Lebenszyklus der Cast-App zu wechseln.

Bibliothek laden

Damit Ihre App die Funktionen von Google Cast implementieren kann, muss sie den Speicherort des Google Cast Web Sender SDK kennen, wie unten dargestellt. Füge den URL-Suchparameter loadCastFramework hinzu, um auch die Web Sender Framework API zu laden. Alle Seiten Ihrer App müssen sich auf die Bibliothek so beziehen:

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

Framework

Das Web Sender SDK verwendet den Namespace cast.framework.*. Der Namespace steht für Folgendes:

Methoden oder Funktionen, die Vorgänge in der API aufrufen
Ereignis-Listener für Listener-Funktionen in der API

Das Framework besteht aus den folgenden Hauptkomponenten:

CastContext ist ein Singleton-Objekt, das Informationen zum aktuellen Cast-Status liefert und Ereignisse für Änderungen des Cast-Status und des Cast-Sitzungsstatus auslöst.
Das CastSession-Objekt verwaltet die Sitzung. Es liefert Statusinformationen und löst Ereignisse aus, z. B. Änderungen am Gerätelautstärkepegel, Stummschaltungsstatus und App-Metadaten.
Das Cast-Symbol ist ein einfaches benutzerdefiniertes HTML-Element, das die HTML-Schaltfläche erweitert. Wenn die bereitgestellte Wiedergabeschaltfläche nicht ausreicht, kannst du den Wiedergabestatus verwenden, um eine Wiedergabeschaltfläche zu implementieren.
Die RemotePlayerController bietet die Datenbindung, um die Implementierung des Remote-Players zu vereinfachen.

Eine vollständige Beschreibung des Namespace findest du in der Google Cast Web Sender API-Referenz.

Cast-Symbol

Die Komponente „Streamen“ in Ihrer App wird vollständig vom Framework verwaltet. Dazu gehören die Verwaltung der Sichtbarkeit und die Klickereignisbehandlung.

<google-cast-launcher></google-cast-launcher>

Alternativ können Sie die Schaltfläche programmatisch erstellen:

document.createElement("google-cast-launcher");

Sie können dem Element bei Bedarf zusätzliches Styling wie Größe oder Positionierung hinzufügen. Verwenden Sie das Attribut --connected-color, um die Farbe für den verbundenen Web-Empfängerstatus und --disconnected-color für den getrennten Status auszuwählen.

Initialisierung

Nachdem die Framework-API geladen wurde, ruft die App den Handler window.__onGCastApiAvailable auf. Die App muss diesen Handler auf der window festlegen, bevor die Absenderbibliothek geladen wird.

In diesem Handler initialisierst du die Übertragungsinteraktion, indem du die Methode setOptions(options) von CastContext aufrufst.

Beispiel:

<script>
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    initializeCastApi();
  }
};
</script>

Anschließend initialisieren Sie die API so:

initializeCastApi = function() {
  cast.framework.CastContext.getInstance().setOptions({
    receiverApplicationId: applicationId,
    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
  });
};

Zuerst ruft die App die Singleton-Instanz des vom Framework bereitgestellten CastContext-Objekts ab. Anschließend wird applicationID mit setOptions(options) und einem CastOptions-Objekt festgelegt.

Wenn du den Standard-Medien-Empfänger verwendest, für den keine Registrierung erforderlich ist, verwendest du anstelle von applicationID eine vom Websender-SDK vordefinierte Konstante, wie unten gezeigt:

cast.framework.CastContext.getInstance().setOptions({
  receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
});

Mediensteuerung

Nachdem CastContext initialisiert wurde, kann die App den aktuellen CastSession jederzeit mit getCurrentSession() abrufen.

var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

Über die CastSession können Sie Medien mit loadMedia(loadRequest) auf das verbundene Übertragungsgerät laden. Erstelle zuerst eine MediaInfo und verwende dabei contentId und contentType sowie alle anderen Informationen, die sich auf die Inhalte beziehen. Erstellen Sie dann eine LoadRequest und legen Sie alle relevanten Informationen für die Anfrage fest. Rufen Sie abschließend loadMedia(loadRequest) auf Ihrem CastSession auf.

var mediaInfo = new chrome.cast.media.MediaInfo(currentMediaURL, contentType);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
  function() { console.log('Load succeed'); },
  function(errorCode) { console.log('Error code: ' + errorCode); });

Die Methode loadMedia gibt ein Promise zurück, mit dem alle für ein erfolgreiches Ergebnis erforderlichen Vorgänge ausgeführt werden können. Wenn das Promise abgelehnt wird, ist das Funktionsargument ein chrome.cast.ErrorCode.

Du kannst über RemotePlayer auf Variablen für den Spielerstatus zugreifen. Alle Interaktionen mit der RemotePlayer, einschließlich Rückruffunktionen und Befehle für Medienereignisse, werden über die RemotePlayerController verarbeitet.

var player = new cast.framework.RemotePlayer();
var playerController = new cast.framework.RemotePlayerController(player);

Mit der RemotePlayerController hat die App die volle Mediensteuerung für die geladenen Medien (WIEDERGABE, PAUSE, STOPP und SPRINGEN).

ABSPIELEN/PAUSE: playerController.playOrPause();
STOP: playerController.stop();
SEEK: playerController.seek();

RemotePlayer und RemotePlayerController können mit Datenbindungs-Frameworks wie Polymer oder Angular verwendet werden, um einen Remote-Player zu implementieren.

Hier ist ein Code-Snippet für Angular:

<button id="playPauseButton" class="playerButton"
  ng-disabled="!player.canPause"
  ng-click="controller.playOrPause()">
    {{player.isPaused ? 'Play' : 'Pause'}}
</button>
<script>
var player = new cast.framework.RemotePlayer();
var controller = new cast.framework.RemotePlayerController(player);
// Listen to any player update, and trigger angular data binding
update.controller.addEventListener(
  cast.framework.RemotePlayerEventType.ANY_CHANGE,
  function(event) {
    if (!$scope.$$phase) $scope.$apply();
  });
</script>

Medienstatus

Während der Medienwiedergabe treten verschiedene Ereignisse auf, die erfasst werden können, indem Listener für verschiedene cast.framework.RemotePlayerEventType-Ereignisse auf dem RemotePlayerController-Objekt festgelegt werden.

Verwende das Ereignis cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED, um Informationen zum Medienstatus zu erhalten. Es wird ausgelöst, wenn sich die Wiedergabe und der Wert von CastSession.getMediaSession().media ändert.

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED, function() {
    // Use the current session to get an up to date media status.
    let session = cast.framework.CastContext.getInstance().getCurrentSession();

    if (!session) {
        return;
    }

    // Contains information about the playing media including currentTime.
    let mediaStatus = session.getMediaSession();
    if (!mediaStatus) {
        return;
    }

    // mediaStatus also contains the mediaInfo containing metadata and other
    // information about the in progress content.
    let mediaInfo = mediaStatus.media;
  });

Wenn Ereignisse wie „Pausieren“, „Wiedergeben“, „Fortsetzen“ oder „Suchen“ auftreten, muss die App darauf reagieren und sich mit der Web-Empfänger-App auf dem Streaminggerät synchronisieren. Weitere Informationen finden Sie unter Statusaktualisierungen.

So funktioniert die Sitzungsverwaltung

Das Cast SDK führt das Konzept einer Cast-Sitzung ein. Bei der Einrichtung werden die Schritte zum Herstellen einer Verbindung zu einem Gerät, zum Starten (oder Beitreten) einer Webreceiver-App, zum Herstellen einer Verbindung zu dieser App und zum Initialisieren eines Mediensteuerungskanals kombiniert. Weitere Informationen zu Übertragungssitzungen und zum Lebenszyklus des Webreceivers findest du im Leitfaden zum Anwendungslebenszyklus.

Sitzungen werden von der Klasse CastContext verwaltet, die deine App über cast.framework.CastContext.getInstance() abrufen kann. Einzelne Sitzungen werden durch Unterklassen der Klasse Session dargestellt. CastSession steht beispielsweise für Sitzungen mit Streaminggeräten. Ihre App kann über CastContext.getCurrentSession() auf die aktuell aktive Übertragungssitzung zugreifen.

Wenn Sie den Sitzungsstatus überwachen möchten, fügen Sie dem Element CastContext einen Listener für den Ereignistyp CastContextEventType.SESSION_STATE_CHANGED hinzu.

var context = cast.framework.CastContext.getInstance();
context.addEventListener(
  cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
  function(event) {
    switch (event.sessionState) {
      case cast.framework.SessionState.SESSION_STARTED:
      case cast.framework.SessionState.SESSION_RESUMED:
        break;
      case cast.framework.SessionState.SESSION_ENDED:
        console.log('CastContext: CastSession disconnected');
        // Update locally as necessary
        break;
    }
  })

Wenn die Verbindung getrennt wird, z. B. wenn der Nutzer im Dialogfeld „Streamen“ auf die Schaltfläche „Streaming beenden“ klickt, können Sie in Ihrem Listener einen Listener für den Ereignistyp RemotePlayerEventType.IS_CONNECTED_CHANGED hinzufügen. Prüfe in deinem Listener, ob RemotePlayer getrennt ist. Aktualisiere gegebenenfalls den lokalen Playerstatus. Beispiel:

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED, function() {
    if (!player.isConnected) {
      console.log('RemotePlayerController: Player disconnected');
      // Update local player to disconnected state
    }
  });

Der Nutzer kann das Ende des Streams zwar direkt über die Schaltfläche „Streamen“ des Frameworks steuern, der Sender selbst kann das Streaming aber auch über das aktuelle CastSession-Objekt beenden.

function stopCasting() {
  var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
  // End the session and pass 'true' to indicate
  // that Web Receiver app should be stopped.
  castSession.endSession(true);
}

Stream-Übertragung

Die Aufrechterhaltung des Sitzungsstatus ist die Grundlage der Streamübertragung, bei der Nutzer vorhandene Audio- und Videostreams per Sprachbefehl, über die Google Home App oder über Smart Displays zwischen Geräten verschieben können. Die Medienwiedergabe wird auf einem Gerät (der Quelle) beendet und auf einem anderen (dem Ziel) fortgesetzt. Jedes Cast-Gerät mit der neuesten Firmware kann als Quelle oder Ziel in einer Streamübertragung dienen.

Wenn du das neue Zielgerät während der Streamübertragung abrufen möchtest, rufe CastSession#getCastDevice() auf, wenn das Ereignis cast.framework.SessionState.SESSION_RESUMED aufgerufen wird.

Weitere Informationen finden Sie unter Streamübertragung auf Webempfänger.

Zurück

Einrichtung

Weiter

Erweiterte Funktionen hinzufügen