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 Google Cast SDK umożliwia aplikacji odtwarzanie treści i sterowanie odtwarzaniem na urządzeniach obsługujących Google Cast. Zapewnia potrzebne komponenty interfejsu zgodnie z listą kontrolną projektowania 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ć niestandardowy odbiornik internetowy zintegrowany z rejestratorem debugowania debugowania.

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

Czego się nauczysz

• Jak skonfigurować środowisko na potrzeby programowania odbiornika internetowego.
• Dowiedz się, jak zintegrować rejestrator debugowania z odbiornikiem Cast.

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.

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.
• Wymagamy też wcześniejszej wiedzy na temat oglądania telewizji. :)

Masz problemy z siecią?

Jeśli znajdujesz się w miejscu, w którym sieć Wi-Fi nie jest wiarygodna, możesz połączyć Chromecasta z siecią przewodową, korzystając z adaptera Ethernetu w przypadku Chromecasta lub Chromecasta z Google TV.

Jak wykorzystasz ten samouczek?

Tylko do przeczytania Przeczytaj go i wykonaj ćwiczenia

Jak oceniasz swoje doświadczenia z tworzeniem aplikacji internetowych?

Początkujący Poziom średnio zaawansowany Biegły

Jak oceniasz swoje wrażenia z oglądania telewizji?

Początkujący Poziom średnio zaawansowany Biegły

2. Pobieranie przykładowego kodu

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

Pobierz źródło

i rozpakuj pobrany plik ZIP.

Repozytorium ćwiczeń z programowania w usłudze Cast Debug Logger zawiera 2 przykładowe projekty:

• app-start – kod początkowy, który opracujesz w ramach tego ćwiczenia z programowania.
• app-done – pełny kod gotowej przykładowej aplikacji wideo.

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

Nie masz konta programisty Cast?

Załóż konto w konsoli programisty Google Cast SDK i zapłać opłatę rejestracyjną.

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, 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ąc, by użyć adresu URL z 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. Uruchamianie przykładowej aplikacji

Czekając, aż nowy odbiornik internetowy będzie gotowy do testowania, zobaczmy, jak wygląda przykładowa gotowa aplikacja odbiornika internetowego. Odbiornik, który skonstruujemy, będzie mógł odtwarzać multimedia w ramach przesyłania strumieniowego z adaptacyjną szybkością transmisji bitów.

1. W przeglądarce otwórz narzędzie Command i Control (CaC).

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. Otwórz kartę LOAD MEDIA u góry.

5. Zmień opcję typu żądania na LOAD.
6. Aby odtworzyć przykładowy film, kliknij przycisk SEND REQUEST.
7. Na urządzeniu obsługującym Google Cast rozpocznie się odtwarzanie filmu, aby pokazać, jak wygląda podstawowa funkcjonalność odbiornika przy użyciu domyślnego odbiornika.

6. Przygotowywanie projektu początkowego

Musisz 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,
• aplikacja odbiornika na urządzeniu Google Cast lub urządzeniu z Androidem TV;

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

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

Uwaga: w trakcie ćwiczeń z programowania http-server powinien wykrywać wprowadzane przez Ciebie zmiany. Jeśli nie, spróbuj zatrzymać aplikację http-server i uruchomić ją ponownie.

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 index.html i 1 pliku JavaScript o nazwie js/receiver.js, który zawiera wszystkie funkcje logiczne umożliwiające odbiornik.

index.html

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

receiver.js

Ten skrypt zarządza całą logiką naszej aplikacji odbiornika.

Dokumentacja przesyłania?

Posiadamy obszerną dokumentację dla nadawców oraz nadawców w systemach iOS i Android oraz w Chrome.

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.

★ Uwaga:

Aby korzystać z interfejsu CastDebugLogger API, musisz zarejestrować urządzenie przesyłające w konsoli programisty Google Cast SDK i użyć oprogramowania układowego urządzenia w wersji 1.44 lub nowszej.

Zdarzenie inicjujące

Umieść ten skrypt w tagu <head> w aplikacji odbiornika bezpośrednio po skrypcie pakietu SDK odbiornika w interfejsie 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 obszarze js/receiver.js (na górze pliku i pod sekcją playerManager) pobierz 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);
  }
});

Ostrzeżenie: pamiętaj, aby zmienić setEnabled na false w przypadku odbiornika produkcyjnego.

Gdy rejestrator debugowania jest włączony, na odbiorniku wyświetla się nakładka o wartości DEBUG MODE.

