Aplikacja internetowa z obsługą przesyłania

1. Przegląd

W tym module dowiesz się, jak zmodyfikować istniejącą aplikację internetową do odtwarzania filmów, aby przesyłać treści na urządzenie obsługujące Google Cast.

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 kursu będziesz mieć aplikację internetową Chrome, która będzie mogła przesyłać filmy na urządzenie przesyłające Google Cast.

Czego się nauczysz

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

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,
• Do przetestowania integracji Cast Connect wymagany jest Chromecast z Google TV, ale w pozostałej części Codelabu jest on opcjonalny. Jeśli nie masz takiego urządzenia, możesz pominąć krok Dodawanie obsługi Cast Connect pod koniec tego samouczka.

Doświadczenie

• Musisz mieć wcześniejszą wiedzę na temat tworzenia stron internetowych.
• Musisz też mieć doświadczenie w oglądaniu telewizji.

2. Pobieranie przykładowego kodu

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

file_downloadPobierz kod źródłowy

i rozpakuj pobrany plik ZIP.

3. Uruchamianie przykładowej aplikacji

Najpierw zobaczmy, jak wygląda gotowa 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 przesyłające Google Cast.

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

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-done i uruchom serwer.

W przeglądarce otwórz adres URL https przykładowego pliku, który został przez Ciebie hostowany.

1. Powinna pojawić się aplikacja wideo.
2. Kliknij przycisk Cast i wybierz urządzenie Google Cast.
3. Wybierz film i kliknij przycisk odtwarzania.
4. Film zacznie się odtwarzać na urządzeniu przesyłającym Google Cast.

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

Kliknij przycisk Cast, aby zatrzymać przesyłanie na urządzenie przesyłające Google Cast.

Zanim przejdziesz dalej, zatrzymaj serwer.

4. Przygotowywanie projektu początkowego

Musimy dodać obsługę Google Cast do pobranej aplikacji startowej. W tym ćwiczeniu będziemy używać tych terminów związanych z Google Cast:

• aplikacja nadawcy jest uruchomiona na urządzeniu mobilnym lub laptopie,
• na urządzeniu przesyłającym działa aplikacja odbiornika;

Teraz możesz rozbudowywać projekt początkowy za pomocą ulubionego edytora tekstu:

1. Wybierz katalog app-start z pobranych przykładowych kodów.
2. Uruchom aplikację na serwerze i zapoznaj się z interfejsem.

Pamiętaj, że w trakcie tego ćwiczenia musisz ponownie hostować próbkę na serwerze 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 pliku index.html i głównego kontrolera CastVideos.js..

index.html

Ten plik HTML zawiera deklaracje niemal wszystkich elementów interfejsu aplikacji internetowej.

Widoki są podzielone na kilka sekcji. Mamy sekcję div#main_video, która zawiera element wideo. W przypadku elementu div filmu mamy tag div#media_control, który definiuje wszystkie elementy sterujące elementem wideo. Poniżej znajduje się sekcja media_info, w której wyświetlają się szczegóły oglądanego filmu. Na koniec element carousel wyświetla listę filmów w elemencie div.

Plik index.html uruchamia też pakiet Cast SDK i informuje funkcję CastVideos o konieczności wczytania.

Większość treści, które będą wypełniać te elementy, jest zdefiniowana, wstrzykiwana i kontrolowana w CastVideos.js. Przyjrzyjmy się temu.

CastVideos.js

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

Istnieje kilka głównych sekcji, które wspólnie odpowiadają za zarządzanie filmem i odtwarzanie go lokalnie oraz zdalnie. Ogólnie rzecz biorąc, jest to dość prosta aplikacja internetowa.

CastPlayer to główna klasa, która zarządza całą aplikacją, konfiguruje odtwarzacz, wybiera multimedia i wiąże zdarzenia z PlayerHandler w celu odtwarzania multimediów. CastPlayer.prototype.initializeCastPlayer to metoda, która konfiguruje wszystkie funkcje przesyłania. CastPlayer.prototype.switchPlayer przełącza stan między odtwarzaczami lokalnymi i zdalnymi. CastPlayer.prototype.setupLocalPlayer i CastPlayer.prototype.setupRemotePlayer inicjują graczy lokalnych i zdalnych.

PlayerHandler to klasa odpowiedzialna za zarządzanie odtwarzaniem multimediów. Istnieje wiele innych metod, które odpowiadają za szczegóły zarządzania multimediami i ich odtwarzania.

Najczęstsze pytania

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

5. Dodawanie przycisku Cast

Aplikacja obsługująca Cast wyświetla przycisk Cast w elemencie wideo. Kliknięcie przycisku Cast powoduje wyświetlenie listy urządzeń obsługujących Cast, z której użytkownik może wybrać urządzenie. Jeśli użytkownik odtwarzał treści lokalnie na urządzeniu wysyłającym, wybranie urządzenia przesyłającego spowoduje rozpoczęcie lub wznowienie odtwarzania na tym urządzeniu. W dowolnym momencie sesji Cast użytkownik może kliknąć przycisk Cast i zatrzymać przesyłanie aplikacji na urządzenie przesyłające. Użytkownik musi mieć możliwość połączenia się z urządzeniem przesyłającym lub odłączenia od niego na dowolnym ekranie aplikacji, zgodnie z opisem w liście kontrolnej projektowania Google Cast.

