Debugowanie aplikacji odbiornika Cast

1. Przegląd

Logo Google Cast

Z tego ćwiczenia dowiesz się, jak dodać narzędzie Cast Debug Logger do istniejącej niestandardowej aplikacji odbiornika internetowego.

Co to jest Google Cast?

Pakiet SDK Google Cast umożliwia aplikacji odtwarzanie treści i sterowanie odtwarzaniem na urządzeniach obsługujących Google Cast. Udostępnia niezbędne komponenty interfejsu na podstawie listy kontrolnej projektu Google Cast.

Lista kontrolna projektu Google Cast została opracowana, aby zapewnić prostotę i przewidywalność korzystania z Cast na wszystkich obsługiwanych platformach.

Co będziemy tworzyć?

Po ukończeniu tego laboratorium kodowania będziesz mieć niestandardowy odbiornik internetowy zintegrowany z rejestratorem debugowania Cast.

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

Czego się nauczysz

Jak skonfigurować środowisko do programowania odbiornika internetowego.
Jak zintegrować rejestrator debugowania z odbiornikiem Cast.

Czego potrzebujesz

Najnowsza wersja przeglądarki Google Chrome.
usługi hostingowej HTTPS, takiej jak Hosting Firebase lub ngrok;
Urządzenie przesyłające, np. Chromecast lub Android TV, skonfigurowane z dostępem do internetu.
telewizor lub monitor z wejściem HDMI;

Doświadczenie

Musisz mieć doświadczenie w korzystaniu z Cast i wiedzieć, jak działa odbiornik internetowy Cast.
Musisz mieć wcześniejszą wiedzę na temat tworzenia stron internetowych.
Musisz też mieć doświadczenie w oglądaniu telewizji.

Jak zamierzasz korzystać z tego samouczka?

Tylko przeczytaj

Przeczytaj i wykonaj ćwiczenia

Jak oceniasz swoje doświadczenie w tworzeniu aplikacji internetowych?

Początkujący

Średnio zaawansowany

Zaawansowany

Jak oceniasz oglądanie telewizji?

Początkujący

Średnio zaawansowany

Zaawansowany

2. Pobieranie przykładowego kodu

Możesz pobrać cały przykładowy kod na komputer…

i rozpakuj pobrany plik ZIP.

3. Wdrażanie odbiornika lokalnie

Aby można było używać odbiornika internetowego z urządzeniem przesyłającym, musi on być hostowany w miejscu, do którego urządzenie przesyłające ma dostęp. Jeśli masz już serwer obsługujący protokół HTTPS, pomiń poniższe instrukcje i zanotuj adres URL, ponieważ będzie Ci potrzebny w następnej sekcji.

Jeśli nie masz serwera, którego możesz użyć, możesz skorzystać z Hostingu Firebase lub ngrok.

Uruchamianie serwera

Po skonfigurowaniu wybranej usługi otwórz app-start i uruchom serwer.

Zanotuj adres URL hostowanego odbiornika. Będzie on potrzebny w następnej sekcji.

4. Rejestrowanie aplikacji w Konsoli programisty Cast

Aby móc uruchamiać na urządzeniach Chromecast niestandardowy odbiornik internetowy, taki jak ten utworzony w tym ćwiczeniu, musisz zarejestrować aplikację. Po zarejestrowaniu aplikacji otrzymasz identyfikator aplikacji, którego aplikacja wysyłająca musi używać do wykonywania wywołań interfejsu API, np. do uruchamiania aplikacji odbierającej.

Obraz Konsoli programisty Cast z wyróżnionym przyciskiem „Dodaj nową aplikację”

Kliknij „Dodaj nową aplikację”.

Obraz ekranu „New Receiver Application” (Nowa aplikacja odbiornika) z wyróżnioną opcją „Custom Receiver” (Odbiornik niestandardowy)

Wybierz „Custom Receiver” (Odbiornik niestandardowy) – to właśnie tworzymy.

Obraz przedstawiający wypełnianie pola „Adres URL aplikacji odbiornika” w oknie „Nowy odbiornik niestandardowy”.

Wpisz dane nowego odbiorcy, używając adresu URL z ostatniej sekcji. Zanotuj identyfikator aplikacji przypisany do nowego odbiornika.

