1. Przegląd
Dzięki nim dowiesz się, jak dodać rejestrator debugowania do dotychczasowej niestandardowej aplikacji internetowej.
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. Dostarcza niezbędne komponenty interfejsu zgodnie z listą kontrolną projektowania Google Cast.
Lista kontrolna projektu Google Cast ułatwia obsługę Cast na wszystkich obsługiwanych platformach.
Co zamierzamy utworzyć?
Po ukończeniu tego ćwiczenia będziesz mieć niestandardowy odbiornik internetowy zintegrowany z rejestratorem debugowania.
Szczegółowe informacje i szczegółowe informacje znajdziesz w przewodniku po rejestrowaniu debugowania.
Czego się nauczysz
- Jak skonfigurować środowisko programistyczne do odbiornika internetowego.
- Dowiedz się, jak zintegrować rejestrator debugowania z odbiornikiem.
Czego potrzebujesz
- Najnowsza przeglądarka Google Chrome.
- Usługa hostingu HTTPS, np. Hosting Firebase lub ngrok.
- urządzenia Google Cast, na przykład Chromecasta lub Androida TV skonfigurowanego z dostępem do internetu;
- Telewizor lub monitor z wejściem HDMI.
Funkcja
- Musisz posiadać doświadczenie w zakresie przesyłania i dowiedzieć się, jak działa odbiornik Cast.
- Musisz mieć doświadczenie w tworzeniu stron internetowych.
- Potrzebna będzie również wiedza na temat oglądania telewizji :)
Jak będziesz korzystać z tego samouczka?
Jak oceniasz tworzenie aplikacji internetowych?
Jak oceniasz oglądanie telewizji?
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 używać odbiornika internetowego z urządzeniem przesyłającym, musi być ono hostowane w miejscu, w którym może ono być dostępne. Jeśli masz już dostępny serwer obsługujący https, pomiń poniższe instrukcje i zanotuj adres URL. Będzie on potrzebny w następnej sekcji.
Jeśli nie masz serwera, którego możesz użyć, możesz użyć Hostingu Firebase lub ngrok.
Uruchom serwer
Po skonfigurowaniu wybranej usługi otwórz app-start i uruchom serwer.
Zanotuj adres URL hostowanego odbiornika. Użyjesz ich w następnej sekcji.
4. Rejestrowanie aplikacji w Konsoli programisty Cast
Musisz zarejestrować swoją aplikację, aby móc używać na urządzeniach Chromecast niestandardowego odbiornika internetowego. Po zarejestrowaniu aplikacji otrzymasz identyfikator, którego aplikacja nadawcy musi używać do wykonywania wywołań interfejsu API – na przykład do uruchamiania aplikacji odbiornika.
Kliknij „Dodaj nową aplikację”.
Wybierz „Niestandardowy odbiornik”, nad którym właśnie pracujemy.
Wpisz informacje o nowym odbiorniku. Użyj adresu URL z ostatniej sekcji. Zanotuj identyfikator aplikacji przypisany do nowego odbiorcy.
Musisz też zarejestrować urządzenie Google Cast, aby mieć dostęp do aplikacji odbiornika przed jego opublikowaniem. Udostępniona aplikacja odbiornika będzie dostępna na wszystkich urządzeniach Google Cast. Na potrzeby tego ćwiczenia zalecamy korzystanie z nieopublikowanej aplikacji odbiornika.
Kliknij „Dodaj nowe urządzenie”.
Wpisz numer seryjny na odwrocie urządzenia przesyłającego i nadaj mu opisową nazwę. Możesz też go znaleźć, przesyłając ekran z Chrome w konsoli Google Cast SDK.
Odbiorca i urządzenie będą gotowe do testowania w ciągu 5–15 minut. Po odczekaniu 5–15 minut musisz ponownie uruchomić urządzenie przesyłające.
5. Uruchamianie przykładowej aplikacji
Czekamy, aż nowy odbiornik będzie gotowy do testowania, i zobaczmy, jak wygląda wypełniona przykładowa aplikacja. Odbiornik, który stworzymy, będzie mógł odtwarzać multimedia z użyciem adaptacyjnej transmisji bitów.
- W przeglądarce otwórz narzędzie Command and Control (CaC).
- Użyj domyślnego identyfikatora odbiornika
CC1AD845i kliknij przyciskSET APP ID. - Kliknij przycisk Cast w lewym górnym rogu i wybierz urządzenie obsługujące Google Cast.
- Otwórz kartę
LOAD MEDIAu góry.
- Zmień typ żądania na
LOAD. - Kliknij przycisk
SEND REQUEST, aby odtworzyć przykładowy film. - Rozpocznie się odtwarzanie filmu na urządzeniu obsługującym Google Cast, który pokaże, jak wygląda podstawowa funkcja odbiornika z Domyślnym odbiornikiem.
6. Przygotowywanie projektu startowego
Musimy dodać obsługę Google Cast do pobranej aplikacji. Oto terminologia Google Cast, którą będziemy wykorzystywać podczas ćwiczeń z programowania:
- nadawca działa na urządzeniu mobilnym lub laptopie,
- odbiornik na urządzeniu Google Cast lub Android TV.
Teraz możesz kontynuować pracę nad projektem dla początkujących, korzystając z ulubionego edytora tekstu:
- Wybierz katalog
app-startz przykładowego kodu do pobrania. - Otwórz
js/receiver.jsiindex.html
Ćwiczenia z programowania powinny być dostosowane do zmian wprowadzanych przez użytkownika http-server. Jeśli tak się nie stanie, spróbuj zatrzymać aplikację http-server i uruchomić ją ponownie.
Projektowanie aplikacji
Aplikacja odbiornika inicjuje sesję przesyłania i przełącza się w tryb oczekiwania, aż pojawi się żądanie WCZYTANIA (np. polecenie odtwarzania multimediów) od nadawcy.
Aplikacja składa się z jednego głównego widoku zdefiniowanego w index.html i 1 pliku JavaScript o nazwie js/receiver.js, który zawiera wszystkie funkcje logiczne umożliwiające działanie odbiornika.
index.html
Ten plik HTML zawiera wszystkie elementy interfejsu użytkownika aplikacji odbiornika.
odbiornik.js
Ten skrypt zarządza wszystkimi funkcjami logiki naszej aplikacji odbiornika.
Najczęstsze pytania
7. Integracja z interfejsem API CastDebugLogger
Pakiet SDK odbiornika umożliwia deweloperom łatwe debugowanie aplikacji odbiornika za pomocą interfejsu CastDebugLogger API.
Szczegółowe informacje i szczegółowe informacje znajdziesz w przewodniku po rejestrowaniu debugowania.
Zdarzenie inicjujące
Dodaj ten skrypt do tagu <head> swojej aplikacji odbiornika bezpośrednio po skrypcie pakietu SDK odbiornika internetowego w 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 pliku js/receiver.js u góry pliku i pod 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);
}
});
Gdy rejestrator debugowania jest włączony, na odbiorniku wyświetla się nakładka DEBUG MODE.
Rejestrowanie zdarzeń odtwarzacza
Komponent CastDebugLogger pozwala łatwo rejestrować zdarzenia odtwarzacza wywoływane przez pakiet SDK Cast Web odbiornika i używać różnych poziomów rejestrowania. Konfiguracja loggerLevelByEvents wymaga cast.framework.events.EventType i cast.framework.events.category, aby określić, które zdarzenia mają być rejestrowane.
Dodaj poniżej odbiornik zdarzenia READY, aby rejestrować, gdy są wywoływane zdarzenia odtwarzacza CORE lub gdy wysyłana jest 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 dziennika i tagi niestandardowe
Interfejs CastDebugLogger API pozwala tworzyć komunikaty logu, które pojawiają się w nakładce debugowania odbiornika w różnych kolorach. Używaj tych metod dziennika, uszeregowane 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. Może to być dowolny ciąg znaków, który uważasz za przydatny.
Aby pokazać, jak działają logi, 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;
}
);
Aby określić, które wiadomości mają być wyświetlane w nakładce debugowania, ustaw poziom rejestrowania w loggerLevelByTags tagu niestandardowym. Na przykład włączenie tagu niestandardowego z poziomem dziennika cast.framework.LoggerLevel.DEBUG spowoduje wyświetlanie wszystkich wiadomości dodanych z błędami, ostrzeżeniami, informacjami i debugowaniem. Innym przykładem jest włączenie tagu niestandardowego na poziomie WARNING, który powoduje 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, wszystkie komunikaty będą wyświetlane w nakładce debugowania.
Dodaj wywołanie loggerLevelByEvents pod wywołaniem:
...
// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
LOG_TAG: cast.framework.LoggerLevel.DEBUG, // display all levels
};
...
8. Korzystanie z nakładki debugowania
Dziennik debugowania Cast zapewnia nakładkę debugowania na odbiorniku, aby wyświetlać niestandardowe komunikaty dziennika. Użyj przycisku showDebugLogs, aby przełączyć nakładkę debugowania, i clearDebugLogs, aby wyczyścić komunikaty logu w nakładce.
Aby wyświetlić podgląd nakładki debugowania na odbiorniku, dodaj do detektora zdarzeń READY:
// 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)
Przegląd
Narzędzie Command & Control (CaC) przechwytuje dzienniki i steruje nakładką debugowania.
Istnieją 2 sposoby podłączenia odbiornika do narzędzia CAC:
Rozpoczynanie nowego połączenia Cast:
- Otwórz narzędzie CaC Tool, ustaw identyfikator aplikacji odbiornika i kliknij przycisk Cast, aby przesłać dane do odbiornika.
- Prześlij oddzielną aplikację nadawcę na to samo urządzenie z tym samym identyfikatorem aplikacji odbiornika.
- Wczytaj multimedia z aplikacji nadawcy – w narzędziu pojawią się komunikaty dziennika.
Dołącz do istniejącej sesji przesyłania:
- Uzyskaj identyfikator uruchomionej sesji przesyłania za pomocą pakietu SDK odbiorcy lub pakietu SDK nadawcy. Po stronie odbiornika wpisz te informacje, aby uzyskać identyfikator sesji w konsoli zdalnego debugowania:
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;
Możesz też uzyskać identyfikator sesji od połączonego nadawcy internetowego, korzystając z tej metody:
cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();
- Wpisz identyfikator sesji w narzędziu CaC Tool, a następnie kliknij przycisk
RESUME. - Połącz przycisk Cast i zacznij wyświetlać komunikaty dziennika 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.
- Wpisz identyfikator odbiorcy przykładowej aplikacji i kliknij przycisk
SET APP ID. - Kliknij przycisk Cast w lewym górnym rogu i wybierz urządzenie obsługujące Google Cast, żeby otworzyć odbiornik.
- Otwórz kartę
LOAD MEDIAu góry.
- Zmień typ żądania na
LOAD. - Kliknij przycisk
SEND REQUEST, aby odtworzyć przykładowy film.
- Na Twoim urządzeniu powinien być teraz odtwarzany przykładowy film. Logi z poprzednich kroków powinny być widoczne na karcie „Komunikaty logu” u dołu narzędzia.
Wypróbuj następujące funkcje w celu badania dzienników i sterowania odbiornikiem:
- Kliknij kartę
MEDIA INFOlubMEDIA STATUS, aby wyświetlić informacje o multimediach i ich stan. - Kliknij przycisk
SHOW OVERLAY, aby wyświetlić nakładkę debugowania na odbiorniku. - Użyj przycisku
CLEAR CACHE AND STOP, aby ponownie załadować aplikację odbiornika i ponownie przesłać treści.
10. Gratulacje
Wiesz już, jak dodać rejestrator dźwięku Cast do aplikacji internetowej Cast za pomocą najnowszego pakietu SDK odbiornika.
Więcej informacji znajdziesz w podręcznikach programisty Cast Debug Logger oraz narzędzia Command and Control (CaC).