Debugowanie aplikacji odbiornika Cast

1. Opis

Dzięki tym ćwiczeniom z programowania dowiesz się, jak dodać rejestr debugera Cast do istniejącej aplikacji niestandardowego 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. Zawiera niezbędne komponenty interfejsu wymienione na liście kontrolnej projektowania Google Cast.

Dostępna jest lista kontrolna projektu Google Cast, dzięki której korzystanie z Cast jest proste i przewidywalne na wszystkich obsługiwanych platformach.

Co będziemy tworzyć?

Po ukończeniu tego ćwiczenia z programowania uzyskasz niestandardowy odbiornik internetowy zintegrowany z rejestratorem debugowania Cast.

Więcej informacji znajdziesz w przewodniku po rejestratorze debugowania Cast.

Czego się nauczysz

• Jak skonfigurować środowisko na potrzeby programowania odbiornika internetowego.
• Jak zintegrować Rejestrator debugowania z odbiornikiem przesyłania.

Czego potrzebujesz

• najnowszą przeglądarkę Google Chrome,
• usługa hostingu HTTPS, na przykład Firebase Hosting lub ngrok;
• Urządzenie przesyłające Google Cast, takie jak Chromecast czy Android TV, z dostępem do internetu.
• Telewizor lub monitor z wejściem HDMI.

Funkcja

• Musisz mieć doświadczenie w korzystaniu z przesyłania i wiedzieć, jak działa odbiornik internetowy Cast.
• Aby skorzystać z tej możliwości, musisz mieć wiedzę w zakresie tworzenia stron internetowych.
• Potrzebna będzie też wcześniejsza wiedza o oglądaniu telewizji :)

Masz problemy z siecią?

Jeśli jesteś w miejscu, w którym sieć Wi-Fi nie jest stabilna, możesz podłączyć Chromecasta za pomocą adaptera Ethernetu do Chromecasta lub Chromecasta z Google TV.

Jak będziesz korzystać z tego samouczka?

Przeczytaj tylko do końca Przeczytaj go i wykonaj ćwiczenia

Jak oceniasz swoje doświadczenia z tworzeniem aplikacji internetowych?

Początkujący Średni Średni

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

Początkujący Średni Średni

2. Pobieranie przykładowego kodu

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

Pobierz źródło

i rozpakuj pobrany plik ZIP.

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

• app-start – kod początkowy, na podstawie którego utworzysz podczas tego ćwiczenia z programowania.
• app-done – pełny kod gotowej przykładowej aplikacji wideo.

3. Lokalne wdrażanie odbiornika

Aby można było używać 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 obsługujący https, pomiń poniższe instrukcje i zanotuj adres URL, ponieważ będzie on potrzebny w następnej sekcji.

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

Uruchamianie serwera

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

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

4. Rejestrowanie aplikacji w Konsoli programisty Cast

Nie masz konta dewelopera Cast?

Zarejestruj konto w konsoli programisty Google Cast SDK i wnieś opłatę rejestracyjną.

Aby móc uruchamiać niestandardowy odbiornik internetowy (wbudowany w te ćwiczenia z programowania) na urządzeniach Chromecast, musisz zarejestrować swoją aplikację. Po zarejestrowaniu aplikacji otrzymasz identyfikator, którego aplikacja musi używać do wykonywania wywołań interfejsu API, na przykład do uruchamiania aplikacji odbierającej.

Kliknij „Dodaj nową aplikację”

Wybierz „Odbiornik niestandardowy”. To właśnie nad tym pracujemy.

Wpisz dane nowego odbiornika. Pamiętaj, aby użyć adresu URL z ostatniej sekcji. Zanotuj identyfikator aplikacji przypisany do nowego odbiornika.

Musisz też zarejestrować urządzenie Google Cast, by mogło mieć dostęp do aplikacji odbierającej przed jej opublikowaniem. Po opublikowaniu aplikacji odbierającej będzie ona dostępna dla wszystkich urządzeń Google Cast. Na potrzeby tych ćwiczeń z programowania zalecamy pracę z nieopublikowaną aplikacją odbierającą.

Kliknij „Dodaj nowe urządzenie”.

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

Przygotowanie odbiornika i urządzenia do testowania może potrwać 5–15 minut. Po 5–15 minutach musisz zrestartować urządzenie przesyłające.

5. Uruchamianie przykładowej aplikacji

Czekając, aż nasz nowy odbiornik internetowy będzie gotowy do testów, zobaczmy, jak wygląda przykładowa ukończona aplikacja Web pickupr. Odbiornik, który zbudowamy, będzie w stanie odtwarzać multimedia z wykorzystaniem funkcji strumieniowania z adaptacyjną szybkością transmisji bitów.

1. W przeglądarce otwórz narzędzie Command and 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 strony.

5. Zmień opcję typu żądania na LOAD.
6. Kliknij przycisk SEND REQUEST, aby odtworzyć przykładowy film.
7. Film zacznie się odtwarzać na urządzeniu obsługującym Google Cast, aby pokazać, jak wygląda podstawowa funkcja odbiornika w domyślnym odbiorniku.

6. Przygotuj projekt początkowy

Musimy dodać obsługę Google Cast do pobranej aplikacji startowej. Oto niektóre z terminologii związanej z Google Cast, których będziemy używać w tym ćwiczeniu z programowania:

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

Możesz teraz zacząć pracować nad projektem początkowym 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 wykonywania tych ćwiczeń z programowania http-server powinien wykrywać wprowadzone przez Ciebie zmiany. Jeśli nie, zatrzymaj i ponownie uruchom aplikację http-server.

