Dodawanie pomocy na żywo do odbiornika Cast

1. Omówienie

Logo Google Cast

W tym ćwiczeniu w Codelabs dowiesz się, jak utworzyć aplikację niestandardowego odbiornika internetowego, która korzysta z interfejsu Cast Live Breaks API.

Co to jest Google Cast?

Google Cast umożliwia użytkownikom przesyłanie treści z urządzenia mobilnego na telewizor. Dzięki temu użytkownicy mogą używać swoich urządzeń mobilnych jako pilota do odtwarzania multimediów na telewizorze.

Pakiet SDK Google Cast umożliwia rozszerzenie aplikacji o możliwość sterowania telewizorem lub systemem audio. SDK Cast pozwala dodać niezbędne komponenty interfejsu zgodnie z listą kontrolną projektu Google Cast.

Lista kontrolna dotycząca projektowania Google Cast została przygotowana, aby zapewnić użytkownikom Cast proste i przewidywalne wrażenia na wszystkich obsługiwanych platformach.

Co utworzymy?

Po ukończeniu tego ćwiczenia będziesz mieć już gotowy odbiornik Cast, który korzysta z interfejsów Live API.

Czego się nauczysz

  • Jak obsługiwać treści wideo na żywo w funkcji Cast.
  • Jak skonfigurować różne scenariusze transmisji na żywo obsługiwane przez Cast.
  • Jak dodać dane programu do transmisji na żywo

Czego potrzebujesz

  • Najnowsza przeglądarka Google Chrome
  • usługa hostingu HTTPS, np. Firebase Hosting lub ngrok.
  • Urządzenie Google Cast, takie jak Chromecast lub Android TV skonfigurowane z dostępem do internetu.
  • telewizor lub monitor z wejściem HDMI albo urządzenie Google Home Hub.

Doświadczenie

  • Musisz mieć już wcześniejsze doświadczenie w programowaniu stron internetowych.
  • Doświadczenie w tworzeniu aplikacji przesyłających i odbiorujących treści na Chromecasta.

Jak wykorzystasz ten samouczek?

Tylko przeczytać Przeczytać i wykonać ćwiczenia

Jak oceniasz tworzenie aplikacji internetowych?

Początkujący Średnio zaawansowany Zaawansowany

2. Pobieranie przykładowego kodu

Możesz pobrać cały przykładowy kod na swój komputer...

i rozpakuj pobrany plik ZIP.

3. Wdrażanie odbiornika lokalnie

Aby można było korzystać z odbiornika internetowego z urządzeniem przesyłającym, musi on być hostowany w miejscu, w którym urządzenie przesyłające ma do niego dostęp. Jeśli masz już serwer, który obsługuje protokół https, pomiń te instrukcje i zapisz adres URL, ponieważ będzie Ci on potrzebny w następnej sekcji.

Jeśli nie masz serwera, możesz użyć hostingu Firebase lub ngrok.

Uruchamianie serwera

Gdy skonfigurujesz wybraną usługę, otwórz app-start i uruchom serwer.

Zapisz adres URL hostowanego odbiornika. Użyjesz go w następnej sekcji.

4. Rejestrowanie aplikacji w Konsoli programisty Cast

Aby móc uruchamiać niestandardowy odbiornik na urządzeniach Chromecast, musisz zarejestrować aplikację. Po zarejestrowaniu aplikacji otrzymasz identyfikator aplikacji, którego aplikacja nadawcza musi używać do wykonywania wywołań interfejsu API, np. do uruchamiania aplikacji odbiorcy.

Obraz konsoli deweloperów Google Cast SDK z wyróżnionym przyciskiem „Dodaj nową aplikację”

Kliknij „Dodaj nową aplikację”.

Obraz ekranu „Nowa aplikacja odbiornika” z wyróżnioną opcją „Niestandardowy odbiornik”

Wybierz „Niestandardowy odbiornik”, czyli właśnie to tworzymy.

Zrzut ekranu z ekranem „Nowy odbiornik niestandardowy” z adresem URL wpisywanym w polu „Adres URL aplikacji odbiorczej”

Wpisz dane nowego odbiorcy. Pamiętaj, aby użyć adresu URL, który został utworzony.

w ostatniej sekcji. Zanotuj identyfikator aplikacji przypisany do nowego odbiornika.

