Zintegruj SDK Cast z aplikacją Web Sender

Ten przewodnik dla programistów zawiera informacje o tym, jak dodać obsługę Google Cast do stron internetowych. Aplikacja nadawcy przy użyciu pakietu SDK Cast.

Uwaga: zalecamy wykonanie tych czynności:

.
• Cast Web Sender samouczek ćwiczeń z programowania – Dowiedz się, jak krok po kroku zmodyfikować istniejącą aplikację internetową do odtwarzania filmów na urządzeniu Google Cast.
• Przykładowa aplikacja Castvideos-chrome (GitHub) - Uruchom, poruszaj się i wyświetlaj tę przykładową aplikację referencyjną, która spełnia wskazówkami UX oraz Lista kontrolna projektu.

Terminologia

Urządzeniem mobilnym lub przeglądarką jest nadawca, który steruje odtwarzaniem. urządzenie Google Cast jest odbiornikiem, który wyświetla treści na ekran do odtwarzania.

Pakiet Web Sender SDK składa się z 2 części: interfejsu Framework API (cast.framework) oraz Base API (chrome.cast) Ogólnie rzecz biorąc, wykonujesz wywołania prostszego, wyższego poziomu interfejsu Framework API, które są następnie przetwarzane przez interfejs API niższego poziomu.

Platforma nadawcy odnosi się do interfejsu API platformy, modułu i powiązanych które zapewniają otokę funkcji niższego poziomu. aplikacja nadawcy lub aplikacja Google Cast do Chrome odnosi się do aplikacji internetowej (HTML/JavaScript) uruchomione w przeglądarce Chrome na urządzeniu nadawcy. Aplikacja odbiornika internetowego, do aplikacji HTML/JavaScript działającej na Chromecaście lub urządzeniu Google Cast.

Platforma nadawcy korzysta z asynchronicznego projektu wywołania zwrotnego do informowania nadawcy możesz w niej używać zdarzeń i przełączać się między różnymi stanami aplikacji Cast. cyklu.

Wczytaj bibliotekę

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

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

Platforma

Web Sender SDK używa cast.framework.*. przestrzeni nazw. Przestrzeń nazw reprezentuje:

• Metody lub funkcje, które wywołują operacje na interfejsie API
• Detektory zdarzeń funkcji odbiornika w interfejsie API

Platforma składa się z tych głównych elementów:

• CastContext to pojedynczy obiekt, który dostarcza informacje o obecny stan przesyłania i wyzwala zdarzenia dotyczące stanu przesyłania i sesji przesyłania. zmian stanu.
• CastSession obiekt zarządza sesją – udostępnia stan informacji i wywoływania zdarzeń, takich jak zmiana głośności urządzenia, wyciszenia i metadanych aplikacji.
• Przycisk Cast, czyli prosty niestandardowy element HTML, rozszerza przycisk HTML. Jeśli dostępny przycisk Cast nie jest wystarczający, za pomocą stanu przesyłania możesz zaimplementować przycisk Cast.
• RemotePlayerController udostępnia wiązanie danych, aby uprościć implementację odtwarzacza zdalnego.

Zapoznaj się z Dokumentacja interfejsu Google Cast Web Sender API pełny opis przestrzeni nazw.

Przycisk Cast

Komponent przycisku przesyłania w aplikacji jest obsługiwany w całości przez platformę. Ten obejmuje zarządzanie widocznością oraz obsługę zdarzeń kliknięcia.

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

Możesz też utworzyć przycisk automatycznie:

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

Do zgodnie z potrzebami. Użyj atrybutu --connected-color, aby: wybrać kolor stanu podłączonego odbiornika internetowego, --disconnected-color oznacza stan braku połączenia.

Zdarzenie inicjujące

Po wczytaniu interfejsu API platformy aplikacja wywoła moduł obsługi. window.__onGCastApiAvailable Musisz się upewnić, że aplikacja ustawia ten moduł obsługi w window przed załadowaniem biblioteki nadawców.

W tym module obsługi zainicjujesz interakcję z przesyłaniem przez wywołanie metody setOptions(options) metoda CastContext

Na przykład:

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

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

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

Najpierw aplikacja pobiera pojedynczą instancję instancji CastContext obiekt dostępnych w ramach zasad. Następnie wykorzystuje setOptions(options) za pomocą CastOptions obiekt aby ustawić applicationID.

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

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

Sterowanie multimediami

Gdy CastContext została zainicjowana, aplikacja może pobrać bieżącą CastSession w dowolnym za pomocą getCurrentSession().

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

