Ta strona została przetłumaczona przez Cloud Translation API.

Zintegruj SDK Cast z aplikacją Web Sender

Z tego przewodnika dla programistów dowiesz się, jak dodać obsługę Google Cast do aplikacji Web Sender za pomocą pakietu Cast SDK.

Terminologia

Urządzenie mobilne lub przeglądarka to nadawca, który steruje odtwarzaniem, a urządzenie Google Cast to odbiornik, który wyświetla treści na ekranie do odtwarzania.

Pakiet Web Sender SDK składa się z 2 części: interfejsu Framework API (cast.framework) i interfejsu Base API (chrome.cast). Zazwyczaj wywołujesz prostszy interfejs Framework API wyższego poziomu, który jest następnie przetwarzany przez interfejs Base API niższego poziomu.

Platforma nadawcy to interfejs API platformy, moduł i powiązane z nimi zasoby, które stanowią otoczkę dla funkcji niższego poziomu. Aplikacja wysyłająca lub aplikacja Google Cast Chrome to aplikacja internetowa (HTML/JavaScript) działająca w przeglądarce Chrome na urządzeniu wysyłającym. Aplikacja Web Receiver to aplikacja HTML/JavaScript działająca na urządzeniu Chromecast lub urządzeniu Google Cast.

Platforma nadawcy korzysta z asynchronicznego wywołania zwrotnego, aby informować aplikację nadawcy o zdarzeniach i przechodzić między różnymi stanami cyklu życia aplikacji Cast.

Wczytywanie biblioteki

Aby aplikacja mogła korzystać z funkcji Google Cast, musi znać lokalizację pakietu Google Cast Web Sender SDK, jak pokazano poniżej. Dodaj parametr zapytania URL loadCastFramework, aby wczytać też interfejs Web Sender Framework API. Wszystkie strony aplikacji muszą odwoływać się do biblioteki w ten sposób:

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

Platforma

Pakiet Web Sender SDK korzysta z przestrzeni nazw cast.framework.*. Przestrzeń nazw reprezentuje:

Metody lub funkcje, które wywołują operacje w interfejsie API
Detektory zdarzeń dla funkcji detektora w interfejsie API

Ramy te składają się z tych głównych komponentów:

CastContext to obiekt singleton, który zawiera informacje o bieżącym stanie Cast i wywołuje zdarzenia związane ze zmianami stanu Cast i sesji Cast.
CastSessionObiekt zarządza sesją – udostępnia informacje o stanie i wywołuje zdarzenia, takie jak zmiany głośności urządzenia, stanu wyciszenia i metadanych aplikacji.
Element przycisku Cast, który jest prostym niestandardowym elementem HTML rozszerzającym przycisk HTML. Jeśli udostępniony przycisk Cast nie jest wystarczający, możesz użyć stanu Cast, aby wdrożyć przycisk Cast.
RemotePlayerController zapewnia powiązanie danych, aby uprościć implementację odtwarzacza zdalnego.

Pełny opis przestrzeni nazw znajdziesz w dokumentacji interfejsu Google Cast Web Sender API.

Przycisk Cast

Komponent przycisku Cast w aplikacji jest w całości obsługiwany przez platformę. Obejmuje to zarządzanie widocznością oraz obsługę zdarzeń kliknięcia.

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

Możesz też utworzyć przycisk programowo:

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

W razie potrzeby możesz zastosować do elementu dodatkowe style, takie jak rozmiar czy pozycjonowanie. Użyj atrybutu --connected-color, aby wybrać kolor dla stanu połączonego odbiornika internetowego, oraz atrybutu --disconnected-color dla stanu odłączonego.

Zdarzenie inicjujące

Po wczytaniu interfejsu API platformy aplikacja wywoła moduł obsługi window.__onGCastApiAvailable. Upewnij się, że aplikacja ustawia ten moduł obsługi w obiekcie window przed wczytaniem biblioteki nadawcy.

W tym module obsługi inicjujesz interakcję Cast, wywołując metodę setOptions(options) obiektu CastContext.

Na przykład:

<script>
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    initializeCastApi();
  }
};
</script>

Następnie zainicjuj interfejs API w ten sposób:

initializeCastApi = function() {
  cast.framework.CastContext.getInstance().setOptions({
    receiverApplicationId: applicationId,
    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
  });
};

Najpierw aplikacja pobiera instancję pojedynczą obiektu CastContext udostępnioną przez platformę. Następnie używa setOptions(options) obiektu CastOptions do ustawienia applicationID.

Jeśli używasz domyślnego odbiornika multimediów, który nie wymaga rejestracji, zamiast applicationID użyj stałej zdefiniowanej przez pakiet Web Sender SDK, jak pokazano poniżej:

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

Sterowanie multimediami

Po zainicjowaniu CastContext aplikacja może w dowolnym momencie pobrać bieżący CastSession za pomocą getCurrentSession().

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