Musisz też zarejestrować urządzenie Google Cast, aby mogło uzyskać dostęp do aplikacji odbiorczej przed jej opublikowaniem. Po opublikowaniu aplikacja odbiornika będzie dostępna dla wszystkich urządzeń Google Cast. Na potrzeby tego ćwiczenia z programowania zaleca się korzystanie z nieopublikowanej aplikacji odbierającej.

Obraz konsoli dewelopera Google Cast SDK z wyróżnionym przyciskiem „Dodaj nowe urządzenie”

Kliknij „Dodaj nowe urządzenie”.

Obraz okna „Dodaj urządzenie odbierające przesyłanie”

Wpisz numer seryjny wydrukowany z tyłu urządzenia przesyłającego i nadaj mu opisową nazwę. Numer seryjny możesz też znaleźć, przesyłając ekran w Chrome podczas otwierania konsoli programisty Google Cast SDK.

Przygotowanie odbiornika i urządzenia do testów zajmie 5–15 minut. Po 5–15 minutach musisz zrestartować urządzenie z Castem.

5. Przesyłanie prostej transmisji na żywo

Obraz telefonu z Androidem odtwarzającego film. U dołu, tuż nad elementami sterującymi odtwarzaczem, pojawia się komunikat „Przesyłanie do pokoju dziennego”Obraz pełnowymiarowego ekranu z odtwarzanym filmem

Zanim zaczniesz korzystać z tego Codelab, warto zapoznać się z  przewodnikiem dla deweloperów, który zawiera omówienie interfejsów API na żywo.

W przypadku nadawcy sesję przesyłania rozpoczniemy za pomocą narzędzia Cactool. Odbiornik jest zaprojektowany tak, aby automatycznie rozpocząć odtwarzanie transmisji na żywo.

Odbiornik składa się z 3 plików. Podstawowy plik HTML o nazwie receiver.html, który zawiera główną strukturę aplikacji. Nie musisz modyfikować tego pliku. Jest też plik o nazwie receiver.js, który zawiera całą logikę dla odbiornika. Dostępny jest też obiekt metadata_service.js, który zostanie później użyty w ramach ćwiczeń z programowania do symulacji uzyskiwania danych z przewodnika po programach.

Aby rozpocząć, otwórz Cactool w Chrome. Wpisz identyfikator aplikacji odbiorcy podany w konsoli dewelopera pakietu Cast SDK i kliknij Ustaw.

Program Web Receiver Cast Application Framework (CAF) musi zostać poinformowany, że treść, która ma zostać odtworzona, jest transmisją na żywo. Aby to zrobić, zmodyfikuj aplikację za pomocą tego wiersza kodu. Dodaj go do głównego elementu przechwytu ładunku w pliku receiver.js:

request.media.streamType = cast.framework.messages.StreamType.LIVE;

Ustawienie typu strumienia na LIVE powoduje włączenie interfejsu CAF na żywo. Pakiet SDK Web Receiver automatycznie przejdzie do transmisji na żywo. Dane przewodnika po programach na żywo nie zostały jeszcze dodane, więc suwak będzie reprezentować pełny zakres przeskakiwania w transmisji.

Zapisz zmiany w receiver.js i rozpocznij sesję przesyłania w Cactool, klikając przycisk przesyłania i wybierając docelowe urządzenie do przesyłania. Transmisja na żywo powinna się od razu rozpocząć.

6. Dodawanie danych przewodnika po programach

Obsługa treści na żywo w CAF obejmuje teraz wyświetlanie danych przewodnika po programach w aplikacjach odbiornika i nadajnika. Dostawcom treści zalecamy, aby uwzględniali metadane programów w swoich aplikacjach odbiorczych. Dzięki temu użytkownicy będą mogli lepiej korzystać z treści, zwłaszcza w przypadku długich transmisji na żywo, takich jak kanały telewizyjne.

Format CAF obsługuje ustawianie metadanych dla wielu programów w jednym strumieniu. Ustawiając sygnatury czasowe rozpoczęcia i czas trwania obiektów MediaMetadata, odbiornik automatycznie aktualizuje metadane wyświetlane na nadajnikach i nakładkę na podstawie bieżącej lokalizacji odtwarzacza w strumieniu. Poniżej znajdziesz przykłady interfejsów API i ich ogólnego zastosowania.

// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;

W ramach tych ćwiczeń w programie wykorzystamy przykładową usługę metadanych, aby udostępnić metadane transmisji na żywo. Aby utworzyć listę metadanych programu, utwórz kontener. Obiekt ContainerMetadata zawiera listę obiektów MediaMetadata dla jednego strumienia multimediów. Każdy obiekt MediaMetadata reprezentuje jedną sekcję w kontenerze. Gdy suwak odtwarzania znajduje się w granicach danej sekcji, jej metadane są automatycznie kopiowane do stanu multimediów. Dodaj poniższy kod do pliku receiver.js, aby pobrać przykładowe metadane z naszej usługi i udostępnić kontener w CAF.

/**
 *   Gets the current program guide data from the sample MetadataService. Once
 *   obtained, the guide information is added using QueueManager.
 */
async function loadGuideData() {
  const data = await MetadataService.fetchLiveMetadata();
  const containerMetadata = new cast.framework.messages.ContainerMetadata();
  containerMetadata.sections = data;

  playerManager.getQueueManager().setContainerMetadata(containerMetadata);
}

Dodatkowo w przechwytywaczach wczytywania dodaj wywołanie funkcji wczytywania danych przewodnika:

loadGuideData();

Zapisz plik receiver.js i rozpocznij sesję przesyłania. Na ekranie powinny wyświetlać się godzina rozpoczęcia i zakończenia programu oraz jego tytuł.

Nowy komunikat o stanie multimediów jest wysyłany od odbiorcy do wszystkich nadawców, gdy suwak odtwarzania przejdzie do nowej sekcji w kontenerze, aby aplikacje nadawcy mogły zaktualizować swój interfejs użytkownika. Zalecamy, aby aplikacje odbierające aktualizowały metadane kontenera w przechwytywaniach stanu multimediów, aby nadal przekazywać informacje o programie do aplikacji nadających. W naszej przykładowej usłudze zwracamy aktualne metadane programu, a także metadane dwóch następnych programów. Aby zaktualizować metadane strumienia, utwórz nowy kontener i wywołaj funkcję setContainerMetadata, tak jak w poprzednim przykładzie.

7. Wyłączanie przewijania

Większość strumieni wideo składa się z segmentów zawierających zakres klatek wideo. O ile nie określono inaczej, CAF pozwoli użytkownikom na wyszukiwanie w tych segmentach. Odbiornik internetowy może to określić, wywołując kilka dostępnych interfejsów API.

W narzędziu do przechwytywania obciążenia usuń polecenie multimedialne obsługiwane przez SEEK. Spowoduje to wyłączenie przewijania we wszystkich interfejsach nadawców mobilnych i dotykowych. Dodaj ten kod po definicjach zmiennych instancji pakietu SDK w pliku receiver.js.

// Disable seeking
playerManager.removeSupportedMediaCommands(
    cast.framework.messages.Command.SEEK, true);

Aby wyłączyć polecenia głosowe obsługiwane przez Asystenta, takie jak OK Google, przeskocz o 60 sekund wstecz, należy użyć przechwytywania przeskakiwania. Ten przechwytujący jest wywoływany za każdym razem, gdy wysłano żądanie przesunięcia. Jeśli polecenie multimediów obsługiwane przez funkcję SEEK jest wyłączone, przechwytujący odrzuci żądanie przewijania. Dodaj do pliku receiver.js ten fragment kodu:

/**
 * A seek interceptor is called whenever CAF receives a request to seek to
 * a different location in media. This interceptor can be used to modify that
 * seek request or disable seeking completely.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
      // if the SEEK supported media command is disabled, block seeking
      if (!(playerManager.getSupportedMediaCommands() &
            cast.framework.messages.Command.SEEK)) {
        castDebugLogger.info(TAG, 'Seek blocked.');
        return null;
      }

      return seekRequestData;
    });

Zapisz plik receiver.js i rozpocznij sesję przesyłania. Nie powinno być już możliwe przewijanie transmisji na żywo.

8. Gratulacje

Wiesz już, jak utworzyć niestandardową aplikację odbiorczą za pomocą najnowszego pakietu SDK odbiornika przesyłania.

Więcej informacji znajdziesz w przewodniku dla programistów dotyczącym transmitowania na żywo.