Debugowanie aplikacji odbiornika Cast

1. Omówienie

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak dodać rejestrator Cast Debugger do swojej bieżącej aplikacji niestandardowego odbiornika internetowego.

Co to jest Google Cast?

Pakiet SDK Google Cast umożliwia odtwarzanie treści i sterowanie odtwarzaniem na urządzeniach obsługujących Google Cast. Zawiera niezbędne komponenty interfejsu użytkownika na podstawie listy kontrolnej dotyczącej interfejsu 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 będziemy budować?

Po zakończeniu tego ćwiczenia będziesz mieć niestandardowy odbiornik internetowy zintegrowany z rejestratorem błędów Cast.

Szczegółowe informacje znajdziesz w przewodniku po narzędziu Cast Debug Logger.

Czego się nauczysz

• Jak skonfigurować środowisko do tworzenia odbiornika internetowego.
• Jak zintegrować Debug Logger z odbiornikiem Cast.

Czego potrzebujesz

• najnowsza wersja przeglądarki 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.

Doświadczenie

• Musisz wcześniej korzystać z funkcji przesyłania i wiedzieć, jak działa ten odbiornik.
• Niezbędna jest do tego wiedza o programowaniu stron internetowych.
• Musisz też znać zasady oglądania telewizji :)

2. Pobieranie przykładowego kodu

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

file_downloadPobierz źródło

i rozpakuj pobrany plik ZIP.

3. Lokalne wdrożenie odbiornika

Aby można było używać odbiornika internetowego z urządzeniem Google Cast, musi on być hostowany w miejscu, do którego może dotrzeć urządzenie Google Cast. 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, 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ć na urządzeniach Chromecast niestandardowy odbiornik internetowy zgodnie z instrukcjami w tym ćwiczeniu w programowaniu, musisz zarejestrować swoją 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.

Kliknij „Dodaj nową aplikację”.

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

Wpisz dane nowego odbiorcy, używając adresu URL z poprzedniej 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 aplikacji odbiorczej będzie ona dostępna na wszystkich urządzeniach 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 Cast i nadaj mu nazwę. Numer seryjny możesz też znaleźć, przesyłając ekran w Chrome, gdy otwierasz konsolę dewelopera Google Cast SDK.

Przygotowanie odbiornika i urządzenia do testowania może zająć 5–15 minut. Po 5–15 minutach musisz zrestartować urządzenie z Castem.

5. Uruchamianie przykładowej aplikacji

Zanim nowy Web Receiver będzie gotowy do testowania, zobaczmy, jak wygląda gotowa aplikacja Web Receiver. Odbiornik, który zamierzamy zbudować, będzie mógł odtwarzać multimedia przy użyciu strumieniowego przesyłania danych z adaptacyjną szybkością transmisji.

1. Otwórz w przeglądarce narzędzia do zarządzania.

2. Użyj domyślnego identyfikatora odbiorcy CC1AD845 i kliknij przycisk SET APP ID.
3. Kliknij przycisk Cast w lewym górnym rogu i wybierz urządzenie obsługujące Google Cast.

4. U góry kliknij kartę LOAD MEDIA.

5. Zmień przycisk opcji typu prośby na LOAD.
6. Kliknij przycisk SEND REQUEST, aby odtworzyć film pokazowy.
7. Na urządzeniu obsługującym Google Cast rozpocznie się odtwarzanie filmu, aby zaprezentować podstawowe funkcje odbiornika przy użyciu domyślnego odbiornika.

6. Przygotowywanie projektu początkowego

Musimy dodać obsługę Google Cast do pobranej przez Ciebie aplikacji startowej. Oto terminologia dotycząca Google Cast, której będziemy używać w tym ćwiczeniu z programowania:

• aplikacja nadawca działa na urządzeniu mobilnym lub laptopie,
• na urządzeniu Google Cast lub Android TV działa aplikacja odbiorca.

Teraz możesz rozszerzyć projekt startowy za pomocą ulubionego edytora tekstu:

1. Wybierz katalog app-start z pobranego przykładowego kodu.
2. Otwórz js/receiver.js i index.html

Podczas pracy z tym laboratorium kodu http-server powinien rejestrować wprowadzane przez Ciebie zmiany. Jeśli to nie pomoże, zatrzymaj i uruchom ponownie http-server.