Konfiguracja

Projekt początkowy wymaga tych samych zależności i konfiguracji co ukończona przykładowa aplikacja, ale tym razem hostuj zawartość pliku app-start.

W przeglądarce otwórz adres URL https przykładowego pliku, który został przez Ciebie hostowany.

Pamiętaj, że w zależności od usługi po wprowadzeniu zmian musisz ponownie umieścić próbkę na serwerze.

Zdarzenie inicjujące

Platforma Cast ma globalny obiekt singleton CastContext, który koordynuje wszystkie działania platformy. Ten obiekt musi zostać zainicjowany na wczesnym etapie cyklu życia aplikacji, zwykle przez wywołanie zwrotne przypisane do window['__onGCastApiAvailable'], które jest wywoływane po załadowaniu pakietu Cast SDK i udostępnieniu go do użycia. W tym przypadku funkcja CastContext jest wywoływana w funkcji CastPlayer.prototype.initializeCastPlayer, która jest wywoływana z wywołania zwrotnego wspomnianego powyżej.

Podczas inicjowania CastContext należy podać obiekt JSON options. Ta klasa zawiera opcje, które wpływają na działanie platformy. Najważniejszy z nich to identyfikator aplikacji odbiornika, który służy do filtrowania listy dostępnych urządzeń do przesyłania, aby 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 obsługującej Cast musisz zarejestrować się jako deweloper Cast, a następnie uzyskać identyfikator aplikacji. W tym samouczku użyjemy przykładowego identyfikatora 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 i 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ć nową metodę w CastVideos.js, która odpowiada metodzie, którą właśnie wywołaliśmy w index.html. Dodajmy nową metodę o nazwie initializeCastPlayer, która ustawia opcje w klasie CastContext i inicjuje 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

Gdy CastContext zostanie zainicjowany, musimy dodać przycisk Cast, aby umożliwić użytkownikowi wybór urządzenia przesyłającego. Pakiet Cast SDK udostępnia komponent przycisku Cast o nazwie google-cast-launcher z identyfikatorem „castbutton". Można go dodać do elementu wideo aplikacji, po prostu dodając button w sekcji media_control.

Element przycisku będzie wyglądać tak:

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

Dodaj ten kod do pliku index.html w sekcji media_control:

<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 kliknięciu go wyświetli się lista urządzeń przesyłających w Twojej sieci lokalnej. Wykrywanie urządzeń jest zarządzane automatycznie przez przeglądarkę Chrome. Wybierz urządzenie przesyłające, a na nim wczyta się przykładowa aplikacja odbiornika.

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

6. Przesyłanie treści wideo

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

Przesyłanie multimediów

Ogólnie rzecz biorąc, aby odtworzyć multimedia na urządzeniu przesyłającym, musisz wykonać te czynności:

1. Utwórz obiekt MediaInfo JSON z pakietu Cast SDK, który modeluje element multimedialny.
2. Użytkownik łączy się z urządzeniem przesyłającym, aby uruchomić aplikację odbiorcy.
3. Włóż 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 drugi. MediaInfo to element, który jest zrozumiały dla pakietu Cast SDK, a mediaJSON to hermetyzacja elementu multimedialnego w naszej aplikacji. Możemy łatwo zmapować mediaJSON na MediaInfo. Krok 2 został już wykonany w poprzedniej sekcji. Krok 3 jest łatwy do wykonania za pomocą pakietu Cast SDK.

Aplikacja przykładowa CastPlayer rozróżnia już odtwarzanie lokalne i zdalne w metodzie switchPlayer:

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

W tym ćwiczeniu nie musisz dokładnie rozumieć, jak działa cała logika przykładowego odtwarzacza. Warto jednak pamiętać, że odtwarzacz multimediów w aplikacji będzie musiał zostać zmodyfikowany, aby obsługiwać zarówno odtwarzanie lokalne, jak i zdalne.

Obecnie odtwarzacz lokalny jest zawsze w stanie odtwarzania lokalnego, ponieważ nie ma jeszcze informacji o stanach przesyłania. Musimy zaktualizować interfejs na podstawie przejść stanu, które występują w platformie Cast. Jeśli na przykład rozpoczniemy przesyłanie, musimy zatrzymać lokalne odtwarzanie i wyłączyć niektóre elementy sterujące. Podobnie, jeśli w tym kontrolerze widoku zatrzymamy przesyłanie, musimy przejść do odtwarzania lokalnego. Aby to zrobić, musimy nasłuchiwać różnych zdarzeń generowanych przez platformę Cast.

Zarządzanie sesją przesyłania

