Aplikacja internetowa z obsługą przesyłania

1. Omówienie

Z tego laboratorium programistycznego dowiesz się, jak zmodyfikować istniejącą aplikację do przesyłania filmów w internecie, aby przesyłać treści na urządzenie obsługujące Google Cast.

Co to jest Google Cast?

Google Cast umożliwia użytkownikom 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 SDK Google Cast umożliwia rozszerzenie aplikacji o możliwość sterowania telewizorem lub systemem audio. SDK Cast pozwala dodać niezbędne komponenty interfejsu zgodnie z listą kontrolną projektu Google Cast.

Lista kontrolna dotycząca projektowania Google Cast została przygotowana, aby zapewnić użytkownikom prostotę i przewidywalność korzystania z Casta na wszystkich obsługiwanych platformach.

Co będziemy budować?

Po ukończeniu tego ćwiczenia będziesz mieć aplikację internetową do przesyłania filmów w Chrome, która umożliwia przesyłanie filmów na urządzenie z Google Cast.

Czego się nauczysz

• Jak dodać pakiet SDK Google Cast do przykładowej aplikacji wideo
• Jak dodać przycisk przesyłania, aby wybrać urządzenie Google Cast.
• Jak połączyć się z urządzeniem Cast i uruchomić odbiornik multimediów.
• Jak przesyłać filmy.
• Jak zintegrować Cast Connect

Czego potrzebujesz

• najnowsza wersja przeglądarki Google Chrome,
• usługa hostingu HTTPS, np. Firebase Hosting 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.
• Chromecast z Google TV jest wymagany do przetestowania integracji Cast Connect, ale nie jest wymagany w pozostałych częściach tego Codelaba. Jeśli nie masz takiego urządzenia, możesz pominąć krok Dodaj obsługę Cast Connect pod koniec tego samouczka.

Doświadczenie

• Musisz mieć już wcześniejsze doświadczenie w 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 niezawodna, możesz podłączyć Chromecasta za pomocą adaptera Ethernetu do Chromecast lub Chromecasta z Google TV.

Jak będziesz korzystać z tego samouczka?

Tylko przeczytać Przeczytać i wykonać ćwiczenia

Jak oceniasz swoje doświadczenia z tworzeniem aplikacji internetowych?

Początkujący Średnio zaawansowany Zaawansowany

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

Początkujący Średnio zaawansowany Zaawansowany

2. Pobieranie przykładowego kodu

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

Pobieranie kodu źródłowego

i rozpakuj pobrany plik ZIP.

Repozytorium cast-videos-cast Codelab zawiera 2 przykładowe projekty:

• app-start – kod początkowy, na którym będziesz budować w tym ćwiczeniu.
• app-done – kompletny kod gotowej przykładowej aplikacji wideo.

3. Uruchamianie przykładowej aplikacji

Najpierw zobaczmy, jak wygląda ukończona przykładowa aplikacja. Aplikacja jest podstawowym odtwarzaczem wideo. Użytkownik może wybrać film z listy, a następnie odtworzyć go lokalnie na urządzeniu lub przesłać na urządzenie z Google Cast.

Aby można było korzystać z ukończonego projektu, musi on być hostowany.

Jeśli nie masz serwera, możesz użyć hostingu Firebase lub ngrok.

Uruchamianie serwera

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

W przeglądarce otwórz adres URL https pliku hostowanego przez Ciebie.

1. Powinna się wyświetlić aplikacja do obsługi filmów.
2. Kliknij przycisk Cast i wybierz urządzenie Google Cast.
3. Wybierz film i kliknij przycisk odtwarzania.
4. Rozpocznie się odtwarzanie filmu na urządzeniu Google Cast.

Aby wstrzymać odtwarzanie filmu na odbiorniku, kliknij przycisk wstrzymania w elemencie wideo. Kliknij przycisk odtwarzania w elemencie wideo, aby ponownie odtworzyć film.

Aby zatrzymać przesyłanie na urządzenie Google Cast, kliknij przycisk Cast.

Zanim przejdę dalej, zatrzymaj serwer.