Musisz też zarejestrować urządzenie przesyłające Google Cast, aby przed opublikowaniem aplikacji odbiornika mogło ono uzyskać do niej dostęp. Po opublikowaniu aplikacji odbiornika będzie ona dostępna na wszystkich urządzeniach Google Cast. Na potrzeby tego modułu zalecamy pracę z nieopublikowaną aplikacją odbiorcy.

Obraz Konsoli programisty Google Cast SDK z wyróżnionym przyciskiem „Add New Device” (Dodaj nowe urządzenie)

Kliknij „Dodaj nowe urządzenie”.

Obraz okna „Dodaj urządzenie odbiornika Cast”

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 korzystania z Konsoli programisty Google Cast SDK.

Przygotowanie odbiornika i urządzenia do testowania zajmie 5–15 minut. Po odczekaniu 5–15 minut musisz ponownie uruchomić urządzenie przesyłające.

5. Uruchamianie przykładowej aplikacji

Logo Google Chrome

Zanim nasz nowy odbiornik internetowy będzie gotowy do testowania, zobaczmy, jak wygląda przykładowa gotowa aplikacja odbiornika internetowego. Odbiornik, który zamierzamy utworzyć, będzie w stanie odtwarzać multimedia za pomocą strumieniowania z adaptacyjną szybkością transmisji.

W przeglądarce otwórz narzędzie do zarządzania i kontroli.

Ilustracja przedstawiająca kartę „Cast Connect & Logger Controls” w narzędziu Command and Control (CaC)

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

Ilustracja przedstawiająca kartę „Cast Connect & Logger Controls” w narzędziu Command and Control (CaC), która wskazuje, że jest ono połączone z aplikacją odbiornika

U góry otwórz kartę LOAD MEDIA.

Obraz karty „Wczytaj multimedia” w narzędziu Command and Control (CaC)

Zmień przycisk opcji typu żądania na LOAD.
Kliknij przycisk SEND REQUEST, aby odtworzyć przykładowy film.
Film zacznie się odtwarzać na urządzeniu obsługującym Google Cast, aby pokazać, jak wygląda podstawowa funkcjonalność odbiornika przy użyciu domyślnego odbiornika.

6. Przygotowywanie projektu początkowego

Musimy dodać obsługę Google Cast do pobranej aplikacji startowej. W tym ćwiczeniu będziemy używać tych terminów związanych z Google Cast:

aplikacja nadawcy jest uruchomiona na urządzeniu mobilnym lub laptopie,
na urządzeniu Google Cast lub urządzeniu z Androidem TV działa aplikacja odbiornika;

Teraz możesz rozbudowywać projekt początkowy za pomocą ulubionego edytora tekstu:

W pobranych przykładowych kodach wybierz katalog app-start.
Otwórz js/receiver.js i index.html

Pamiętaj, że w trakcie wykonywania tego samouczka http-server powinno wykrywać wprowadzane przez Ciebie zmiany. Jeśli tak się nie stanie, spróbuj zatrzymać i ponownie uruchomić http-server.

Projektowanie aplikacji

Aplikacja odbiorcy inicjuje sesję Cast i pozostaje w trybie gotowości, dopóki nie nadejdzie żądanie LOAD (np. polecenie odtworzenia multimediów) od nadawcy.

Aplikacja składa się z jednego głównego widoku zdefiniowanego w pliku index.html i jednego pliku JavaScript o nazwie js/receiver.js, który zawiera całą logikę działania odbiornika.

index.html

Ten plik HTML zawiera cały interfejs aplikacji odbiornika.

receiver.js

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

Najczęstsze pytania

7. Integracja z interfejsem CastDebugLogger API

Pakiet Cast Receiver SDK udostępnia programistom kolejną opcję łatwego debugowania aplikacji odbiornika za pomocą interfejsu CastDebugLogger API.

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

Zdarzenie inicjujące

Wstaw ten skrypt do tagu <head> aplikacji odbiornika bezpośrednio po skrypcie pakietu Web Receiver SDK w sekcji 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 js/receiver.js u góry pliku i pod playerManager uzyskaj instancję CastDebugLogger i włącz rejestrator w detektorze 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 rejestrowanie debugowania jest włączone, na odbiorniku wyświetla się nakładka DEBUG MODE.