Projektowanie aplikacji

Aplikacja odbiornika inicjuje sesję przesyłania i będzie w trybie gotowości, dopóki nie nadejdzie żądanie LOAD (np. polecenie odtwarzania multimediów).

Aplikacja składa się z 1 widoku głównego zdefiniowanego w pliku index.html oraz 1 pliku JavaScript o nazwie js/receiver.js zawierającego całą logikę potrzebną do działania odbiornika.

index.html

Ten plik HTML zawiera cały interfejs użytkownika naszej aplikacji odbiorczej.

receiver.js

Ten skrypt zarządza całą logiką aplikacji odbiorczej.

Najczęstsze pytania

• Co to jest Google Cast?
• Jak zostać programistą Google Cast?

7. Integracja z interfejsem CastDebugLogger API

SDK Cast Receiver to kolejna opcja, dzięki której deweloperzy mogą łatwo debugować aplikację odbiornika. Służy do tego interfejs CastDebugLogger API.

Szczegółowe informacje i więcej informacji znajdziesz w przewodniku Cast Debug Logger.

Zdarzenie inicjujące

Dodaj ten skrypt do tagu <head> w aplikacji odbiorczej tuż po skrypcie pakietu SDK odbiornika internetowego w tagu index.html:

<head>
  ...
  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <!-- Cast Debug Logger -->
  <script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>

W funkcji js/receiver.js u góry pliku i pod funkcją playerManager pobierz instancję CastDebugLogger i włącz rejestrator w słuchaczu zdarzeń READY:

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

Gdy rejestrator debugowania jest włączony, na urządzeniu odbiorczym wyświetla się nakładka DEBUG MODE.

Zdarzenia z dziennika odtwarzacza

Korzystając z CastDebugLogger, możesz łatwo rejestrować zdarzenia odtwarzacza wywoływane przez pakiet SDK Cast Web Receiver SDK i rejestrować dane zdarzeń na różnych poziomach rejestrowania. Konfiguracja loggerLevelByEvents przyjmuje parametry cast.framework.events.EventType i cast.framework.events.category, aby określić zdarzenia do zarejestrowania.

Aby rejestrować zdarzenia READY odtwarzacza po ich wywołaniu lub zmianę mediaStatus, dodaj te instrukcje pod detektorem zdarzeń READY:CORE

...

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
};

Komunikaty dziennika i tagi niestandardowe

Interfejs API CastDebugLogger umożliwia tworzenie komunikatów logowania, które wyświetlają się na nakładce debugowania odbiornika w różnych kolorach. Użyj tych metod rejestrowania, które są wymienione w kolejności od najwyższego do najniższego priorytetu:

• castDebugLogger.error(custom_tag, message);
• castDebugLogger.warn(custom_tag, message);
• castDebugLogger.info(custom_tag, message);
• castDebugLogger.debug(custom_tag, message);

W przypadku każdej metody logowania pierwszy parametr powinien być tagiem niestandardowym, a drugim – komunikatem logu. Tag może być dowolnym ciągiem tekstowym, który uznasz za przydatny.

Aby wyświetlić logi w działaniu, dodaj je do przechwytywacza LOAD.

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.LOAD,
      loadRequestData => {
    // Listed in order from highest to lowest priority.
    castDebugLogger.error(LOG_TAG, 'Test error log');

    castDebugLogger.warn(LOG_TAG, 'Test warn log');

    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request', loadRequestData);

    castDebugLogger.debug(LOG_TAG, 'Test debug log');

    return loadRequestData;
  }
);

Możesz kontrolować, które komunikaty będą się wyświetlać w przeźroczystym oknie debugowania, ustawiając poziom logowania w  dla każdego tagu niestandardowego.loggerLevelByTags Na przykład włączenie niestandardowego tagu o poziomie logowania cast.framework.LoggerLevel.DEBUG spowoduje wyświetlenie wszystkich dodanych komunikatów z błędami, ostrzeżeniami, informacjami i komunikatami z dziennika debugowania. Innym przykładem jest włączenie tagu niestandardowego z poziomem WARNING, który wyświetla tylko komunikaty o błędach i ostrzeżenia.