4. Przygotowanie projektu startowego

Musimy 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 nadawcy działa na urządzeniu mobilnym lub laptopie,
• na urządzeniu Google Cast działa aplikacja odbiornikowa.

Teraz możesz rozszerzyć projekt startowy za pomocą ulubionego edytora tekstu:

1. Wybierz katalog app-start z pobranego przykładowego kodu.
2. Uruchom aplikację na serwerze i poznaj interfejs.

Podczas pracy z tym ćwiczeniem na platformie Codelab musisz ponownie umieścić na serwerze przykładowy kod w zależności od usługi.

Projektowanie aplikacji

Aplikacja pobiera listę filmów z zdalnego serwera internetowego i udostępnia ją użytkownikowi. Użytkownicy mogą wybrać film, aby wyświetlić szczegóły lub odtworzyć go lokalnie na urządzeniu mobilnym.

Aplikacja składa się z jednego głównego widoku zdefiniowanego w elementach index.html i głównego elementu sterującego CastVideos.js..

index.html

Ten plik HTML deklaruje prawie cały interfejs aplikacji internetowej.

Jest kilka sekcji widoków: div#main_video, która zawiera element wideo. W przypadku elementu div wideo mamy element div#media_control, który definiuje wszystkie elementy sterujące elementem wideo. Poniżej znajduje się media_info, w którym wyświetlane są szczegóły filmu. Na koniec element carousel div wyświetla listę filmów w elemencie div.

Plik index.html również wczytuje pakiet SDK Cast i informuje funkcję CastVideos, że ma się wczytać.

Większość treści, które będą wyświetlać się w tych elementach, jest zdefiniowana i wstrzykiwana oraz kontrolowana w CastVideos.js. Zobaczmy to.

CastVideos.js

Ten skrypt zarządza całą logiką aplikacji internetowej Cast Videos. Lista filmów i powiązanych z nimi metadanych zdefiniowanych w plikach CastVideos.js znajduje się w obiekcie o nazwie mediaJSON.

Istnieje kilka głównych sekcji, które razem odpowiadają za zarządzanie filmami i ich odtwarzanie zarówno lokalnie, jak i zdalnie. Ogólnie jest to dość prosta aplikacja internetowa.

CastPlayer to główna klasa, która zarządza całą aplikacją, konfiguruje odtwarzacz, wybiera media i wiąże zdarzenia z PlayerHandler, aby odtwarzać media. CastPlayer.prototype.initializeCastPlayer to metoda konfigurowania wszystkich funkcji Cast. CastPlayer.prototype.switchPlayer przełącza stan między odtwarzaczami lokalnymi i zdalnymi. CastPlayer.prototype.setupLocalPlayer i CastPlayer.prototype.setupRemotePlayer inicjują lokalnych i zdalnych graczy.

PlayerHandler to klasa odpowiedzialna za zarządzanie odtwarzaniem multimediów. Szczegóły dotyczące zarządzania multimediami i odtwarzania są obsługiwane przez inne metody.

Dokumentacja Cast

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

Najczęstsze pytania

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

5. Dodawanie przycisku Cast

Aplikacja obsługująca Cast wyświetla w elemencie wideo przycisk Cast. Po kliknięciu przycisku przesyłania wyświetla się lista urządzeń przesyłania, które użytkownik może wybrać. Jeśli użytkownik odtwarzał treści lokalnie na urządzeniu nadawcy, wybranie urządzenia przesyłającego spowoduje uruchomienie lub wznowienie odtwarzania na tym urządzeniu. W dowolnym momencie podczas sesji przesyłania użytkownik może kliknąć przycisk Cast, aby zatrzymać przesyłanie aplikacji na urządzenie Cast. Użytkownik musi mieć możliwość połączenia się z urządzeniem Cast lub odłączenia się od niego na dowolnym ekranie aplikacji, zgodnie z opisem w kontrolnej liście projektowania Google Cast.

Konfiguracja

Projekt początkowy wymaga tych samych zależności i konfiguracji co w przypadku ukończonej przykładowej aplikacji, ale tym razem hostowana jest zawartość app-start.