Za pomocą CastSession można przesyłać multimedia na połączone urządzenie Cast za pomocą loadMedia(loadRequest). Najpierw utwórz MediaInfo, używając contentId i contentType oraz wszelkich innych informacji związanych z treścią. Następnie utwórz z niego LoadRequest i podaj wszystkie istotne informacje dotyczące żądania. Na koniec zadzwoń pod numer loadMedia(loadRequest) na urządzeniu CastSession.

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

Metoda loadMedia zwróci Promise, która może być użyta do wykonania wszelkich niezbędnych operacji w celu uzyskania prawidłowego wyniku. Jeśli obietnica zostanie odrzucona, argument funkcji będzie miał wartość chrome.cast.ErrorCode.

Zmienne stanu odtwarzacza są dostępne w RemotePlayer. Wszystkie interakcje z elementem RemotePlayer, w tym wywołania zwrotne zdarzeń związanych z multimediami i polecenia, są obsługiwane za pomocą elementu RemotePlayerController.

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

RemotePlayerController umożliwia aplikacji pełne sterowanie odtwarzaniem multimediów, w tym PLAY, PAUSE, STOP i SEEK.

ODTWARZANIE/PAUZA: playerController.playOrPause();
STOP: playerController.stop();
SEEK: playerController.seek();

Elementy RemotePlayer i RemotePlayerController można wykorzystać z platformami wiązania danych, takimi jak Polymer czy Angular, do wdrożenia odtwarzacza zdalnego.

Oto fragment kodu dla Angulara:

<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>

Stan multimediów

Podczas odtwarzania multimediów występują różne zdarzenia, które można rejestrować, ustawiając detektory dla różnych zdarzeń cast.framework.RemotePlayerEventType na obiekcie RemotePlayerController.

Aby uzyskać informacje o stanie multimediów, użyj zdarzenia cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED, które jest wywoływane, gdy zmienia się odtwarzanie i gdy zmienia się CastSession.getMediaSession().media.

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

Gdy wystąpią zdarzenia takie jak wstrzymanie, odtworzenie, wznowienie lub przewijanie, aplikacja będzie musiała na nie reagować i synchronizować się z aplikacją Web Receiver na urządzeniu Cast. Więcej informacji znajdziesz w sekcji Aktualizacje stanu.

Jak działa zarządzanie sesjami

Pakiet Cast SDK wprowadza pojęcie sesji Cast, której utworzenie łączy kroki połączenia z urządzeniem, uruchomienia (lub dołączenia do) aplikacji Web Receiver, połączenia z tą aplikacją i inicjowania kanału sterowania multimediami. Więcej informacji o sesjach Cast i cyklu życia odbiornika internetowego znajdziesz w przewodniku po cyklu życia aplikacji.

Sesjami zarządza klasa CastContext, którą aplikacja może pobrać za pomocą cast.framework.CastContext.getInstance(). Poszczególne sesje są reprezentowane przez podklasy klasy Session. Na przykład CastSession oznacza sesje na urządzeniach przesyłających. Aplikacja może uzyskać dostęp do aktualnie aktywnej sesji Cast za pomocą interfejsu CastContext.getCurrentSession().

Aby monitorować stan sesji, dodaj detektor do zdarzenia CastContext dla typu zdarzenia CastContextEventType.SESSION_STATE_CHANGED.

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

W przypadku rozłączenia, np. gdy użytkownik kliknie przycisk „Zatrzymaj przesyłanie” w oknie przesyłania, możesz dodać detektor zdarzeń typu RemotePlayerEventType.IS_CONNECTED_CHANGED. Sprawdź, czy odbiornik RemotePlayer jest odłączony. Jeśli tak, zaktualizuj stan lokalnego odtwarzacza. Na przykład:

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED, function() {
    if (!player.isConnected) {
      console.log('RemotePlayerController: Player disconnected');
      // Update local player to disconnected state
    }
  });

Użytkownik może bezpośrednio kontrolować zakończenie przesyłania za pomocą przycisku przesyłania w ramach platformy, ale nadawca może też zatrzymać przesyłanie za pomocą bieżącego obiektu CastSession.

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

Przeniesienie odtwarzania

Zachowanie stanu sesji jest podstawą przenoszenia strumieni, dzięki czemu użytkownicy mogą przenosić istniejące strumienie audio i wideo między urządzeniami za pomocą poleceń głosowych, aplikacji Google Home lub inteligentnych ekranów. Odtwarzanie multimediów zatrzymuje się na jednym urządzeniu (źródłowym) i jest kontynuowane na innym (docelowym). Każde urządzenie Cast z najnowszym oprogramowaniem może być źródłem lub miejscem docelowym podczas przesyłania strumieniowego.

Aby otrzymać nowe urządzenie docelowe podczas przesyłania strumieniowego, wywołaj CastSession#getCastDevice(), gdy zostanie wywołane zdarzenie cast.framework.SessionState.SESSION_RESUMED.

Więcej informacji znajdziesz w artykule Przesyłanie strumieniowe na odbiorniku internetowym.

Wstecz

Konfiguracja

Dalej

Dodaj funkcje zaawansowane