Diese Seite wurde von der Cloud Translation API übersetzt.

Cast SDK in die Web Sender App einbinden

In diesem Entwicklerleitfaden wird beschrieben, wie Sie die Google Cast-Unterstützung zu Ihrem Web hinzufügen Sender-App, die das Cast SDK verwendet

Terminologie

Das Mobilgerät oder der Browser ist der Absender, der die Wiedergabe steuert. Das Google Cast-Gerät ist der Empfänger, mit dem die Inhalte auf Wiedergabe starten.

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

Das Absender-Framework bezieht sich auf die Framework API, das Modul und die zugehörigen Ressourcen, die einen Wrapper für untergeordnete Funktionen bilden. 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 werden. Eine Web Receiver-App verweist auf in eine HTML/JavaScript-App auf Chromecast oder einem Google Cast-Gerät übertragen.

Das Absender-Framework nutzt ein asynchrones Callback-Design, um den Absender zu informieren. App für Ereignisse und den Wechsel zwischen verschiedenen Stadien der Cast App. Zyklus.

Bibliothek laden

Damit Ihre App die Funktionen von Google Cast implementieren kann, müssen folgende Voraussetzungen erfüllt sein: Speicherort des Google Cast Web Sender SDK (siehe unten). Fügen Sie den loadCastFramework-URL-Suchparameter, um die Web Sender Framework API zu laden . Alle Seiten Ihrer App müssen wie folgt auf die Bibliothek verweisen:

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

Framework

Das Web Sender SDK verwendet cast.framework.* -Namespace auf sie zugegriffen werden. Der Namespace stellt Folgendes dar:

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

Das Framework besteht aus den folgenden Hauptkomponenten:

Die CastContext ist ein Singleton-Objekt, das Informationen zum aktuellen Streaming-Status und löst Ereignisse für den Streaming-Status und die Streaming-Sitzung aus Statusänderungen.
Die CastSession verwaltet die Sitzung und stellt den Status bereit und Ereignisse wie Änderungen der Gerätelautstärke, Stummschaltung und App-Metadaten.
Das Cast-Schaltflächenelement, ein einfaches benutzerdefiniertes HTML-Element, erweitert die HTML-Schaltfläche. Falls das bereitgestellte Cast-Symbol nicht ausreicht, können Sie mit dem Cast-Status ein Cast-Symbol implementieren.
Die RemotePlayerController stellt die Datenbindung bereit, um die Implementierung des Remote-Players zu vereinfachen.

Lesen Sie die Google Cast Web Sender API-Referenz für vollständige Beschreibung des Namespace.

Cast-Symbol

Die Komponente für das Cast-Symbol in Ihrer App wird vollständig vom Framework verwaltet. Dieses beinhaltet Sichtbarkeitsverwaltung sowie die Verarbeitung von Klickereignissen.

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

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

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

Sie können zusätzliche Stile wie Größe oder Position auf den -Element nach Bedarf hinzufügen. Verwenden Sie das Attribut --connected-color, um die Farbe für den Status des verbundenen Web Receivers auswählen --disconnected-color für den Status „Nicht verbunden“.

Initialisierung

Nach dem Laden der Framework-API ruft die App den Handler auf window.__onGCastApiAvailable Sie sollten darauf achten, dass die App diesen Handler festlegt. in der window, bevor Sie die Absenderbibliothek laden.

Innerhalb dieses Handlers initialisieren Sie die Cast-Interaktion, indem Sie die Methode setOptions(options) von CastContext

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 Objekt CastContext die vom Framework bereitgestellt werden. Dann verwendet es setOptions(options) mit einer CastOptions-Objekt um applicationID festzulegen.

Wenn Sie den Standard-Medienempfänger verwenden, für den keine Registrierung erforderlich ist, verwenden Sie eine vom Web Sender SDK vordefinierte Konstante, wie unten gezeigt, applicationID:

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

Mediensteuerung

Sobald der CastContext initialisiert wurde, kann die App den aktuellen CastSession (beliebig) Zeit mit getCurrentSession()

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

