Stellen Sie sich vor, Sie könnten eine Web-App auf Ihrem Smartphone verwenden, um eine Präsentation auf einem Konferenzprojektor zu präsentieren oder Bilder zu teilen, Spiele zu spielen oder Videos auf einem Fernsehbildschirm anzusehen. Die mobile Web-App wird dabei als Controller verwendet.
Mit der neuesten Version von Chrome unter Android können Websites mithilfe des Cast Web SDK Inhalte auf Google Cast-Geräten präsentieren. Das bedeutet, dass Sie jetzt mit dem Web SDK und Chrome für Android oder iOS (oder auf Desktop-Computern mit der Erweiterung) Cast-Sender-Apps erstellen können. Außerdem können Sie Apps erstellen, die das native Cast SDK für Android und iOS verwenden. Früher war für eine Google Cast-Sender-App die Google Cast-Erweiterung für Chrome erforderlich, sodass unter Android nur die Interaktion mit Cast-Geräten über systemeigene Apps möglich war.
Nachfolgend finden Sie eine kurze Einführung in die Erstellung einer Cast-Sender-App mit dem Web SDK. Umfassendere Informationen finden Sie im Entwicklerleitfaden für Sender-Apps von Chrome.
Alle Seiten, auf denen Cast verwendet wird, muss die Cast-Bibliothek enthalten:
<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 Verfügbarkeit der API zu verarbeiten und die Cast-Sitzung zu initialisieren. Fügen Sie den Handler hinzu, 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 keine eigenständige, registrierte Custom Receiver-Anwendung verwenden, können Sie eine SessionRequest wie folgt erstellen:
var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.
DEFAULT_MEDIA_RECEIVER_APP_ID);
Der obige receiverListener-Callback wird ausgeführt, sobald ein oder mehrere Geräte verfügbar sind:
function receiverListener(e) {
if (e === chrome.cast.ReceiverAvailability.AVAILABLE) {
// update UI
}
}
Wenn der Nutzer auf das Cast-Symbol klickt, wird gemäß den Richtlinien zur Nutzererfahrung eine Streaming-Sitzung gestartet:
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 Streamingsitzung läuft, können Sie Medien für das ausgewählte Übertragungsgerät laden und einen Listener für Ereignisse der Medienwiedergabe 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 currentMedia-Variable ist ein chrome.cast.media.Media-Objekt, mit dem die Wiedergabe gesteuert werden kann:
function playMedia() {
currentMedia.play(null, success, error);
}
// ...
Bei der Wiedergabe von Medien wird eine Benachrichtigung über die Wiedergabe/Pause angezeigt:
Wenn keine Medien abgespielt werden, enthält die Benachrichtigung nur eine Schaltfläche zum Beenden des Streamings:
Mit dem sessionListener-Callback für chrome.cast.ApiConfig() (siehe oben) kann deine App an einer Streaming-Sitzung teilnehmen oder diese 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 Standardbenutzeroberfläche für das Streamen Ihre eigene nicht beeinträchtigt, 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 Streamingfunktionen wie Sitzungsverwaltung, Texttracks für Untertitel und Statusaktualisierungen.
Momentan können Inhalte nur mit dem Cast Web SDK für eine Cast-Empfänger-App übertragen werden. Wir arbeiten jedoch daran, die Presentation API so zu nutzen, dass sie ohne das Cast SDK (auf Desktop-Computern und Android-Geräten) verwendet werden kann, um beliebige Webseiten auf einem Übertragungsgerät zu zeigen, ohne sich bei Google zu registrieren. Im Gegensatz zum Cast SDK nur für Chrome kann die Seite bei Verwendung der Standard-API mit anderen User-Agents und Geräten, die die API unterstützen, funktionieren.
Die Presentation API ist zusammen mit der Remote Playback API Teil der Second Screen Working Group, mit der Webseiten über einen zweiten Bildschirm zum Anzeigen von Webinhalten verwendet werden können.
Diese APIs nutzen die Vielzahl von Geräten, die online gehen – einschließlich verbundener Bildschirme, die einen User-Agent ausführen – und ermöglichen so eine Vielzahl von Anwendungen mit einem „Steuergerät“ und einem „Anzeigegerät“.
Wir halten Sie über den Fortschritt bei der Implementierung auf dem Laufenden.
Falls Sie in der Zwischenzeit Fehler finden oder Funktionsanfragen haben, teilen Sie uns dies bitte unter crbug.com/new mit.