W przeglądarce otwórz adres URL https pliku hostowanego przez Ciebie.

Pamiętaj, że w zależności od usługi po wprowadzeniu zmian konieczne będzie ponowne hostowanie próbki na serwerze.

Zdarzenie inicjujące

Platforma Cast ma globalny obiekt pojedynczy CastContext, który koordynuje wszystkie jej działania. Ten obiekt musi zostać zainicjowany na wczesnym etapie cyklu życia aplikacji. Zwykle jest to wywołanie zwrotne przypisane do window['__onGCastApiAvailable'], które jest wywoływane po wczytaniu pakietu Cast SDK i gotowe do użycia. W tym przypadku funkcja CastContext jest wywoływana w polu CastPlayer.prototype.initializeCastPlayer ze wspomnianych wcześniej wywołań zwrotnych.

Podczas inicjowania CastContext musisz podać obiekt JSON options. Ta klasa zawiera opcje, które wpływają na działanie frameworka. Najważniejszy z nich jest identyfikator aplikacji odbiornika, który służy do filtrowania listy dostępnych urządzeń przesyłających i wyświetla tylko te, które mogą uruchomić określoną aplikację, oraz do uruchamiania aplikacji odbiornika po rozpoczęciu sesji przesyłania.

Podczas tworzenia własnej aplikacji z obsługą Cast musisz zarejestrować się jako deweloper Cast, a potem uzyskać identyfikator aplikacji. W tym samouczku użyjemy przykładowego identyfikatora aplikacji.

Jak zostać deweloperem Cast?

Rejestrując się w Konsoli Google Cast, możesz uzyskać identyfikator aplikacji.

Dodaj ten kod do pliku index.html na samym końcu sekcji body:

<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

Dodaj do pliku index.html ten kod, aby zainicjować aplikację CastVideos oraz zainicjować CastContext:

<script src="CastVideos.js"></script>
<script type="text/javascript">
var castPlayer = new CastPlayer();
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    castPlayer.initializeCastPlayer();
  }
};
</script>

Teraz musimy dodać w polu CastVideos.js nową metodę. Odpowiada ona metodzie, którą właśnie wywołaliśmy w index.html. Dodajmy nową metodę o nazwie initializeCastPlayer, która ustawia opcje w CastContext i inicjalizuje nowe obiekty RemotePlayer i RemotePlayerControllers:

/**
 * This method sets up the CastContext, and a few other members
 * that are necessary to play and control videos on a Cast
 * device.
 */
CastPlayer.prototype.initializeCastPlayer = function() {

    var options = {};

    // Set the receiver application ID to your own (created in
    // the Google Cast Developer Console), or optionally
    // use the chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
    options.receiverApplicationId = 'C0868879';

    // Auto join policy can be one of the following three:
    // ORIGIN_SCOPED - Auto connect from same appId and page origin
    // TAB_AND_ORIGIN_SCOPED - Auto connect from same appId, page origin, and tab
    // PAGE_SCOPED - No auto connect
    options.autoJoinPolicy = chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED;

    cast.framework.CastContext.getInstance().setOptions(options);

    this.remotePlayer = new cast.framework.RemotePlayer();
    this.remotePlayerController = new cast.framework.RemotePlayerController(this.remotePlayer);
    this.remotePlayerController.addEventListener(
        cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED,
        this.switchPlayer.bind(this)
    );
};

Na koniec musimy utworzyć zmienne dla RemotePlayer i RemotePlayerController:

var CastPlayer = function() {
  //...
  /* Cast player variables */
  /** @type {cast.framework.RemotePlayer} */
  this.remotePlayer = null;
  /** @type {cast.framework.RemotePlayerController} */
  this.remotePlayerController = null;
  //...
};

Przycisk Cast

Po zainicjowaniu CastContext musimy dodać przycisk przesyłania, aby umożliwić użytkownikowi wybranie urządzenia do przesyłania. Pakiet SDK Cast udostępnia komponent przycisku Cast o nazwie google-cast-launcher z identyfikatorem „castbutton"”. Można go dodać do elementu wideo aplikacji, dodając element button w sekcji media_control.