Mit dem CastSession können Medien mithilfe von loadMedia(loadRequest) Erstellen Sie zunächst einen MediaInfo, unter Verwendung der contentId und contentType sowie aller anderen Informationen die mit dem Inhalt zusammenhängen. Erstellen Sie dann LoadRequest alle relevanten Informationen für die Anfrage festlegen. Schließlich: loadMedia(loadRequest) auf CastSession anrufen

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 eine Promise mit denen alle erforderlichen Vorgänge für ein erfolgreiches Ergebnis ausgeführt werden können. Wird das Promise abgelehnt, ist das Funktionsargument ein chrome.cast.ErrorCode

Du kannst die Variablen für den Player-Status in RemotePlayer Alle Interaktionen mit dem RemotePlayer, einschließlich Callbacks für Medienereignisse und werden mit der Methode RemotePlayerController

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

Mit der RemotePlayerController hat die App die volle Kontrolle über die Medien Mit den Funktionen WIEDERGEBEN, PAUSE, STOP und SEEK können Sie nach dem geladenen Medium suchen.

WIEDERGEBEN/PAUSE: playerController.playOrPause();
BEENDEN: playerController.stop();
ANZEIGEN: playerController.seek();

RemotePlayer und RemotePlayerController können Datenbindungs-Frameworks wie Polymer oder Angular verwendet, um eine Remote-Player.

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 Hörer für verschiedene cast.framework.RemotePlayerEventType Events am RemotePlayerController-Objekt.

Um die Informationen zum Medienstatus abzurufen, verwende die cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED das ausgelöst wird, wenn sich die Wiedergabe ändert CastSession.getMediaSession().media Änderungen.

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;
  });

Bei Ereignissen wie „Pause“, „Wiedergabe“, „Fortsetzen“ oder „Spulen“ muss die App eine Aktion ausführen. und die Web Receiver App beim Streamen synchronisieren. . Siehe Statusupdates .

Funktionsweise der Sitzungsverwaltung

Mit dem Cast SDK wird das Konzept einer Cast-Sitzung eingeführt. Einrichtung, die die Schritte zum Herstellen einer Verbindung mit einem Gerät, dem Starten (oder dem Beitritt) zu einem Web umfasst Receiver-App, die eine Verbindung zu dieser App herstellt und ein Mediensteuerungskanal initialisiert wird. Web Receiver anzeigen Leitfaden zum Lebenszyklus von Anwendungen finden Sie weitere Informationen zu Übertragungssitzungen und zum Lebenszyklus des Web-Receivers.

Sitzungen werden vom Kurs verwaltet CastContext, die Ihre App über cast.framework.CastContext.getInstance() Einzelne Sitzungen werden durch Unterklassen der Klasse dargestellt. Session Beispiel: CastSession Sitzungen mit Übertragungsgeräten. Ihre App kann auf die derzeit aktiven Sitzung streamen über CastContext.getCurrentSession()

Fügen Sie zum Überwachen des Sitzungsstatus dem CastContext für die CastContextEventType.SESSION_STATE_CHANGED-Ereignistyp.

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;
    }
  })

Zum Trennen der Verbindung, z. B. wenn der Nutzer auf „Streaming beenden“ klickt Schaltfläche von können Sie einen Listener für das RemotePlayerEventType.IS_CONNECTED_CHANGED in den Listener ein. Prüfen Sie im Listener, ob RemotePlayer ist nicht verbunden. Falls ja, aktualisiere den Status des lokalen Players nach Bedarf. 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 von Cast über das Framework für Cast direkt steuern. kann der Sender das Streamen über die aktuelle CastSession -Objekt enthält.

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 Beibehaltung des Sitzungsstatus ist die Grundlage der Streamübertragung. können Nutzer vorhandene Audio- und Videostreams per Sprachbefehl, über Google Home eine App oder ein Smart Display verwenden. Die Medienwiedergabe wird auf einem Gerät (Quelle) gestoppt und auf einem anderen fortgesetzt (das Ziel). Jedes Übertragungsgerät mit der neuesten Firmware kann als Quelle oder Ziel in einem Streamübertragung.

Um das neue Zielgerät während der Stream-Weiterleitung zu erhalten, ruf CastSession#getCastDevice() wenn das Ereignis cast.framework.SessionState.SESSION_RESUMED aufgerufen wird.

Weitere Informationen finden Sie unter Stream-Übertragung mit Web Receiver .

Zurück

Einrichtung

Weiter

Erweiterte Funktionen hinzufügen