Zdarzenia odtwarzacza logów

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 wymaga cast.framework.events.EventType i cast.framework.events.category, aby określić zdarzenia do logowania.

Dodaj poniższy kod pod detektorem zdarzeń READY, aby rejestrować wywołanie zdarzeń CORE odtwarzacza lub rozgłaszanie zmiany 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 logu i tagi niestandardowe

Interfejs CastDebugLogger API umożliwia tworzenie komunikatów dziennika w różnych kolorach wyświetlanych na nakładce debugowania odbiornika. Użyj tych metod logowania podanych 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. Może to być dowolny ciąg znaków, który Ci się przyda.

Aby wyświetlić logi w działaniu, dodaj logi do elementu przechwytującego 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;
  }
);

Aby określić, które komunikaty mają się wyświetlać w nakładce debugowania, ustaw poziom rejestrowania każdego tagu niestandardowego w 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 to, że włączenie niestandardowego tagu na poziomie WARNING spowodowałoby wyświetlanie tylko komunikatów o błędach i ostrzeżeniach.

Konfiguracja loggerLevelByTags jest opcjonalna. Jeśli tag niestandardowy nie jest skonfigurowany na poziomie rejestratora, na nakładce debugowania będą wyświetlane wszystkie komunikaty dziennika.

Dodaj te elementy poniżej wywołania w loggerLevelByEvents:

...

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

...

8. Korzystanie z nakładki debugowania

Rejestrator Cast Debug Logger udostępnia na odbiorniku nakładkę debugowania, która pozwala wyświetlać niestandardowe komunikaty dziennika. Użyj klawisza showDebugLogs, aby przełączyć nakładkę debugowania, a przycisku clearDebugLogs, aby wyczyścić komunikaty logu w nakładce.

Dodaj do detektora zdarzeń READY ten kod, aby wyświetlić podgląd nakładki debugowania w odbiorniku:

// 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 Command and Control (CaC)

Omówienie

Narzędzie Command and Control (CaC) rejestruje dzienniki i steruje nakładką debugowania.

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

Rozpocznij nowe połączenie Cast:

1. Otwórz narzędzie CaC, ustaw identyfikator aplikacji odbiornika i kliknij przycisk Cast, aby przesłać treści na odbiornik.
2. Przesyłaj oddzielną aplikację nadawcy na to samo urządzenie z tym samym identyfikatorem aplikacji odbiorcy.
3. Wczytywanie multimediów z aplikacji nadawcy, a wiadomości dziennika będą wyświetlane w narzędziu.

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

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

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

Identyfikator sesji możesz też uzyskać od połączonego nadawcy internetowego. W tym celu skorzystaj z tej metody:

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

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

Do wypróbowania

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

1. Otwórz narzędzie CaC.

2. Wpisz identyfikator przykładowej aplikacji odbiorcy i kliknij przycisk SET APP ID.
3. Kliknij przycisk Cast w lewym górnym rogu i wybierz urządzenie obsługujące Google Cast, by otworzyć odbiornik.

4. Otwórz kartę LOAD MEDIA u góry.

5. Zmień opcję typu żądania na LOAD.
6. Aby odtworzyć przykładowy film, kliknij przycisk SEND REQUEST.

7. Na Twoim urządzeniu powinien być teraz odtwarzany przykładowy film. W sekcji „Komunikaty logu” powinny zacząć pojawiać się logi z poprzednich kroków u dołu narzędzia.

Zapoznaj się z tymi funkcjami, aby zbadać logi i kontrolować odbiornik:

• Aby zobaczyć informacje o multimediach i ich stan, kliknij kartę MEDIA INFO lub MEDIA STATUS.
• Kliknij przycisk SHOW OVERLAY, aby wyświetlić nakładkę debugowania na odbiorniku.
• Ponownie załaduj aplikację odbiornika i zacznij przesyłać treści, korzystając z przycisku CLEAR CACHE AND STOP.

10. Gratulacje

Wiesz już, jak dodać rejestrator Cast Debuger do swojego odbiornika internetowego obsługującego Cast przy użyciu najnowszego pakietu SDK urządzenia Cast Receiver.

Więcej informacji znajdziesz w przewodnikach dla programistów korzystających z rejestratora debugowania debugowania oraz narzędzia Command and Control (CaC).

Chcesz dodać więcej funkcji Cast?

Zapoznaj się z innymi ćwiczeniami z programowania dotyczącymi przesyłania i naszymi przykładowymi aplikacjami na GitHubie.