Diese Seite wurde von der Cloud Translation API übersetzt.

Cast SDK in die Web Sender App einbinden

In diesem Entwicklerleitfaden wird beschrieben, wie Sie Ihrer Web Sender-App mit dem Cast SDK Google Cast-Unterstützung hinzufügen.

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 auf dem Bildschirm für die Wiedergabe anzeigt.

Das Web Sender SDK besteht aus zwei Teilen: der Framework API (cast.framework) und der Base API (chrome.cast). Im Allgemeinen rufen Sie die einfachere, übergeordnete Framework API auf, die dann von der untergeordneten Base API verarbeitet wird.

Das Sender Framework bezieht sich auf die Framework API, das Modul und die zugehörigen Ressourcen, die einen Wrapper für Funktionen auf niedrigerer Ebene bieten. Die Absender-App oder Google Cast Chrome-App bezieht sich auf eine Web-App (HTML/JavaScript), die in einem Chrome-Browser auf einem Absendergerät ausgeführt wird. Eine Web Receiver App ist eine HTML-/JavaScript-App, die auf einem 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 Zuständen des Cast-App-Lebenszyklus 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 gezeigt. Fügen Sie den URL-Suchparameter loadCastFramework hinzu, um auch die Web Sender Framework API zu laden. Auf allen Seiten Ihrer App muss auf die Bibliothek verwiesen werden:

<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
Event-Listener für Listener-Funktionen in der API

Der Rahmen besteht aus den folgenden Hauptkomponenten:

Das 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 stellt Statusinformationen bereit und löst Ereignisse aus, z. B. Änderungen an der Gerätelautstärke, dem Stummschaltungsstatus und den App-Metadaten.
Das Cast-Symbol-Element, ein einfaches benutzerdefiniertes HTML-Element, das die HTML-Schaltfläche erweitert. Wenn die bereitgestellte Cast-Schaltfläche nicht ausreicht, können Sie den Cast-Status verwenden, um eine Cast-Schaltfläche zu implementieren.
Die RemotePlayerController bietet die Datenbindung, um die Implementierung des Remote-Players zu vereinfachen.

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

Cast-Symbol

Die Cast-Schaltflächenkomponente in Ihrer App wird vollständig vom Framework verwaltet. Dazu gehören die Verwaltung der Sichtbarkeit und die Verarbeitung von Klickereignissen.

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

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

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

Sie können dem Element bei Bedarf zusätzliche Formatierungen wie Größe oder Positionierung zuweisen. Verwenden Sie das Attribut --connected-color, um die Farbe für den verbundenen Web Receiver-Status auszuwählen, und --disconnected-color für den getrennten Status.

Initialisierung

Nachdem die Framework-API geladen wurde, ruft die App den Handler window.__onGCastApiAvailable auf. Die App muss diesen Handler für window festlegen, bevor die Sender-Bibliothek geladen wird.

In diesem Handler initialisieren Sie die Cast-Interaktion, indem Sie die Methode setOptions(options) von CastContext aufrufen.

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 CastContext-Objekts ab, das vom Framework bereitgestellt wird. Anschließend wird setOptions(options) mit einem CastOptions-Objekt verwendet, um applicationID festzulegen.

Wenn Sie den Standard-Media Receiver verwenden, für den keine Registrierung erforderlich ist, verwenden Sie anstelle von applicationID eine vom Web Sender SDK vordefinierte Konstante, wie unten gezeigt:

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

Mediensteuerung

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

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

Mit CastSession können Medien über loadMedia(loadRequest) auf das verbundene Cast-Gerät geladen werden. Erstellen Sie zuerst ein MediaInfo mit contentId und contentType sowie allen anderen Informationen, die sich auf die Inhalte beziehen. Erstellen Sie dann ein LoadRequest daraus und legen Sie alle relevanten Informationen für die Anfrage fest. Rufe schließlich loadMedia(loadRequest) in deinem 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 erforderlichen Vorgänge für ein erfolgreiches Ergebnis ausgeführt werden können. Wenn das Promise abgelehnt wird, ist das Funktionsargument ein chrome.cast.ErrorCode.

Sie können in RemotePlayer auf Variablen für den Playerstatus zugreifen. Alle Interaktionen mit dem RemotePlayer, einschließlich Media-Event-Callbacks und Befehle, werden mit dem RemotePlayerController verarbeitet.

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

Die RemotePlayerController gibt der App die vollständige Mediensteuerung für PLAY, PAUSE, STOP und SEEK für die geladenen Medien.

WIEDERGABE/PAUSE: playerController.playOrPause();
HALTESTELLE: playerController.stop();
SEEK: playerController.seek();

Die RemotePlayer- und RemotePlayerController-Elemente 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-EreignisseRemotePlayerControllerauf dem Objekt festgelegt werden.

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 „Pause“, „Wiedergabe“, „Fortsetzen“ oder „Suchen“ auftreten, muss die App darauf reagieren und sich mit der Web Receiver-App auf dem Cast-Gerät synchronisieren. Weitere Informationen finden Sie unter Statusaktualisierungen.

So funktioniert die Sitzungsverwaltung

Im Cast SDK wird das Konzept einer Cast-Sitzung eingeführt. Die Einrichtung einer solchen Sitzung umfasst die Schritte zum Herstellen einer Verbindung zu einem Gerät, zum Starten (oder Beitreten) einer Web Receiver-App, zum Herstellen einer Verbindung zu dieser App und zum Initialisieren eines Media Control-Channels. Weitere Informationen zu Cast-Sitzungen und zum Web Receiver-Lebenszyklus finden Sie im Leitfaden zum Anwendungslebenszyklus für Web Receiver.

Sitzungen werden von der Klasse CastContext verwaltet, die Ihre App über cast.framework.CastContext.getInstance() abrufen kann. Einzelne Sitzungen werden durch Unterklassen der Klasse Session dargestellt. CastSession steht beispielsweise für Sitzungen mit Cast-Geräten. Ihre App kann über CastContext.getCurrentSession() auf die derzeit aktive Cast-Sitzung zugreifen.

Wenn Sie den Sitzungsstatus überwachen möchten, fügen Sie dem 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 Cast-Dialogfeld auf die Schaltfläche „Übertragung 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 in diesem Fall den lokalen Player-Status entsprechend. 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 die Beendigung der Übertragung zwar direkt über die Cast-Schaltfläche im Framework steuern, der Absender selbst kann die Übertragung jedoch 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

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

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

Weitere Informationen finden Sie unter Streamübertragung auf Web Receiver.

Zurück

Einrichtung

Weiter

Erweiterte Funktionen hinzufügen