W przypadku platformy Cast sesja Cast łączy kroki łączenia się z urządzeniem, uruchamiania (lub dołączania do istniejącej sesji), łączenia się z aplikacją odbiornika i inicjowania kanału sterowania multimediami (w razie potrzeby). Kanał sterowania multimediami służy do wysyłania i odbierania przez platformę Cast wiadomości związanych z odtwarzaniem multimediów z odbiornika.

Sesja Cast rozpocznie się automatycznie, gdy użytkownik wybierze urządzenie za pomocą przycisku Cast, i zakończy się automatycznie, gdy użytkownik się rozłączy. Ponowne łączenie z sesją odbiornika z powodu problemów z siecią jest również automatycznie obsługiwane przez platformę Cast.

Sesjami przesyłania zarządza CastSession, do którego można uzyskać dostęp za pomocą cast.framework.CastContext.getInstance().getCurrentSession(). Wywołania zwrotne EventListener mogą służyć do monitorowania zdarzeń sesji, takich jak utworzenie, zawieszenie, wznowienie i zakończenie.

W naszej obecnej aplikacji całe zarządzanie sesją i stanem jest obsługiwane w metodzie setupRemotePlayer. Zacznijmy od skonfigurowania tego w aplikacji, dodając do elementu CastVideos.js ten kod:

/**
 * 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();
};

Musimy nadal powiązać wszystkie zdarzenia z wywołaniami zwrotnymi i obsługiwać wszystkie przychodzące zdarzenia. To dość proste, więc zróbmy to 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();
};

Wczytuję multimedia

W pakiecie Cast SDK klasy RemotePlayer i RemotePlayerController udostępniają zestaw wygodnych interfejsów API do zarządzania zdalnym odtwarzaniem multimediów na odbiorniku. W przypadku CastSession obsługującego odtwarzanie multimediów instancje RemotePlayer i RemotePlayerController będą tworzone automatycznie przez pakiet SDK. Można uzyskać do nich dostęp, tworząc instancje odpowiednio cast.framework.RemotePlayer i cast.framework.RemotePlayerController, jak pokazano wcześniej w tym samouczku.

Następnie musimy wczytać aktualnie wybrany film na odbiorniku, tworząc obiekt MediaInfo, który pakiet SDK przetworzy i przekaże w żądaniu. 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 między odtwarzaniem lokalnym a 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ę 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 : '');
  }
};

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

7. Dodawanie obsługi Cast Connect

Biblioteka Cast Connect umożliwia istniejącym aplikacjom wysyłającym komunikację z aplikacjami na Androida TV za pomocą protokołu Cast. Cast Connect korzysta z infrastruktury Cast, a aplikacja na Androida TV działa jako odbiornik.

Zależności

• przeglądarki Chrome w wersji M87 lub nowszej,

Ustawianie zgodności z odbiornikiem Androida

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

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

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

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

Ustawianie danych logowania do uruchamiania

Po stronie nadawcy możesz użyć symbolu CredentialsData, aby określić, kto dołącza do sesji. Symbol credentials to ciąg znaków, który może być zdefiniowany przez użytkownika, o ile aplikacja na Androida TV jest w stanie go odczytać. 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 on przekazany do aplikacji na Androida TV.

Aby ustawić dane logowania do uruchamiania, należy zdefiniować CredentialsData w dowolnym momencie po ustawieniu opcji uruchamiania.

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

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

Ustawianie danych logowania w żądaniu wczytania

Jeśli aplikacja odbiornika internetowego i aplikacja na Androida TV obsługują credentials w różny sposób, może być konieczne zdefiniowanie osobnych danych logowania dla każdej z nich. Aby to zrobić, dodaj ten kod w funkcji CastVideos.js w sekcji playerTarget.load w funkcji 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 nadawca przesyła treści, pakiet SDK będzie teraz automatycznie określać, których danych logowania użyć w bieżącej sesji.

Testowanie Cast Connect

Instalowanie pliku APK Androida TV na urządzeniu Chromecast z Google TV:

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

$ adb connect <device_ip_address>:5555

3. W oknie terminala przejdź do folderu najwyższego poziomu z przykładowymi plikami do tego ćwiczenia, który został pobrany na początku. Na przykład:

$ cd Desktop/chrome_codelab_src

4. Zainstaluj plik APK w tym folderze na Androidzie TV, uruchamiając to polecenie:

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

5. W menu Twoje aplikacje na urządzeniu z Androidem TV powinna być teraz widoczna aplikacja o nazwie Przesyłaj filmy.
6. Uruchom zaktualizowany kod nadawcy internetowego i utwórz sesję przesyłania na urządzeniu z Androidem TV, używając ikony przesyłania lub wybierając Cast.. w menu przeglądarki Chrome. Powinno to teraz uruchomić aplikację na Androida TV na odbiorniku z Androidem i umożliwić sterowanie odtwarzaniem za pomocą pilota Android TV.

8. Gratulacje

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

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