Stellen Sie sich vor, Sie könnten mit einer Web-App auf Ihrem Smartphone eine Präsentation auf einem Konferenzprojektor halten oder Bilder, Spiele oder Videos auf einem Fernseher ansehen und dabei die mobile Web-App als Controller verwenden.
Mit der neuesten Version von Chrome für Android können Websites auf Google Cast-Geräten präsentieren, indem sie das Cast Web SDK verwenden. Das bedeutet, dass Sie jetzt Cast-Absender-Apps mit dem Web SDK mit Chrome unter Android oder iOS (oder auf dem Computer mit der Erweiterung) erstellen können. Außerdem können Sie Apps erstellen, die das native Cast SDK für Android und iOS verwenden. Bisher benötigte eine Google Cast-Absenderanwendung die Google Cast-Chrome-Erweiterung. Auf Android-Geräten war es daher nur möglich, über native Apps mit Cast-Geräten zu interagieren.
Nachfolgend finden Sie eine kurze Einführung in die Entwicklung einer Cast-Sender-App mit dem Web SDK. Ausführlichere Informationen finden Sie im Entwicklerleitfaden für Chrome-Sender-Apps.
Auf allen Seiten, auf denen Cast verwendet wird, muss die Cast-Bibliothek eingebunden sein:
<script
type="text/javascript"
src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"
></script>
Fügen Sie einen Callback hinzu, um die API-Verfügbarkeit zu verarbeiten und die Cast-Sitzung zu initialisieren. Achten Sie darauf, dass Sie den Handler hinzufügen, bevor die API geladen wird.
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 Sie die Standardanwendung Styled Media Receiver und nicht eine selbst entwickelte, registrierte Custom Receiver-Anwendung verwenden, können Sie einen SessionRequest so erstellen:
var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.
DEFAULT_MEDIA_RECEIVER_APP_ID);
Der receiverListener-Callback oben 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 Cast-Sitzung, wenn der Nutzer auf das Cast-Symbol klickt. Das ist in den Richtlinien zur Nutzererfahrung vorgeschrieben:
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() aufgerufen wird:
Sobald Sie eine Cast-Sitzung haben, können Sie Medien für das ausgewählte Cast-Gerät laden und einen Listener für die 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, das zur Steuerung der Wiedergabe verwendet werden kann:
function playMedia() {
currentMedia.play(null, success, error);
}
// ...
Wenn Medien wiedergegeben werden, wird eine Benachrichtigung zum Wiedergeben/Pausieren angezeigt:
Wenn keine Medien wiedergegeben werden, enthält die Benachrichtigung nur eine Schaltfläche zum Beenden des Castings:
Mit dem sessionListener-Callback für chrome.cast.ApiConfig() (siehe oben) kann Ihre App einer vorhandenen Cast-Sitzung beitreten oder sie verwalten:
function sessionListener(e) {
session = e;
if (session.media.length !== 0) {
onMediaDiscovered('onRequestSessionSuccess', session.media[0]);
}
}
Wenn Chrome unter Android das Streamen von Medien von Ihrer Website zulässt, Sie diese Funktion aber deaktivieren möchten, damit die Standard-Streaming-Benutzeroberfläche nicht mit Ihrer eigenen in Konflikt gerät, verwenden Sie das Attribut disableRemotePlayback, das in Chrome 49 und höher verfügbar ist:
<video disableRemotePlayback src="..."></video>
Im Leitfaden zum Cast Web SDK finden Sie Links zu Beispiel-Apps und Informationen zu Cast-Funktionen wie Sitzungsverwaltung, Text-Tracks (für Untertitel) und Statusaktualisierungen.
Derzeit können Sie nur mit dem Cast Web SDK Inhalte in einer Receiver-Anwendung für Google Cast präsentieren. Wir arbeiten jedoch daran, die Presentation API ohne das Cast SDK (auf dem Computer und unter Android) zu ermöglichen, um beliebige Webseiten auf einem Google Cast-Gerät zu präsentieren, ohne dass eine Registrierung bei Google erforderlich ist. Im Gegensatz zum Cast SDK für Chrome kann die Seite bei Verwendung der Standard-API 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 Verwendung von Zweitbildschirmen zur Anzeige von Webinhalten zu ermöglichen.
Diese APIs nutzen die Vielfalt der Geräte, die online gehen – einschließlich verbundener Displays, auf denen ein User-Agent ausgeführt wird –, um eine Vielzahl von Anwendungen mit einem „Steuerungsgerät“ und einem „Anzeigegerät“ zu ermöglichen.
Wir halten Sie über den Fortschritt der Implementierung auf dem Laufenden.
Wenn Sie in der Zwischenzeit Fehler finden oder Funktionsanfragen haben, können Sie uns das unter crbug.com/new mitteilen.