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 für die Wiedergabe.
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. für Ereignisse und den Wechsel zwischen den verschiedenen Status 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, den Stummschaltungsstatus und die 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 sicherstellen, 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 wie unten gezeigt eine vom Web Sender SDK vordefinierte Konstante
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 auf das verbundene Übertragungsgerät geladen werden:
loadMedia(loadRequest)
Erstellen Sie zunächst ein
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
Versprechen
mit denen alle notwendigen
Operationen 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 Optionen WIEDERGEBEN, PAUSE, STOP und SEEK können Sie nach dem geladenen Medium suchen.
- WIEDERGEBEN/PAUSE:
playerController.playOrPause();
- BEENDEN:
playerController.stop();
- ANZEIGEN:
playerController.seek();
Für 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
steht für 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 .