1. Opis
Dzięki tym ćwiczeniom z programowania dowiesz się, jak stworzyć aplikację niestandardowego odbiornika internetowego, która używa interfejsu Cast Live Breaks API.
Co to jest Google Cast?
Google Cast pozwala użytkownikom przesyłać treści z urządzenia mobilnego na telewizor. Dzięki temu użytkownicy mogą używać swoich urządzeń mobilnych jako pilota do odtwarzania multimediów na telewizorze.
Pakiet SDK Google Cast pozwala rozszerzyć aplikację o sterowanie telewizorem lub systemem audio. Pakiet SDK Cast pozwala dodać niezbędne komponenty interfejsu zgodnie z listą kontrolną 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 utworzysz odbiornik przesyłania, który będzie wykorzystywać interfejsy Live API.
Czego się nauczysz
- Obsługa treści wideo na żywo w funkcji Cast.
- Jak skonfigurować różne scenariusze transmisji na żywo obsługiwane przez Cast.
- Jak dodać dane programu do transmisji na żywo
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 albo Google Home Hub;
Funkcja
- Aby skorzystać z tej możliwości, musisz mieć wiedzę w zakresie tworzenia stron internetowych.
- Poprzednie doświadczenie w tworzeniu aplikacji nadawcy i odbiorcy Cast.
Jak będziesz korzystać z tego samouczka?
Jak oceniasz swoje doświadczenia z tworzeniem aplikacji internetowych?
2. Pobieranie przykładowego kodu
Możesz pobrać cały przykładowy kod na komputer...
i rozpakuj pobrany plik ZIP.
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
Aby móc uruchamiać niestandardowy odbiornik (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 odbiorcy. Pamiętaj, aby użyć docelowego adresu URL.
w 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. Przesyłanie prostej transmisji na żywo
Przed rozpoczęciem tego ćwiczenia z programowania warto zapoznać się z przewodnikiem dla programistów na żywo, który zawiera omówienie aktywnych interfejsów API.
W przypadku nadawcy użyjemy Narzędzia do zainicjowania sesji przesyłania. Odbiornik jest zaprojektowany tak, aby automatycznie rozpoczynać odtwarzanie transmisji na żywo.
Odbiorca 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. Dostępny jest też plik o nazwie receiver.js, który zawiera wszystkie funkcje logiczne odbiornika. Dostępny jest też obiekt metadata_service.js, który zostanie użyty w dalszej części ćwiczeń z programowania do symulowania uzyskiwania danych z przewodnika po programie.
Najpierw otwórz Cactool w Chrome. Wpisz Identyfikator aplikacji odbiornika podany w konsoli programisty Cast SDK i kliknij Ustaw.
Platforma CAF (Web pickups Application Framework) musi być poinstruowana, że treści, które mają być odtwarzane, są transmisją na żywo. Aby to zrobić, zmodyfikuj aplikację, wpisując ten wiersz kodu. Dodaj go do głównej treści modułu przechwytywania obciążenia w receiver.js:
request.media.streamType = cast.framework.messages.StreamType.LIVE;
Ustawienie typu strumienia na LIVE włącza interfejs użytkownika na żywo CAF. Pakiet SDK Web pickups automatycznie przeskoczy do krawędzi 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 możliwego do przewijania transmisji.
Zapisz zmiany w pliku receiver.js i zainicjuj sesję przesyłania w Cactool, klikając przycisk przesyłania i wybierając urządzenie docelowe. Transmisja na żywo powinna rozpocząć się od razu.
6. Dodawanie danych przewodnika po programach
Obsługa treści transmitowanych na żywo w CAF obejmuje teraz wyświetlanie danych przewodnika po programach w aplikacjach odbiorców i nadawców. Zdecydowanie zalecamy dostawcom treści dodawanie metadanych do programów odbierających w aplikacjach odbierających, aby zapewnić użytkownikom lepsze wrażenia, 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. Dzięki ustawieniu sygnatur czasowych i czasu trwania w obiektach MediaMetadata odbiorca automatycznie aktualizuje metadane wyświetlane u nadawców i nakładce na podstawie bieżącej lokalizacji odtwarzacza w strumieniu. Poniżej znajdziesz przykładowe interfejsy API i ich ogólne zastosowanie.
// 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;
Na potrzeby tego ćwiczenia z programowania użyjemy przykładowej usługi metadanych, aby udostępnić metadane transmisji na żywo. Aby podać listę metadanych programu, utwórz kontener. ContainerMetadata zawiera listę MediaMetadata obiektów pojedynczego strumienia multimediów. Każdy obiekt MediaMetadata odpowiada jednej sekcji w kontenerze. Gdy suwak odtwarzania mieści się w granicach danej sekcji, jej metadane zostaną automatycznie skopiowane do stanu multimediów. Dodaj poniższy kod do pliku receiver.js, aby pobrać przykładowe metadane z naszej usługi i przekazać kontener do 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);
}
Dodatkowo dodaj wywołanie funkcji ładującej dane przewodnika do modułu przechwytującego obciążenie:
loadGuideData();
Zapisz plik receiver.js i zainicjuj sesję przesyłania. Na ekranie powinny być widoczne: godzina rozpoczęcia i zakończenia oraz tytuł programu.
Gdy suwak odtwarzania przejdzie do nowej sekcji w kontenerze, od odbiorcy będzie wysyłany do wszystkich nadawców, aby aplikacje nadawców mogły zaktualizować interfejs użytkownika. Zalecane jest, aby aplikacje odbierające aktualizowały metadane kontenera w module do przechwytywania stanu mediów, aby nadal przekazywać informacje o programie do aplikacji nadawców. W naszej przykładowej usłudze zwracane są metadane bieżącego programu oraz metadane dwóch następnych programów. Aby zaktualizować metadane strumienia, utwórz nowy kontener i wywołaj setContainerMetadata jak w poprzednim przykładzie.
7. Wyłączanie przewijania
Większość strumieni wideo składa się z segmentów obejmujących zakres klatek wideo. O ile nie wskazano 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.
Z modułu przechwytującego obciążenie usuń polecenie multimediów obsługiwane przez SEEK. Wyłącza to przewijanie we wszystkich mobilnych interfejsach nadawcy i dotyku. Po definicjach zmiennych instancji pakietu SDK w tabeli receiver.js dodaj ten kod.
// Disable seeking
playerManager.removeSupportedMediaCommands(
cast.framework.messages.Command.SEEK, true);
Aby wyłączyć polecenia głosowe obsługiwane przez Asystenta, np. OK Google, przewiń do tyłu o 60 sekund, należy użyć narzędzia do przewijania. Ten obiekt przechwytujący jest wywoływany przy każdym żądaniu wyszukiwania. Jeśli polecenie multimediów obsługiwane przez SEEK jest wyłączone, moduł 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 zainicjuj sesję przesyłania. Wyszukiwanie w transmisji na żywo powinno być już niedostępne.
8. Gratulacje
Wiesz już, jak utworzyć niestandardową aplikację odbiornika za pomocą najnowszego pakietu SDK Cast pickupr SDK.
Szczegółowe informacje znajdziesz w przewodniku dla programistów dotyczącym transmisji na żywo.