Obraz przedstawiający odtwarzany film z komunikatem „DEBUG MODE” (TRYB DEBUGOWANIA) wyświetlanym na czerwonym tle w lewym górnym rogu kadru

Rejestrowanie zdarzeń odtwarzacza

Za pomocą CastDebugLogger możesz łatwo rejestrować zdarzenia odtwarzacza wywoływane przez pakiet Cast Web Receiver SDK i używać różnych poziomów rejestrowania do rejestrowania danych zdarzeń. Konfiguracja loggerLevelByEvents przyjmuje parametry cast.framework.events.EventType i cast.framework.events.category, aby określić zdarzenia, które mają być rejestrowane.

Pod detektorem zdarzeń READY dodaj poniższy kod, aby rejestrować, kiedy są wywoływane zdarzenia CORE odtwarzacza lub kiedy jest emitowana zmiana mediaStatus:

...

// 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 logów i tagi niestandardowe

Interfejs CastDebugLogger API umożliwia tworzenie komunikatów dziennika, które pojawiają się na nakładce debugowania odbiornika w różnych kolorach. Użyj tych metod rejestrowania 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 drugi – komunikatem logu. Tag może być dowolnym ciągiem znaków, który uznasz za przydatny.

Aby zobaczyć logi w działaniu, dodaj je do LOAD interfejsu przechwytującego.

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 określić, które wiadomości mają się wyświetlać na nakładce debugowania, ustawiając poziom rejestrowania w parametrze loggerLevelByTags dla każdego tagu niestandardowego. Na przykład włączenie tagu niestandardowego z poziomem logowania cast.framework.LoggerLevel.DEBUG spowoduje wyświetlenie wszystkich wiadomości dodanych z użyciem komunikatów o błędach, ostrzeżeń, informacji i komunikatów dziennika debugowania. Inny przykład: włączenie tagu niestandardowego na poziomie WARNING spowoduje wyświetlanie tylko komunikatów o błędach i ostrzeżeń.

Konfiguracja loggerLevelByTags jest opcjonalna. Jeśli dla poziomu rejestratora nie skonfigurujesz tagu niestandardowego, wszystkie komunikaty dziennika będą wyświetlane na nakładce debugowania.

Dodaj ten kod pod wywołaniem loggerLevelByEvents:

...

// 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 Cast Debug Logger wyświetla na odbiorniku nakładkę debugowania, która pokazuje niestandardowe komunikaty dziennika. Użyj klawisza showDebugLogs, aby przełączać nakładkę debugowania, a klawisza clearDebugLogs, aby wyczyścić wiadomości dziennika na nakładce.

Aby wyświetlić nakładkę debugowania na odbiorniku, dodaj do detektora zdarzeń READY ten kod:

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

Obraz przedstawiający nakładkę debugowania, listę komunikatów dziennika debugowania na półprzezroczystym tle na klatce wideo

9. Korzystanie z narzędzia Command and Control (CaC)

Przegląd

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

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

Rozpocznij nowe połączenie Cast:

Otwórz narzędzie CaC, ustaw identyfikator aplikacji odbiornika i kliknij przycisk Cast, aby przesyłać treści do odbiornika.
Przesyłaj oddzielną aplikację nadawcy na to samo urządzenie z tym samym identyfikatorem aplikacji odbiornika.
Załaduj multimedia z aplikacji nadawcy, a w narzędziu pojawią się komunikaty dziennika.

Dołączanie do istniejącej sesji Cast:

Pobierz identyfikator uruchomionej sesji przesyłania za pomocą pakietu SDK odbiornika lub pakietu SDK nadawcy. Po stronie odbiornika wpisz w konsoli Debugera zdalnego Chrome te dane, aby uzyskać identyfikator sesji:

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

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

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

Obraz karty „Cast Connect & Logger Controls” (Sterowanie Cast Connect i rejestratorem) w narzędziu Command and Control (CaC) służący do wznowienia sesji

Wpisz identyfikator sesji w narzędziu CaC i kliknij przycisk RESUME.
Przycisk Cast powinien być połączony i zacząć wyświetlać komunikaty logu w narzędziu.

Warto spróbować

Następnie użyjemy narzędzia CaC, aby wyświetlić logi na przykładowym odbiorniku.

Otwórz narzędzie CaC.