Stellen Sie sich vor, Sie könnten mit einer Web-App auf Ihrem Smartphone eine Präsentation auf einem Konferenzprojektor abspielen, Bilder teilen, Spiele spielen oder sich Videos auf einem Fernsehbildschirm ansehen – und dabei die mobile Web-App als Steuerelement verwenden.
Mit der neuesten Version von Chrome auf Android können Websites mit dem Cast Web SDK auf Google Cast-Geräten präsentiert werden. Das bedeutet, dass Sie jetzt Apps zum Streamen mit dem Web SDK in Chrome auf Android- oder iOS-Geräten (oder auf dem Computer mit der Erweiterung) sowie Apps mit dem nativen Cast SDK für Android und iOS erstellen können. Bisher war für eine Google Cast-Senderanwendung die Google Cast Chrome-Erweiterung erforderlich. Auf Android-Geräten war es also nur möglich, über native Apps mit Cast-Geräten zu interagieren.
Im Folgenden findest du eine kurze Einführung in die Erstellung einer Sender-App für Google Cast mit dem Web SDK. Ausführlichere Informationen finden Sie im Entwicklerleitfaden für Chrome-Sender-Apps.
Alle Seiten, auf denen Google Cast verwendet wird, müssen die Cast-Bibliothek enthalten:
<script
type="text/javascript"
src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"
></script>
Füge einen Rückruf hinzu, um die API-Verfügbarkeit zu verwalten und die Übertragungssitzung zu initialisieren. Achte darauf, den Handler vor dem Laden der API hinzuzufügen:
window['__onGCastApiAvailable'] = function (isLoaded, error) {
if (isLoaded) {
initializeCastApi();
} else {
console.log(error);
}
};
function initializeCastApi() {
var sessionRequest = new chrome.cast.SessionRequest(applicationID);
var apiConfig = new chrome.cast.ApiConfig(
sessionRequest,
sessionListener,
receiverListener
);
chrome.cast.initialize(apiConfig, onInitSuccess, onError);
}
Wenn du die Standardanwendung Styled Media Receiver verwendest und keine selbst erstellte, registrierte benutzerdefinierte Empfängeranwendung, kannst du eine SessionRequest so erstellen:
var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.
DEFAULT_MEDIA_RECEIVER_APP_ID);
Der obige receiverListener-Callback wird ausgeführt, wenn ein oder mehrere Geräte verfügbar werden:
function receiverListener(e) {
if (e === chrome.cast.ReceiverAvailability.AVAILABLE) {
// update UI
}
}
Starte eine Übertragungssitzung, wenn der Nutzer auf das Übertragungssymbol klickt, wie in den Richtlinien zur Nutzererfahrung gefordert:
chrome.cast.requestSession(onRequestSessionSuccess,
onRequestSessionError);
function onRequestSessionSuccess(e) {
session = e;
}
Dem Nutzer wird eine Geräteauswahl angezeigt:
Das Dialogfeld Routendetails wird angezeigt, wenn die Seite bereits verbunden ist und requestSession() aufruft:
Sobald eine Übertragungssitzung eingerichtet ist, können Sie Medien für das ausgewählte Übertragungsgerät laden und einen Listener für Medienwiedergabeereignisse hinzufügen:
var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
session.loadMedia(
request,
onMediaDiscovered.bind(this, 'loadMedia'),
onMediaError
);
function onMediaDiscovered(how, media) {
currentMedia = media;
media.addUpdateListener(onMediaStatusUpdate);
}
Die Variable currentMedia ist hier ein chrome.cast.media.Media-Objekt, mit dem die Wiedergabe gesteuert werden kann:
function playMedia() {
currentMedia.play(null, success, error);
}
// ...
Wenn Medien abgespielt werden, wird eine Wiedergabe-/Pause-Benachrichtigung angezeigt:
Wenn keine Medien wiedergegeben werden, enthält die Benachrichtigung nur eine Schaltfläche zum Beenden der Übertragung:
Über den sessionListener-Callback für chrome.cast.ApiConfig() (siehe oben) kann Ihre App einer bestehenden Cast-Sitzung beitreten oder sie verwalten:
function sessionListener(e) {
session = e;
if (session.media.length !== 0) {
onMediaDiscovered('onRequestSessionSuccess', session.media[0]);
}
}
Wenn in Chrome für Android das Streamen von Medien von Ihrer Website zulässig ist, Sie diese Funktion aber deaktivieren möchten, damit die Standard-Streaming-Benutzeroberfläche nicht mit Ihrer eigenen interferiert, verwenden Sie das Attribut disableRemotePlayback, das in Chrome 49 und höher verfügbar ist:
<video disableRemotePlayback src="..."></video>
Der Leitfaden zum Cast Web SDK enthält Links zu Beispiel-Apps und Informationen zu Cast-Funktionen wie Sitzungsverwaltung, Texttracks (für Untertitel) und Statusaktualisierungen.
Derzeit können Sie nur mit dem Cast Web SDK Inhalte auf einer Cast-Empfängeranwendung präsentieren. Wir arbeiten jedoch daran, die Presentation API ohne das Cast SDK (auf dem Computer und Android-Geräten) zu verwenden, um eine beliebige Webseite auf einem Cast-Gerät ohne Registrierung bei Google zu präsentieren. Im Gegensatz zum Chrome-spezifischen Cast SDK kann die Seite mit der Standard-API auch mit anderen User-Agents und Geräten verwendet werden, die die API unterstützen.
Die Presentation API ist zusammen mit der Remote Playback API Teil der Bemühungen der Second Screen Working Group, Webseiten die Möglichkeit zu geben, Webinhalte auf einem zweiten Bildschirm anzuzeigen.
Diese APIs nutzen die Vielfalt der online gehenden Geräte – einschließlich verbundener Displays, auf denen ein User-Agent ausgeführt wird –, um eine Vielzahl von Anwendungen mit einem Steuergerät und einem Anzeigegerät zu ermöglichen.
Wir halten Sie über den Fortschritt der Implementierung auf dem Laufenden.
Falls Sie in der Zwischenzeit Fehler finden oder Funktionsanfragen haben, können Sie sich unter crbug.com/new an uns wenden.