1. Przegląd
Z tego ćwiczenia w Codelabs dowiesz się, jak utworzyć niestandardową aplikację odbiornika internetowego, która korzysta z interfejsu Cast Live Breaks API.
Co to jest Google Cast?
Google Cast umożliwia przesyłanie treści z urządzenia mobilnego na telewizor. Użytkownicy mogą wtedy używać urządzenia mobilnego jako pilota do odtwarzania multimediów na telewizorze.
Pakiet Google Cast SDK umożliwia rozszerzenie aplikacji o możliwość sterowania telewizorem lub systemem dźwiękowym. Pakiet Cast SDK umożliwia dodawanie niezbędnych komponentów 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 ćwiczenia z programowania utworzysz odbiornik Cast, który korzysta z interfejsów Live API.
Czego się nauczysz
- Jak obsługiwać transmisję na żywo w Cast.
- Jak skonfigurować różne scenariusze transmitowania na żywo obsługiwane przez Cast.
- Jak dodać dane programu do transmisji na żywo
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 albo Google Home Hub,
Doświadczenie
- Musisz mieć wcześniejszą wiedzę na temat tworzenia stron internetowych.
- Doświadczenie w tworzeniu aplikacji nadawczych i odbiorczych Cast.
Jak zamierzasz korzystać z tego samouczka?
Jak oceniasz swoje doświadczenie w tworzeniu aplikacji internetowych?
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, taki jak 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.
Kliknij „Dodaj nową aplikację”.
Wybierz „Custom Receiver” (Odbiornik niestandardowy) – to właśnie tworzymy.
Wpisz dane nowego odbiorcy, używając adresu URL, który został Ci przypisany.
w 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.
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 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. Przesyłanie prostej transmisji na żywo
Zanim zaczniesz to ćwiczenie, warto zapoznać się z przewodnikiem dla programistów dotyczącym transmisji na żywo, w którym znajdziesz omówienie interfejsów API transmisji na żywo.
W przypadku nadawcy użyjemy narzędzia Cactool, aby rozpocząć sesję przesyłania. Odbiornik jest zaprojektowany tak, aby automatycznie rozpoczynać odtwarzanie transmisji na żywo.
Odbiornik składa się z 3 plików. Podstawowy plik HTML o nazwie receiver.html, który zawiera główną strukturę aplikacji. Nie musisz modyfikować tego pliku. Jest też plik o nazwie receiver.js, który zawiera całą logikę odbiornika. Jest też metadata_service.js, który zostanie użyty w dalszej części tego samouczka do symulowania uzyskiwania danych przewodnika po programach.
Na początek otwórz Cactool w Chrome. Wpisz identyfikator aplikacji odbiornika, który został Ci przyznany w Konsoli programisty Cast SDK, i kliknij Ustaw.
Framework aplikacji do przesyłania treści Web Receiver (CAF) musi otrzymać informację, że odtwarzane treści to transmisja na żywo. Aby to zrobić, zmodyfikuj aplikację, dodając ten wiersz kodu. Dodaj go do głównej części przechwytującego wczytywanie w receiver.js:
request.media.streamType = cast.framework.messages.StreamType.LIVE;
Ustawienie typu strumienia na LIVE włącza interfejs na żywo CAF. Pakiet Web Receiver SDK automatycznie przejdzie do końca transmisji na żywo. Dane przewodnika po programach na żywo nie zostały jeszcze dodane, więc pasek przewijania będzie reprezentować pełną długość zakresu, w którym można przewijać transmisję.
Zapisz zmiany w receiver.js i rozpocznij sesję Cast na Cactool, klikając przycisk Cast i wybierając docelowe urządzenie przesyłające. Transmisja na żywo powinna rozpocząć się od razu.
6. Dodawanie danych przewodnika po programach
Obsługa treści na żywo w CAF obejmuje teraz wyświetlanie danych przewodnika po programach w aplikacjach odbiornika i nadawcy. Dostawcy treści są zachęcani do umieszczania metadanych programów w aplikacjach odbiornika, aby zapewnić lepsze wrażenia użytkownikom, zwłaszcza w przypadku długich transmisji na żywo, takich jak kanały telewizyjne.
CAF obsługuje ustawianie metadanych dla wielu programów w jednym strumieniu. Ustawiając sygnatury czasowe rozpoczęcia i czas trwania w obiektach MediaMetadata, odbiornik automatycznie aktualizuje metadane wyświetlane na urządzeniach wysyłających i nakładce na podstawie bieżącej lokalizacji odtwarzacza w strumieniu. Poniżej znajdziesz przykłady interfejsów API i ich ogólne zastosowania.
// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;
W tym samouczku użyjemy przykładowej usługi metadanych, aby dostarczyć metadane do transmisji na żywo. Aby utworzyć listę metadanych programu, utwórz kontener. Obiekt ContainerMetadata zawiera listę obiektów MediaMetadata dla pojedynczego strumienia multimediów. Każdy obiekt MediaMetadata reprezentuje jedną sekcję w kontenerze. Gdy głowica odtwarzania znajduje się w granicach danej sekcji, jej metadane są automatycznie kopiowane do stanu multimediów. Dodaj do pliku receiver.js ten kod, aby pobrać przykładowe metadane z naszej usługi i udostępnić kontener CAF.
/**
* Gets the current program guide data from the sample MetadataService. Once
* obtained, the guide information is added using QueueManager.
*/
async function loadGuideData() {
const data = await MetadataService.fetchLiveMetadata();
const containerMetadata = new cast.framework.messages.ContainerMetadata();
containerMetadata.sections = data;
playerManager.getQueueManager().setContainerMetadata(containerMetadata);
}
Dodaj też wywołanie funkcji wczytywania danych przewodnika w interceptorze wczytywania:
loadGuideData();
Zapisz plik receiver.js i rozpocznij sesję przesyłania. Na ekranie powinny być widoczne godzina rozpoczęcia i zakończenia programu oraz jego tytuł.
Gdy głowica odtwarzania przechodzi do nowej sekcji w kontenerze, odbiornik wysyła do wszystkich nadawców nową wiadomość o stanie multimediów, aby aplikacje nadawców mogły zaktualizować swój interfejs. Zalecamy, aby aplikacje odbierające aktualizowały metadane kontenera w przechwytywaczu stanu multimediów, aby nadal przekazywać informacje o programie do aplikacji wysyłających. W naszej przykładowej usłudze zwracamy metadane bieżącego programu, a także metadane 2 kolejnych programów. Aby zaktualizować metadane transmisji, utwórz nowy kontener i wywołaj funkcję setContainerMetadata, tak jak w poprzednim przykładzie.
7. Wyłączanie przewijania
Większość strumieni wideo składa się z segmentów zawierających zakres klatek wideo. O ile nie określono inaczej, CAF umożliwi użytkownikom wyszukiwanie w tych segmentach. Odbiornik internetowy może to określić, wywołując kilka dostępnych interfejsów API.
W interceptorze ładowania usuń polecenie SEEK obsługiwane przez media. Wyłącza to przewijanie na wszystkich interfejsach nadawców mobilnych i interfejsach dotykowych. Po definicjach zmiennych instancji pakietu SDK w pliku receiver.js dodaj ten kod.
// Disable seeking
playerManager.removeSupportedMediaCommands(
cast.framework.messages.Command.SEEK, true);
Aby wyłączyć polecenia głosowe oparte na Asystencie, takie jak OK Google, cofnij o 60 sekund, należy użyć funkcji przechwytywania przewijania. Ten przechwytujący jest wywoływany za każdym razem, gdy wysyłane jest żądanie przewijania. Jeśli polecenie SEEK obsługiwane przez multimedia jest wyłączone, przechwytujący odrzuci żądanie wyszukiwania. Dodaj do pliku receiver.js ten fragment kodu:
/**
* A seek interceptor is called whenever CAF receives a request to seek to
* a different location in media. This interceptor can be used to modify that
* seek request or disable seeking completely.
*/
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
// if the SEEK supported media command is disabled, block seeking
if (!(playerManager.getSupportedMediaCommands() &
cast.framework.messages.Command.SEEK)) {
castDebugLogger.info(TAG, 'Seek blocked.');
return null;
}
return seekRequestData;
});
Zapisz plik receiver.js i rozpocznij sesję przesyłania. Nie powinno być już możliwe przewijanie transmisji na żywo.
8. Gratulacje
Wiesz już, jak utworzyć niestandardową aplikację odbiornika za pomocą najnowszego pakietu Cast Receiver SDK.
Więcej informacji znajdziesz w przewodniku dla programistów dotyczącym transmisji na żywo.