Element przycisku będzie wyglądał tak:

<google-cast-launcher id="castbutton"></google-cast-launcher>

Dodaj do index.html w sekcji media_control ten kod:

<div id="media_control">
  <div id="play"></div>
  <div id="pause"></div>
  <div id="progress_bg"></div>
  <div id="progress"></div>
  <div id="progress_indicator"></div>
  <div id="fullscreen_expand"></div>
  <div id="fullscreen_collapse"></div>
  <google-cast-launcher id="castbutton"></google-cast-launcher>
  <div id="audio_bg"></div>
  <div id="audio_bg_track"></div>
  <div id="audio_indicator"></div>
  <div id="audio_bg_level"></div>
  <div id="audio_on"></div>
  <div id="audio_off"></div>
  <div id="duration">00:00:00</div>
</div>

Teraz odśwież stronę w przeglądarce Chrome. W elemencie wideo powinien pojawić się przycisk Cast. Po jego kliknięciu zobaczysz listę urządzeń Cast w sieci lokalnej. Wykrywaniem urządzeń zarządza automatycznie przeglądarka Chrome. Wybierz urządzenie przesyłania treści, a na urządzeniu przesyłania treści zostanie załadowana przykładowa aplikacja odbiornika.

Nie udostępniliśmy jeszcze obsługi odtwarzania multimediów, więc nie można jeszcze odtwarzać filmów na urządzeniu przesyłającym. Aby zatrzymać przesyłanie, kliknij przycisk Cast.

6. Przesyłanie treści wideo

Rozwiniemy przykładową aplikację, aby można było odtwarzać filmy zdalnie na urządzeniu obsługującym Cast. Aby to zrobić, musimy nasłuchiwać różnych zdarzeń generowanych przez platformę Cast.

Przesyłanie multimediów

Ogólnie rzecz biorąc, jeśli chcesz odtworzyć multimedia na urządzeniu z Cast, musi się wydarzyć to:

1. Utwórz obiekt MediaInfo JSON z pakietu SDK Google Cast, który modeluje element multimedialny.
2. Użytkownik łączy się z urządzeniem Cast, aby uruchomić aplikację odbiorczą.
3. Wczytaj obiekt MediaInfo do odbiornika i odtwórz treści.
4. śledzić stan multimediów.
5. Wysyłanie poleceń odtwarzania do odbiornika na podstawie interakcji użytkownika.

Krok 1 polega na mapowaniu jednego obiektu na inny. MediaInfo jest obiektem zrozumiałym dla pakietu Cast SDK, a mediaJSON jest elementem multimedialnym zaimplementowanym w naszej aplikacji. Możemy łatwo mapować mediaJSON na MediaInfo. Krok 2 został już wykonany w poprzedniej sekcji. Krok 3. Możesz łatwo wykonać krok 3 za pomocą pakietu Cast SDK.

Przykładowa aplikacja CastPlayer już rozróżnia odtwarzanie lokalne i zdalne w ramach metody switchPlayer:

if (cast && cast.framework) {
  if (this.remotePlayer.isConnected) {
    //...

Z tego ćwiczenia z programowania nie musisz dokładnie wiedzieć, jak działa przykładowa logika odtwarzacza. Warto jednak pamiętać, że trzeba zmodyfikować odtwarzacz multimediów w aplikacji, aby uwzględniał zarówno odtwarzanie lokalne, jak i zdalne.

Obecnie lokalny odtwarzacz jest zawsze w stanie lokalnego odtwarzania, ponieważ nie wie jeszcze nic o stanach przesyłania. Musimy zaktualizować interfejs użytkownika na podstawie przejść między stanami, które występują w ramach platformy Cast. Jeśli na przykład zaczniemy przesyłać treści, musimy zatrzymać odtwarzanie na urządzeniu lokalnym i wyłączyć niektóre elementy sterujące. Podobnie, jeśli przestaniemy przesyłać strumieniowo, gdy jesteśmy w tym kontrolerze widoku, musimy przejść do odtwarzania lokalnego. Aby to uwzględnić, musimy nasłuchiwać różnych zdarzeń generowanych przez platformę Cast.

Zarządzanie sesją przesyłania

W przypadku platformy przesyłania sesja przesyłania obejmuje łączenie się z urządzeniem, uruchamianie (lub dołączanie do istniejącej sesji), nawiązywanie połączenia z aplikacją odbiornika oraz w razie potrzeby inicjowanie kanału sterowania multimediami. Kanał sterowania multimediami służy do wysyłania i odbierania przez odbiornik wiadomości związanych z odtwarzaniem multimediów.

Sesja przesyłania rozpocznie się automatycznie, gdy użytkownik wybierze urządzenie za pomocą przycisku przesyłania, i zatrzyma się automatycznie, gdy użytkownik się rozłączy. Ponowne nawiązanie połączenia z sesją odbiorczą z powodu problemów z siecią jest również obsługiwane automatycznie przez platformę Cast.

Sesje przesyłania zarządza aplikacja CastSession, do której można uzyskać dostęp w aplikacji cast.framework.CastContext.getInstance().getCurrentSession(). Zdarzeń wywołania zwrotnego EventListener można używać do monitorowania zdarzeń sesji, takich jak tworzenie, zawieszanie, wznawianie i zakończenie.

W naszej obecnej aplikacji cała obsługa sesji i stanu jest realizowana w metodzie setupRemotePlayer. Zacznijmy od konfiguracji Twojej aplikacji (CastVideos.js):

/**
 * Set the PlayerHandler target to use the remote player
 */
CastPlayer.prototype.setupRemotePlayer = function () {
    var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

    this.playerHandler.setTarget(playerTarget);

    // Setup remote player volume right on setup
    // The remote player may have had a volume set from previous playback
    if (this.remotePlayer.isMuted) {
        this.playerHandler.mute();
    }
    var currentVolume = this.remotePlayer.volumeLevel * FULL_VOLUME_HEIGHT;
    var p = document.getElementById('audio_bg_level');
    p.style.height = currentVolume + 'px';
    p.style.marginTop = -currentVolume + 'px';

    this.hideFullscreenButton();

    this.playerHandler.play();
};

Nadal musimy powiązać wszystkie zdarzenia z wywołań zwrotnych i obsługiwać wszystkie przychodzące zdarzenia. To dość proste, więc zajmijmy się tym teraz:

/**
 * Set the PlayerHandler target to use the remote player
 */
CastPlayer.prototype.setupRemotePlayer = function () {
    var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

    // Add event listeners for player changes which may occur outside sender app
    this.remotePlayerController.addEventListener(
        cast.framework.RemotePlayerEventType.IS_PAUSED_CHANGED,
        function() {
            if (this.remotePlayer.isPaused) {
                this.playerHandler.pause();
            } else {
                this.playerHandler.play();
            }
        }.bind(this)
    );

    this.remotePlayerController.addEventListener(
        cast.framework.RemotePlayerEventType.IS_MUTED_CHANGED,
        function() {
            if (this.remotePlayer.isMuted) {
                this.playerHandler.mute();
            } else {
                this.playerHandler.unMute();
            }
        }.bind(this)
    );

    this.remotePlayerController.addEventListener(
        cast.framework.RemotePlayerEventType.VOLUME_LEVEL_CHANGED,
        function() {
            var newVolume = this.remotePlayer.volumeLevel * FULL_VOLUME_HEIGHT;
            var p = document.getElementById('audio_bg_level');
            p.style.height = newVolume + 'px';
            p.style.marginTop = -newVolume + 'px';
        }.bind(this)
    );

    // This object will implement PlayerHandler callbacks with
    // remotePlayerController, and makes necessary UI updates specific
    // to remote playback
    var playerTarget = {};

    playerTarget.play = function () {
        if (this.remotePlayer.isPaused) {
            this.remotePlayerController.playOrPause();
        }

        var vi = document.getElementById('video_image');
        vi.style.display = 'block';
        var localPlayer = document.getElementById('video_element');
        localPlayer.style.display = 'none';
    }.bind(this);

    playerTarget.pause = function () {
        if (!this.remotePlayer.isPaused) {
            this.remotePlayerController.playOrPause();
        }
    }.bind(this);

    playerTarget.stop = function () {
         this.remotePlayerController.stop();
    }.bind(this);

    playerTarget.getCurrentMediaTime = function() {
        return this.remotePlayer.currentTime;
    }.bind(this);

    playerTarget.getMediaDuration = function() {
        return this.remotePlayer.duration;
    }.bind(this);

    playerTarget.updateDisplayMessage = function () {
        document.getElementById('playerstate').style.display = 'block';
        document.getElementById('playerstatebg').style.display = 'block';
        document.getElementById('video_image_overlay').style.display = 'block';
        document.getElementById('playerstate').innerHTML =
            this.mediaContents[ this.currentMediaIndex]['title'] + ' ' +
            this.playerState + ' on ' + castSession.getCastDevice().friendlyName;
    }.bind(this);

    playerTarget.setVolume = function (volumeSliderPosition) {
        // Add resistance to avoid loud volume
        var currentVolume = this.remotePlayer.volumeLevel;
        var p = document.getElementById('audio_bg_level');
        if (volumeSliderPosition < FULL_VOLUME_HEIGHT) {
            var vScale =  this.currentVolume * FULL_VOLUME_HEIGHT;
            if (volumeSliderPosition > vScale) {
                volumeSliderPosition = vScale + (pos - vScale) / 2;
            }
            p.style.height = volumeSliderPosition + 'px';
            p.style.marginTop = -volumeSliderPosition + 'px';
            currentVolume = volumeSliderPosition / FULL_VOLUME_HEIGHT;
        } else {
            currentVolume = 1;
        }
        this.remotePlayer.volumeLevel = currentVolume;
        this.remotePlayerController.setVolumeLevel();
    }.bind(this);

    playerTarget.mute = function () {
        if (!this.remotePlayer.isMuted) {
            this.remotePlayerController.muteOrUnmute();
        }
    }.bind(this);

    playerTarget.unMute = function () {
        if (this.remotePlayer.isMuted) {
            this.remotePlayerController.muteOrUnmute();
        }
    }.bind(this);

    playerTarget.isMuted = function() {
        return this.remotePlayer.isMuted;
    }.bind(this);

    playerTarget.seekTo = function (time) {
        this.remotePlayer.currentTime = time;
        this.remotePlayerController.seek();
    }.bind(this);

    this.playerHandler.setTarget(playerTarget);

    // Setup remote player volume right on setup
    // The remote player may have had a volume set from previous playback
    if (this.remotePlayer.isMuted) {
        this.playerHandler.mute();
    }
    var currentVolume = this.remotePlayer.volumeLevel * FULL_VOLUME_HEIGHT;
    var p = document.getElementById('audio_bg_level');
    p.style.height = currentVolume + 'px';
    p.style.marginTop = -currentVolume + 'px';

    this.hideFullscreenButton();

    this.playerHandler.play();
};

Wczytywanie multimediów

W pakiecie Cast SDK interfejsy RemotePlayer i RemotePlayerController zapewniają zestaw wygodnych interfejsów API do zdalnego zarządzania odtwarzaniem multimediów na odbiorniku. W przypadku CastSession, który obsługuje odtwarzanie multimediów, pakiety RemotePlayer i RemotePlayerController zostaną utworzone automatycznie przez pakiet SDK. Aby uzyskać do nich dostęp, utwórz instancje odpowiednio cast.framework.RemotePlayer i cast.framework.RemotePlayerController, jak pokazano to wcześniej w ćwiczeniach z programowania.

Następnie trzeba wczytać wybrany film w odbiorniku, tworząc obiekt MediaInfo, który zostanie przetworzony i przekazany przez pakiet SDK. Aby to zrobić, dodaj do pliku setupRemotePlayer ten kod:

/**
 * Set the PlayerHandler target to use the remote player
 */
CastPlayer.prototype.setupRemotePlayer = function () {
    //...

    playerTarget.load = function (mediaIndex) {
        console.log('Loading...' + this.mediaContents[mediaIndex]['title']);
        var mediaInfo = new chrome.cast.media.MediaInfo(
            this.mediaContents[mediaIndex]['sources'][0], 'video/mp4');

        mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
        mediaInfo.metadata.metadataType = chrome.cast.media.MetadataType.GENERIC;
        mediaInfo.metadata.title = this.mediaContents[mediaIndex]['title'];
        mediaInfo.metadata.images = [
            {'url': MEDIA_SOURCE_ROOT + this.mediaContents[mediaIndex]['thumb']}];

        var request = new chrome.cast.media.LoadRequest(mediaInfo);
        castSession.loadMedia(request).then(
            this.playerHandler.loaded.bind(this.playerHandler),
            function (errorCode) {
                this.playerState = PLAYER_STATE.ERROR;
                console.log('Remote media load error: ' +
                    CastPlayer.getErrorMessage(errorCode));
            }.bind(this));
    }.bind(this);

    //...
};

Teraz dodaj metodę przełączania się między odtwarzaniem lokalnym i zdalnym:

/**
 * This is a method for switching between the local and remote
 * players. If the local player is selected, setupLocalPlayer()
 * is run. If there is a cast device connected we run
 * setupRemotePlayer().
 */
CastPlayer.prototype.switchPlayer = function() {
    this.stopProgressTimer();
    this.resetVolumeSlider();
    this.playerHandler.stop();
    this.playerState = PLAYER_STATE.IDLE;
    if (cast && cast.framework) {
        if (this.remotePlayer.isConnected) {
            this.setupRemotePlayer();
            return;
        }
    }
    this.setupLocalPlayer();
};

Na koniec dodaj metodę do obsługi komunikatów o błędach Cast:

/**
 * Makes human-readable message from chrome.cast.Error
 * @param {chrome.cast.Error} error
 * @return {string} error message
 */
CastPlayer.getErrorMessage = function(error) {
  switch (error.code) {
    case chrome.cast.ErrorCode.API_NOT_INITIALIZED:
      return 'The API is not initialized.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.CANCEL:
      return 'The operation was canceled by the user' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.CHANNEL_ERROR:
      return 'A channel to the receiver is not available.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.EXTENSION_MISSING:
      return 'The Cast extension is not available.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.INVALID_PARAMETER:
      return 'The parameters to the operation were not valid.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.RECEIVER_UNAVAILABLE:
      return 'No receiver was compatible with the session request.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.SESSION_ERROR:
      return 'A session could not be created, or a session was invalid.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.TIMEOUT:
      return 'The operation timed out.' +
        (error.description ? ' :' + error.description : '');
  }
};

Teraz uruchom aplikację. Połącz się z urządzeniem przesyłającym i zacznij odtwarzać film. Film powinien się odtwarzać na odbiorniku.

7. Dodaj obsługę Cast Connect

Biblioteka Cast Connect umożliwia istniejącym aplikacjom nadawczym komunikowanie się z aplikacją Androida TV za pomocą protokołu Cast. Cast Connect opiera się na infrastrukturze Cast, a aplikacja na Androida TV pełni rolę odbiornika.

Zależności

• przeglądarka Chrome w wersji M87 lub nowszej,

Ustaw Android Receiver Compatible

Aby uruchomić aplikację na Androida TV, zwaną też odbiornikiem Androida, musimy ustawić w obiekcie CastOptions flagę androidReceiverCompatible na wartość Prawda.

Dodaj ten kod do funkcji CastVideos.js w funkcji initializeCastPlayer:

var options = {};
...
options.androidReceiverCompatible = true;

cast.framework.CastContext.getInstance().setOptions(options);

Uwaga: aby przetestować tę funkcję w ramach udostępnionego projektu app-done, przed uruchomieniem ustaw wspomniany wyżej parametr androidReceiverCompatible na true.

Ustawianie danych logowania do uruchamiania

Po stronie nadawcy możesz określić wartość CredentialsData, aby wskazać, kto dołącza do sesji. Wartość credentials to ciąg znaków, który może być zdefiniowany przez użytkownika, o ile tylko aplikacja ATV może go zinterpretować. Wartość CredentialsData jest przekazywana do aplikacji na Androida TV tylko podczas uruchamiania lub dołączania. Jeśli ustawisz go ponownie, gdy jesteś połączony, nie zostanie ono przekazane do aplikacji Android TV.

Aby można było skonfigurować dane logowania do uruchomienia, trzeba zdefiniować pole CredentialsData w dowolnym momencie po ustawieniu opcji uruchamiania.

Dodaj do klasy CastVideos.js w ramach funkcji initializeCastPlayer ten kod:

cast.framework.CastContext.getInstance().setOptions(options);
...
let credentialsData = new chrome.cast.CredentialsData("{\"userId\": \"abc\"}");
cast.framework.CastContext.getInstance().setLaunchCredentialsData(credentialsData);
...

Ustaw dane logowania przy wczytywaniu żądania

Jeśli aplikacja Web Receiver i aplikacja na Androida TV obsługują credentials inaczej, konieczne może być zdefiniowanie oddzielnych danych logowania dla każdej z nich. Aby to zrobić, dodaj ten kod w funkcji CastVideos.js w ramach funkcji playerTarget.load:setupRemotePlayer

...
var request = new chrome.cast.media.LoadRequest(mediaInfo);
request.credentials = 'user-credentials';
request.atvCredentials = 'atv-user-credentials';
...

W zależności od aplikacji odbiorcy, do której wysyłane są treści, pakiet SDK będzie teraz automatycznie określać, których danych logowania użyć w bieżącej sesji.

Testowanie Cast Connect

Uwaga: aby przetestować tę funkcję, musisz zainstalować pakiet APK Androida TV na Chromecastzie z Google TV. Jeśli jeszcze tego nie zrobiono, na Chromecastzie z Google TV wykonaj czynności opisane w sekcji Konfigurowanie na potrzeby programowania.

Aby zainstalować plik APK Androida TV na urządzeniu Chromecast z Google TV:

1. Znajdź adres IP urządzenia z Androidem TV. Zwykle jest ona dostępna w sekcji Ustawienia > Sieć i internet > (nazwa sieci, z którą połączone jest urządzenie). Po prawej stronie zobaczysz szczegóły i adres IP urządzenia w sieci.
2. Użyj adresu IP urządzenia, aby połączyć się z nim przez ADB za pomocą terminala:

$ adb connect <device_ip_address>:5555

3. W oknie terminala przejdź do folderu najwyższego poziomu z przykładowymi ćwiczeniami z programowania pobranymi na początku tego ćwiczenia. Na przykład:

$ cd Desktop/chrome_codelab_src

4. Zainstaluj plik .apk z tego folderu w Androidzie TV, uruchamiając polecenie:

$ adb -s <device_ip_address>:5555 install android-tv-app.apk

5. Na urządzeniu z Androidem TV w menu Twoje aplikacje powinieneś zobaczyć aplikację o nazwie Przesyłaj filmy.
6. Uruchom zaktualizowany kod nadawcy internetowego i nawiązaj sesję przesyłania na urządzeniu z Androidem TV, klikając ikonę Cast lub wybierając Cast.. w menu w przeglądarce Chrome. Aplikacja Android TV powinna się uruchomić na odbiorniku Androida i umożliwiać sterowanie odtwarzaniem za pomocą pilota Androida TV.

8. Gratulacje

Teraz już wiesz, jak włączyć przesyłanie aplikacji wideo za pomocą widżetów pakietu SDK przesyłania w aplikacji internetowej Chrome.

Więcej informacji znajdziesz w przewodniku dla programistów Web Sender.

Chcesz dodać więcej funkcji Cast?

Zapoznaj się z innymi laboratoriami kodu Cast i naszą aplikacją przykładową na GitHubie.