Za pomocą urządzenia CastSession można ładować multimedia do połączonego urządzenia przesyłającego za pomocą loadMedia(loadRequest) Najpierw utwórz MediaInfo, korzysta z contentId i contentType oraz innych informacji związane z ich treścią. Następnie utwórz LoadRequest wraz ze wszystkimi informacjami wymaganymi do zgłoszenia. I na koniec, Zadzwoń do firmy 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 błąd Promise za pomocą których można wykonać wszelkie niezbędne działania do osiągnięcia pożądanego wyniku. Jeśli obietnica zostanie odrzucona, argumentem funkcji będzie chrome.cast.ErrorCode

Zmienne stanu odtwarzacza znajdziesz w RemotePlayer Wszystkie interakcje z polem RemotePlayer, w tym wywołania zwrotne zdarzeń multimedialnych są obsługiwane za pomocą RemotePlayerController

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

RemotePlayerController daje aplikacji pełną kontrolę nad multimediami ODTWÓRZ, WSTRZYMAJ, ZATRZYMAJ i WYSZUKAJ, aby wyświetlić wczytane multimedia.

• ODTWÓRZ/WSTRZYMAJ: playerController.playOrPause();
• ZATRZYMAJ: playerController.stop();
• WYSZUKIWANIE: playerController.seek();

Elementy RemotePlayer i RemotePlayerController mogą być używane z platformami wiązania danych, takimi jak Polymer czy Angular, zdalnego odtwarzacza.

Oto fragment kodu 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>

Stan multimediów

Podczas odtwarzania multimediów mają miejsce różne zdarzenia, które można zarejestrować za pomocą słuchaczy różnych pasji cast.framework.RemotePlayerEventType wydarzenia na RemotePlayerController.

Aby uzyskać informacje o stanie multimediów, skorzystaj z cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED , które jest wyzwalane, gdy odtwarzanie się zmienia i gdy CastSession.getMediaSession().media zmian.

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ępują zdarzenia takie jak wstrzymanie, odtworzenie, wznowienie lub przewijanie, aplikacja musi podjąć działanie i synchronizować je z aplikacją Web Receiver na urządzenia. Sprawdź aktualizacje stanu. .

Jak działa zarządzanie sesjami

SDK Cast wprowadza pojęcie sesji przesyłania: instytucja łącząca etapy łączenia się z urządzeniem, uruchamiania (lub łączenia) z internetem Aplikacja odbiornika, łączenie się z nią i inicjowanie kanału sterowania multimediami. Zobacz odbiornik internetowy Przewodnik po cyklu życia zgłoszenia , by dowiedzieć się więcej o sesjach przesyłania i cyklu życia odbiornika internetowego.

Sesjami zarządza zajęcia CastContext, które aplikacja może pobrać cast.framework.CastContext.getInstance() Poszczególne sesje są reprezentowane przez podklasy klasy Session Przykład: CastSession reprezentuje sesje z urządzeniami przesyłającymi. Aplikacja może uzyskać dostęp do obecnie aktywnych Sesja przesyłania przez CastContext.getCurrentSession()

Aby monitorować stan sesji, dodaj detektor do CastContext za Typ 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;
    }
  })

rozłączenie, na przykład gdy użytkownik kliknie „Zatrzymaj przesyłanie”. przycisk z w oknie Cast, możesz dodać detektor dla RemotePlayerEventType.IS_CONNECTED_CHANGED typ zdarzenia w detektorze. W detektorze sprawdź, czy RemotePlayer to – rozłączono. Jeśli tak, w razie potrzeby 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ą platformy Cast nadawca może zatrzymać przesyłanie przy użyciu CastSession obiektu.

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

Przenoszenie strumienia

Zachowywanie stanu sesji jest podstawą transferu, gdzie użytkownicy mogą przenosić istniejące strumienie audio i wideo między urządzeniami, używając poleceń głosowych. Google Home Aplikacja lub inteligentne ekrany. Multimedia przestaje się odtwarzać na jednym urządzeniu (źródle) i kontynuuje na innym ( miejsce docelowe). Każde urządzenie przesyłające z najnowszą wersją oprogramowania może służyć jako źródło lub miejsce docelowe w przesyłanie strumienia.

Aby pobrać nowe urządzenie docelowe podczas przenoszenia transmisji, wywołaj połączenie CastSession#getCastDevice() gdy cast.framework.SessionState.SESSION_RESUMED .

Zobacz Przesyłanie strumienia w internetowym odbiorniku .