Projektowanie aplikacji

Aplikacja odbierająca inicjuje sesję przesyłania i pozostaje w trybie gotowości, dopóki nie nadejdzie żądanie WCZYTAJ (na przykład 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 niezbędne do działania odbiornika.

index.html

Ten plik HTML zawiera wszystkie elementy interfejsu naszej aplikacji odbierającej.

receiver.js

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

Dokumentacja przesyłania?

Mamy obszerną dokumentację dla nadawców oraz nadawców, na iOS, Androida i Chrome.

Najczęstsze pytania

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

7. Integracja z interfejsem API CastDebugLogger

Pakiet SDK odbiornika Cast zapewnia deweloperom kolejną opcję łatwego debugowania aplikacji odbierającej przy użyciu interfejsu CastDebugLogger API.

Więcej informacji znajdziesz w przewodniku po rejestratorze debugowania Cast.

★ Uwaga:

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

Zdarzenie inicjujące

Umieść ten skrypt w tagu <head> swojej aplikacji odbierającej tuż po skrypcie pakietu Web pickupr SDK, w elemencie 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 na górze pliku i pod playerManager znajdź wystąpienie CastDebugLogger i włącz rejestrator w odbiorniku 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 (fałsz) odbiornika produkcyjnego.

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

Zdarzenia odtwarzacza dziennika

Protokół CastDebugLogger umożliwia łatwe rejestrowanie zdarzeń odtwarzacza uruchamianych przez pakiet SDK Cast Web pickupr SDK i używanie różnych poziomów rejestrowania danych zdarzeń. Konfiguracja loggerLevelByEvents wymaga cast.framework.events.EventType i cast.framework.events.category do określenia zdarzeń do rejestrowania.

Dodaj ten kod poniżej detektora zdarzeń READY do rejestrowania po wywołaniu zdarzeń CORE odtwarzacza lub wywołaniu 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, które są wyświetlane na nakładce debugowania odbiornika. Użyj tych metod logowania, uporządkowanych 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 rejestrowania pierwszy parametr powinien być tagiem niestandardowym, a drugim – komunikatem logu. Może to być dowolny ciąg znaków, który uznasz za przydatny.

Aby pokazać logi w działaniu, dodaj logi do przechwytywania 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 pojawiają się na nakładce debugowania, ustawiając poziom logowania w loggerLevelByTags dla każdego tagu niestandardowego. Na przykład włączenie tagu niestandardowego z poziomem rejestrowania cast.framework.LoggerLevel.DEBUG spowoduje wyświetlenie wszystkich dodanych komunikatów z komunikatami o błędach, ostrzeżeniach, informacjach i dziennikach debugowania. Innym przykładem jest to, że włączenie tagu niestandardowego z poziomem WARNING spowoduje wyświetlanie tylko komunikatów o błędach i ostrzeżeń.

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

Pod wywołaniem funkcji 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

Rejestrator debugowania Cast udostępnia na odbiorniku nakładkę debugowania, w której wyświetlane są niestandardowe komunikaty dziennika. Użyj przycisku showDebugLogs, aby przełączać nakładkę debugowania, i przycisku clearDebugLogs, aby wyczyścić komunikaty dziennika na nakładce.

Dodaj ten element do detektora zdarzeń READY, aby wyświetlić podgląd nakładki debugowania na 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)

Opis

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

Istnieją 2 sposoby połączenia odbiornika z narzędziem CaC:

Rozpocznij nowe połączenie Cast:

1. Otwórz narzędzie CaC Tool, ustaw identyfikator aplikacji odbiornika i kliknij przycisk Cast, aby przesyłać na niego treści.
2. przesłać na to samo urządzenie oddzielną aplikację nadawcy z tym samym identyfikatorem aplikacji odbiorcy;
3. Wczytuj multimedia z aplikacji nadawcy, a wiadomości z dziennika pojawią się w narzędziu.

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

1. Pobierz identyfikator aktywnej sesji przesyłania za pomocą pakietu SDK odbiorcy lub pakietu SDK nadawcy. Po stronie odbiorcy wpisz ten kod, aby uzyskać identyfikator sesji w konsoli Chrome Remote Debugger:

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

Możesz też uzyskać identyfikator sesji od połączonego nadawcy w internecie, 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 Cast powinien być podłączony i zacząć wyświetlać komunikaty dziennika w narzędziu.

Warto wypróbować

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

1. Otwórz narzędzie CAC.

2. Wpisz identyfikator aplikacji odbiorcy przykładowej aplikacji 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 strony.

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

7. Na urządzeniu powinien być teraz odtwarzany przykładowy film. Dzienniki z poprzednich kroków powinny być wyświetlane na karcie „Log Messages” u dołu narzędzia.

Wypróbuj te funkcje, aby zbadać logi i sterować odbiornikiem:

• 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.
• Kliknij przycisk CLEAR CACHE AND STOP, aby ponownie załadować aplikację odbiornika i ponownie rozpocząć przesyłanie.

10. Gratulacje

Wiesz już, jak dodać rejestr debugera Cast do aplikacji obsługującej Cast, używając najnowszego pakietu SDK odbiornika internetowego.

Więcej informacji znajdziesz w przewodnikach dla programistów aplikacji Cast Debug Logger i Narzędzia poleceń i kontroli (CaC).

Chcesz przesyłać więcej?

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