Konfiguracja loggerLevelByTags jest opcjonalna. Jeśli tag niestandardowy nie jest skonfigurowany pod kątem poziomu rejestratora, wszystkie komunikaty dziennika będą wyświetlane w przesłonie debugowania.

Poniżej wywołania loggerLevelByEvents dodaj:

...

// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
    LOG_TAG: cast.framework.LoggerLevel.DEBUG, // display all levels
};

...

8. Korzystanie z nakładki debugowania

Narzędzie do debugowania przesyłania umożliwia wyświetlanie przesłaniania nakładki debugowania na urządzeniu odbiorczym, aby wyświetlać niestandardowe komunikaty z dziennika. Aby włączyć lub wyłączyć nakładkę debugowania, kliknij showDebugLogs, a aby wyczyścić komunikaty z nakładki, kliknij clearDebugLogs.

Aby wyświetlić podgląd nakładki debugowania na odbiorniku, dodaj do detektora zdarzeń READY następujące elementy:

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);

      // Show debug overlay.
      castDebugLogger.showDebugLogs(true);

      // Clear log messages on debug overlay.
      castDebugLogger.clearDebugLogs();
  }
});

9. Korzystanie z narzędzia do dowodzenia i kontroli

Omówienie

Narzędzie do zarządzania i kontroli rejestruje logi i steruje nakładką debugowania.

Odbiornik można połączyć z narzędziem CaC na 2 sposoby:

Rozpoczęcie nowego połączenia przesyłania:

1. Otwórz narzędzie CaC, ustaw identyfikator aplikacji odbiornika i kliknij przycisk Przesyłanie, aby przesłać treści do odbiornika.
2. Przesyłanie treści z oddzielnej aplikacji nadawcy na to samo urządzenie z tym samym identyfikatorem aplikacji odbiorczej.
3. Wczytaj multimedia z aplikacji nadawcy, a następnie w narzędziu wyświetlą się dzienniki wiadomości.

Dołączanie do istniejącej sesji przesyłania:

1. Pobierz uruchomiony identyfikator sesji przesyłania za pomocą pakietu SDK odbiorcy lub pakietu SDK nadawcy. Aby po stronie odbiorczej uzyskać identyfikator sesji w konsoli Chrome Remote Debugger:

cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

Możesz też uzyskać identyfikator sesji z połączonego nadawcy internetowego, korzystając z tej metody:

cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();

2. Wpisz identyfikator sesji w narzędziu CaC i kliknij przycisk RESUME.
3. Przycisk przesyłania powinien być połączony i powinien zacząć wyświetlać komunikaty dziennikowe w narzędziu.

Co warto wypróbować

Następnie użyjemy narzędzia CaC, aby wyświetlić logi w odbiorniku.

1. Otwórz narzędzie CaC.

2. Wpisz identyfikator aplikacji odbiorczej swojej przykładowej aplikacji i kliknij przycisk SET APP ID.
3. Kliknij przycisk przesyłania w lewym górnym rogu i wybierz urządzenie z obsługą Google Cast, aby otworzyć odbiornik.

4. U góry kliknij kartę LOAD MEDIA.

5. Zmień przycisk opcji typu prośby na LOAD.
6. Aby odtworzyć przykładowy film, kliknij przycisk SEND REQUEST.

7. Na urządzeniu powinien się teraz odtwarzać przykładowy film. Na karcie „Log Messages” (Przypomnienia logów) u dołu narzędzia powinny zacząć się wyświetlać logi z poprzednich kroków.

Aby sprawdzić logi i sterować odbiornikiem, użyj tych funkcji:

• Kliknij kartę MEDIA INFO lub MEDIA STATUS, aby zobaczyć informacje o multimediach i ich stan.
• Kliknij przycisk SHOW OVERLAY, aby wyświetlić nakładkę debugowania na odbiorniku.
• Aby ponownie załadować aplikację odbiorczą i ponownie przesłać treści, kliknij przycisk CLEAR CACHE AND STOP.

10. Gratulacje

Teraz już wiesz, jak dodać narzędzie do debugowania Cast do aplikacji internetowej obsługującej przesyłanie za pomocą pakietu SDK odbiornika Cast w najnowszej wersji.

Więcej informacji znajdziesz w przewodnikach dla programistów dotyczących dziennika debugowania Cast i narzędzia do zarządzania.