Dodawanie pomocy na żywo do odbiornika Cast

1. Omówienie

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak utworzyć niestandardową aplikację 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 Google Cast SDK umożliwia rozszerzenie aplikacji o sterowanie telewizorem lub systemem audio. SDK Cast pozwala dodać niezbędne komponenty interfejsu zgodnie z listą kontrolną projektu Google Cast.

Znajdziesz tam listę kontrolną projektowania Google Cast, która ułatwia i przewidywalność korzystania z Google Cast na wszystkich obsługiwanych platformach.

Co utworzymy?

Po ukończeniu tego ćwiczenia w programowaniu będziesz mieć odbiornik Cast, który będzie 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. Hosting Firebase lub ngrok.
• Urządzenie przesyłające Google Cast, takie jak Chromecast lub Android TV, skonfigurowane z dostępem do internetu.
• Telewizor lub monitor z wejściem HDMI albo Google Home Hub.

Doświadczenie

• Niezbędna jest do tego wiedza o programowaniu stron internetowych.
• Poprzednie tworzenie nadawcy i aplikacji odbiorników.

2. Pobieranie przykładowego kodu

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

file_downloadPobieranie kodu źródłowego

i rozpakuj pobrany plik ZIP.

3. Lokalne wdrażanie odbiornika

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ż dostępny serwer obsługujący protokół https, pomiń poniższe instrukcje i zanotuj adres URL, ponieważ będzie on potrzebny w następnej sekcji.

Jeśli nie masz serwera do użycia, możesz skorzystać z Hostingu Firebase lub ngrok.

Uruchamianie serwera

Po skonfigurowaniu wybranej usługi przejdź do app-start i uruchom serwer.

Zanotuj adres URL hostowanego odbiornika. Wykorzystasz go w następnej sekcji.

4. Rejestrowanie aplikacji w konsoli programisty Cast

Aby na urządzeniach Chromecast uruchamiać niestandardowy odbiornik (wbudowany w tym ćwiczeniu w Codelabs), musisz zarejestrować swoją aplikację. Po zarejestrowaniu aplikacji otrzymasz identyfikator, którego aplikacja nadawcy musi używać do wykonywania wywołań interfejsu API, np. uruchamiania aplikacji odbierającej.

Kliknij „Dodaj nową aplikację”

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

Wpisz dane nowego odbiornika, pamiętaj, aby użyć adresu URL

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

Musisz też zarejestrować urządzenie Google Cast, by mogło ono uzyskiwać dostęp do aplikacji odbiornika 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.

Kliknij „Dodaj nowe urządzenie”.

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 po otwarciu konsoli programisty Google Cast SDK.

Przygotowanie odbiornika i urządzenia do testów zajmie 5–15 minut. Po odczekaniu 5–15 minut musisz zrestartować urządzenie przesyłające.

5. Przesyłanie prostej transmisji na żywo

Przed rozpoczęciem tego ćwiczenia w programowaniu warto zapoznać się z przewodnikiem dla programistów w wersji na żywo, który zawiera omówienie działających interfejsów API.

Nadawca użyje narzędzia Cactool, aby rozpocząć sesję przesyłania. Odbiornik automatycznie rozpoczyna odtwarzanie transmisji na żywo.

Odbiornik składa się z trzech plików. Podstawowy plik HTML o nazwie receiver.html, który zawiera główną strukturę aplikacji. Nie musisz go modyfikować. Istnieje też plik o nazwie receiver.js, który zawiera wszystkie funkcje logiczne dotyczące 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 odbiornika podany w konsoli programisty pakietu Cast SDK i kliknij Set (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ę, wpisując następujący wiersz kodu. Dodaj go do głównej części czujnika obciążenia w interfejsie receiver.js:

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

Ustawienie typu strumienia na LIVE włącza aktywny interfejs użytkownika CAF. Pakiet Web Receiver SDK automatycznie przejdzie do brzegu transmisji na żywo. Dane przewodnika po programach na żywo nie zostały jeszcze dodane, więc pasek przewijania będzie reprezentował pełną długość zakresu do przewijania strumienia.

Zapisz zmiany w usłudze receiver.js i rozpocznij sesję przesyłania w Cactool, klikając przycisk przesyłania i wybierając docelowe urządzenie przesyłające. Odtwarzanie transmisji na żywo powinno rozpocząć się natychmiast.

6. Dodawanie danych przewodnika po programach

Funkcja CAF w przypadku treści na żywo obejmuje teraz również wyświetlanie danych przewodnika po programach w aplikacjach odbierających i nadawców. Zdecydowanie zachęcamy dostawców treści do dodawania metadanych programów do aplikacji do odbiorników w celu poprawy komfortu użytkowników, zwłaszcza w przypadku długotrwałych transmisji na żywo, takich jak kanały telewizyjne.

CAF umożliwia ustawianie metadanych wielu programów w jednym strumieniu. Po ustawieniu sygnatur czasowych i czasów trwania w obiektach MediaMetadata odbiorca automatycznie aktualizuje metadane wyświetlane u nadawców i nakładki na podstawie bieżącej lokalizacji odtwarzacza w strumieniu. Poniżej znajdziesz przykładowe interfejsy API i ich ogólne 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 container. ContainerMetadata zawiera listę obiektów MediaMetadata dla pojedynczego strumienia multimediów. Każdy obiekt MediaMetadata odpowiada jednej sekcji w kontenerze. Gdy suwak odtwarzania znajdzie się w granicach określonej 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 dodaj wywołanie do funkcji służącej do wczytywania danych przewodnika w elemencie przechwytującym obciążenia:

loadGuideData();

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

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. Zaleca się, aby aplikacje odbierające aktualizowały metadane kontenera w mechanizmie przechwytującym stanu multimediów, aby w dalszym ciągu przekazywały informacje o programie do aplikacji nadawcy. 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 jak w poprzednim przykładzie.

7. Wyłączanie przewijania

Większość strumieni wideo składa się z segmentów zawierających różne klatki wideo. O ile nie określono inaczej, CAF umożliwi użytkownikom 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. Wyłącza to przewijanie we wszystkich interfejsach dotykowych i nadawców na urządzeniach mobilnych. Dodaj ten kod po definicjach zmiennych instancji pakietu SDK w dokumencie 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, przewiń do tyłu o 60 sekund, należy użyć funkcji przechwytywania przewijania. Ten element przechwytujący jest wywoływany za każdym razem, gdy wysyłane jest żądanie wyszukiwania. Jeśli polecenie multimedialne obsługiwane przez funkcję SEEK jest wyłączone, funkcja przechwytująca 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. Przewijanie w trakcie transmisji na żywo nie powinno już być możliwe.

8. Gratulacje

Wiesz już, jak utworzyć niestandardową aplikację odbiornika za pomocą najnowszego pakietu SDK Cast Receiver.

Więcej informacji znajdziesz w Przewodniku dla deweloperów transmisji na żywo.