Bir web uygulamasını Cast uyumlu hale getirme

1. Genel bakış

Google Cast logosu

Bu codelab'de, Google Cast uyumlu bir cihazda içerik yayınlamak için mevcut bir web video uygulamasını nasıl değiştireceğinizi öğreneceksiniz.

Google Cast nedir?

Google Cast, kullanıcıların bir mobil cihazdan TV'ye içerik yayınlamasına olanak tanır. Kullanıcılar daha sonra mobil cihazlarını TV'de medya oynatmak için uzaktan kumanda olarak kullanabilir.

Google Cast SDK'sı, uygulamanızı bir TV veya ses sistemini kontrol edecek şekilde genişletmenize olanak tanır. Cast SDK'sı, Google Cast Tasarım Kontrol Listesi'ne göre gerekli kullanıcı arayüzü bileşenlerini eklemenize olanak tanır.

Google Cast Tasarım Kontrol Listesi, desteklenen tüm platformlarda Cast kullanıcı deneyimini basit ve tahmin edilebilir hale getirmek için sağlanmıştır.

Neyi inşa edeceğiz?

Bu codelab'i tamamladığınızda videoları Google Cast cihazına yayınlayabilecek bir Chrome web video uygulamanız olacaktır.

Neler öğreneceksiniz?

  • Örnek bir video uygulamasına Google Cast SDK'sı nasıl eklenir?
  • Google Cast cihazı seçmek için Yayın düğmesi nasıl eklenir?
  • Yayın cihazına bağlanıp medya alıcısı nasıl başlatılır?
  • Video nasıl yayınlanır?
  • Cast Connect nasıl entegre edilir?

Gerekenler

  • En son Google Chrome tarayıcı.
  • Firebase Hosting veya ngrok gibi HTTPS barındırma hizmetleri.
  • İnternet erişimi olan, Chromecast veya Android TV gibi bir Google Cast cihazı.
  • HDMI girişi olan bir TV veya monitör.
  • Cast Connect entegrasyonunu test etmek için Google TV Yüklü Chromecast gereklidir, ancak Codelab'in geri kalanı için isteğe bağlıdır. Destek kaydınız yoksa bu eğiticinin sonuna doğru olan Cast Connect Desteği Ekleme adımını atlayabilirsiniz.

Deneyim

  • Web geliştirme konusunda önceden bilgi sahibi olmanız gerekir.
  • Ayrıca TV izleme konusunda da önceden bilgi sahibi olmanız gerekir :)

Bu eğiticiyi nasıl kullanacaksınız?

Yalnızca okuma Okuyun ve alıştırmaları tamamlayın

Web uygulamaları oluşturma deneyiminizi nasıl değerlendirirsiniz?

Acemi Orta Düzey Yeterli

TV izleme deneyiminizi nasıl değerlendirirsiniz?

Acemi Orta Düzey Yeterli

2. Örnek kodu alın

Örnek kodun tamamını bilgisayarınıza indirebilirsiniz...

indirilen zip dosyasını açın.

3. Örnek uygulamayı çalıştırma

Google Chrome logosu

Önce tamamlanmış örnek uygulamanın nasıl göründüğüne bakalım. Uygulama, temel bir video oynatıcıdır. Kullanıcı, listeden bir video seçebilir ve videoyu cihazda yerel olarak oynatabilir veya bir Google Cast cihazına yayınlayabilir.

Tamamlananların kullanılabilmesi için barındırılması gerekir.

Kullanabileceğiniz bir sunucunuz yoksa Firebase Hosting veya ngrok'u kullanabilirsiniz.

Sunucuyu çalıştırma

İstediğiniz hizmeti ayarladıktan sonra app-done adresine gidip sunucunuzu başlatın.

Tarayıcınızda, barındırdığınız örneğin https URL'sini ziyaret edin.

  1. Video uygulaması görünür.
  2. Yayınla düğmesini tıklayın ve Google Cast cihazınızı seçin.
  3. Bir video seçip oynat düğmesini tıklayın.
  4. Video, Google Cast cihazınızda oynatılmaya başlar.

Yayın cihazında oynatılan videonun resmi

Videoyu alıcıda duraklatmak için video öğesindeki duraklat düğmesini tıklayın. Videoyu tekrar oynatmaya devam etmek için video öğesindeki oynat düğmesini tıklayın.

Google Cast cihazına yayını durdurmak için Yayınla düğmesini tıklayın.

Devam etmeden önce sunucuyu durdurun.

4. Başlangıç projesini hazırlama

Yayın cihazında oynatılan videonun resmi

İndirdiğiniz başlangıç uygulamasına Google Cast desteği eklememiz gerekiyor. Bu codelab'de kullanacağımız bazı Google Cast terminolojisi şöyledir:

  • Mobil cihazda veya dizüstü bilgisayarda çalışan bir gönderen uygulaması ise
  • Google Cast cihazında bir alıcı uygulaması çalışır.

Artık favori metin düzenleyicinizi kullanarak başlangıç projesinin temellerini oluşturmaya hazırsınız:

  1. Örnek kod indirdiğinizden klasör simgesiapp-start dizinini seçin.
  2. Uygulamayı sunucunuzu kullanarak çalıştırın ve kullanıcı arayüzünü keşfedin.

Bu codelab'de çalışırken hizmete bağlı olarak örneği sunucunuzda yeniden barındırmanız gerekeceğini unutmayın.

Uygulama tasarımı

Uygulama, uzak bir web sunucusundan video listesi getirir ve kullanıcının göz atabileceği bir liste sağlar. Kullanıcılar bir video seçerek ayrıntılarını görebilir veya videoyu mobil cihazlarında yerel olarak oynatabilir.

Uygulama, index.html ve ana denetleyici (CastVideos.js.) içinde tanımlanmış bir ana görünümden oluşur.

index.html

Bu HTML dosyası, web uygulamasının kullanıcı arayüzünün neredeyse tamamını tanımlar.

Görüntülemelerin birkaç bölümü var. Video öğesini içeren div#main_video bölümümüz var. Video div öğesiyle ilgili olarak, video öğesine ilişkin tüm denetimleri tanımlayan div#media_control. Onun altında ise media_info yer alır. Bu simgede, videonun ayrıntıları gösterilir. Son olarak, carousel div dosyasında videoların listesi gösterilir.

index.html dosyası da Cast SDK'sını önyükler ve CastVideos işlevinin yüklenmesini söyler.

Bu öğeleri dolduracak içeriğin çoğu CastVideos.js içinde tanımlanır, eklenir ve kontrol edilir. Şimdi buna bir göz atalım.

CastVideos.js

Bu komut dosyası, Cast Videolar web uygulamasının tüm mantığını yönetir. CastVideos.js içinde tanımlanan videoların listesi ve ilişkili meta verileri, mediaJSON adlı bir nesnede bulunur.

Videoyu hem yerel olarak hem de uzaktan yönetmek ve oynatmak için kullanılan birkaç ana bölüm vardır. Bu, genel olarak oldukça basit bir web uygulamasıdır.

CastPlayer, uygulamanın tamamını yöneten, oynatıcıyı kuran, medyayı seçen ve medya oynatmak için etkinlikleri PlayerHandler öğesine bağlayan ana sınıftır. CastPlayer.prototype.initializeCastPlayer, yayınlama işlevlerinin tamamını ayarlayan yöntemdir. CastPlayer.prototype.switchPlayer, durumu yerel ve uzak oynatıcılar arasında değiştirir. CastPlayer.prototype.setupLocalPlayer ve CastPlayer.prototype.setupRemotePlayer, yerel ve uzak oynatıcıları başlatır.

PlayerHandler, medya oynatmanın yönetiminden sorumlu sınıftır. Medya ve oynatmanın yönetilmesiyle ilgili ayrıntılardan sorumlu başka yöntemler de vardır.

Sık sorulan sorular

5. Yayınla düğmesi ekleniyor

Cast uyumlu bir uygulamanın resmi

Cast uyumlu bir uygulamanın, video öğesinde Yayın düğmesi görüntülenir. Yayınla düğmesi tıklandığında, kullanıcının seçebileceği Yayın cihazlarının listesi görüntülenir. Kullanıcı, içeriği gönderen cihazda yerel olarak oynatıyorsa, bir yayın cihazı seçildiğinde ilgili yayın cihazında oynatma başlatılır veya devam ettirilir. Yayınlama oturumu sırasında istediği zaman kullanıcı Yayınla düğmesini tıklayabilir ve uygulamanızın Yayın cihazına yayınlanmasını durdurabilir. Kullanıcı, Google Cast Tasarım Kontrol Listesi'nde açıklandığı gibi, uygulamanızın herhangi bir ekranındayken Cast cihazına bağlanabilmeli veya cihaz bağlantısı kesebilmelidir.

Yapılandırma

Başlangıç projesi, tamamlanan örnek uygulamada kullandığınız bağımlılıkları ve kurulumu gerektirir ancak bu kez app-start içeriğini barındırın.

Tarayıcınızda, barındırdığınız örneğin https URL'sini ziyaret edin.

Değişiklik yaparken hizmete bağlı olarak örneği sunucunuzda yeniden barındırmanız gerekeceğini unutmayın.

Başlatma

Cast çerçevesi, çerçevenin tüm etkinliklerini koordine eden genel bir tekil nesneye (CastContext) sahiptir. Bu nesne, uygulamanın yaşam döngüsünün başlarında başlatılmalıdır. Genellikle window['__onGCastApiAvailable'] öğesine atanan bir geri çağırma ile çağrılır. Cast SDK'sı yüklendikten sonra çağrılır ve kullanıma hazır olur. Bu durumda CastContext, yukarıda belirtilen geri çağırmayla çağrılan CastPlayer.prototype.initializeCastPlayer içinde çağrılır.

CastContext başlatılırken bir options JSON nesnesi sağlanmalıdır. Bu sınıf, çerçevenin davranışını etkileyen seçenekler içerir. Bunlardan en önemlisi alıcı uygulama kimliğidir. Bu kimlik, mevcut yayın cihazları listesini, yalnızca belirtilen uygulamayı çalıştırabilen cihazları gösterecek ve bir yayınlama oturumu başlatıldığında alıcı uygulamayı başlatacak şekilde filtrelemek için kullanılır.

Cast uyumlu kendi uygulamanızı geliştirdiğinizde, Cast geliştiricisi olarak kaydolmanız ve ardından uygulamanız için bir uygulama kimliği almanız gerekir. Bu codelab için örnek bir uygulama kimliği kullanacağız.

index.html için, body bölümünün en sonuna aşağıdaki kodu ekleyin:

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

CastVideos uygulamasını ve CastContext uygulamasını başlatmak için index.html alanına aşağıdaki kodu ekleyin:

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

Şimdi CastVideos.js bölümüne, index.html öğesinde az önce çağırdığımız yönteme karşılık gelen yeni bir yöntem eklememiz gerekiyor. CastContext'te seçenekleri ayarlayan ve yeni RemotePlayer ile RemotePlayerControllers'yi başlatan initializeCastPlayer adlı yeni bir yöntem ekleyelim:

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

Son olarak, RemotePlayer ve RemotePlayerController için değişkenler oluşturmamız gerekir:

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

Yayınla düğmesi

CastContext başlatıldığına göre kullanıcının yayın cihazı seçebilmesi için Yayınla düğmesini eklememiz gerekir. Cast SDK'sı, "castbutton" kimliğine sahip google-cast-launcher adında bir Yayın düğmesi bileşeni sağlar. media_control bölümüne bir button eklenerek uygulamanın video öğesine eklenebilir.

Düğme öğesi şöyle görünür:

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

media_control bölümündeki index.html için aşağıdaki kodu ekleyin:

<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>

Şimdi sayfayı Chrome tarayıcınızda yenileyin. Video öğesinde bir Yayın düğmesi görmeniz gerekir. Düğmeyi tıkladığınızda yerel ağınızdaki yayın cihazları listelenir. Cihaz bulma süreci, Chrome tarayıcı tarafından otomatik olarak yönetilir. Yayın cihazınızı seçin. Yayın cihazına örnek alıcı uygulaması yüklenir.

Medya oynatma desteği sağlamadığımızdan henüz yayın cihazında video oynatamıyorsunuz. Yayını durdurmak için Yayınla düğmesini tıklayın.

6. Video içeriği yayınlanıyor

Yayın cihazı seçim menüsüne sahip Cast uyumlu uygulamanın resmi

Örnek uygulamanın kapsamını, videoları bir Cast cihazında uzaktan oynatacak şekilde genişleteceğiz. Bunun için Cast çerçevesi tarafından oluşturulan çeşitli etkinlikleri dinlememiz gerekir.

Medya yayınlanıyor

Yüksek bir düzeyde, bir yayın cihazında medya oynatmak isterseniz aşağıdakilerin gerçekleşmesi gerekir:

  1. Cast SDK'sından bir medya öğesini modelleyen MediaInfo JSON nesnesi oluşturun.
  2. Kullanıcı, alıcı uygulamanızı başlatmak için yayın cihazına bağlanır.
  3. MediaInfo nesnesini alıcınıza yükleyin ve içeriği oynatın.
  4. Medya durumunu izleyin.
  5. Kullanıcı etkileşimlerine bağlı olarak alıcıya oynatma komutları gönderin.

1. adım bir nesneyi diğerine eşleme anlamına gelir. MediaInfo, Cast SDK'nın anladığı bir şeydir ve mediaJSON, uygulamamızın bir medya öğesine yönelik kapsülüdür. Bir mediaJSON öğesini kolayca bir MediaInfo ile eşleyebiliriz. Önceki bölümde yer alan 2. Adım'ı zaten yapmıştık. 3. adımı Cast SDK ile kolayca yapabilirsiniz.

Örnek uygulama CastPlayer, switchPlayer yönteminde yerel ve uzaktan oynatma arasında zaten ayrım yapmaktadır:

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

Bu codelab'de tüm örnek oynatıcı mantığının tam olarak nasıl çalıştığını anlamanız önemli değildir. Bununla birlikte, uygulamanızın medya oynatıcısının hem yerel hem de uzaktan oynatmayı algılayacak şekilde değiştirilmesi gerektiğini anlamak önemlidir.

Şu anda yerel oynatıcı, Yayınlama durumları hakkında henüz hiçbir şey bilmediğinden her zaman yerel oynatma durumundadır. Kullanıcı arayüzünü, Cast çerçevesinde gerçekleşen durum geçişlerine göre güncellememiz gerekir. Örneğin, yayınlamaya başlarsak yerel oynatmayı durdurmamız ve bazı kontrolleri devre dışı bırakmamız gerekir. Benzer şekilde, bu görünüm denetleyicisindeyken yayını durdurursak yerel oynatmaya geçiş yapmamız gerekir. Bunu halletmek için Cast çerçevesi tarafından oluşturulan çeşitli etkinlikleri dinlememiz gerekir.

Yayın oturumu yönetimi

Yayın çerçevesi için Cast oturumu; cihaza bağlanma, başlatma (veya mevcut bir oturuma katılma), alıcı uygulamaya bağlanma ve uygunsa bir medya kontrol kanalını başlatma adımlarını birleştirir. Medya kontrol kanalı, Yayın çerçevesinin alıcıya medya oynatma ile ilgili mesajları gönderip alma şeklidir.

Yayın oturumu, kullanıcı Yayınla düğmesinden bir cihaz seçtiğinde otomatik olarak başlatılır ve kullanıcının bağlantısı kesildiğinde otomatik olarak durdurulur. Ağ sorunları nedeniyle alıcı oturumuna yeniden bağlanma da Cast çerçevesi tarafından otomatik olarak gerçekleştirilir.

Yayınlama oturumları, cast.framework.CastContext.getInstance().getCurrentSession() üzerinden erişilebilen CastSession tarafından yönetilir. EventListener geri çağırma işlevleri; oluşturma, askıya alma, devam ettirme ve sonlandırma gibi oturum etkinliklerini izlemek için kullanılabilir.

Mevcut uygulamamızda tüm oturum ve durum yönetimi bizim için setupRemotePlayer yöntemiyle yürütülür. Aşağıdaki kodu CastVideos.js cihazınıza ekleyerek uygulamanızda bunu yapılandırmaya başlayalım:

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

Yine de geri çağırmalardan gelen tüm etkinlikleri bağlamamız ve gelen tüm etkinlikleri işlememiz gerekir. Bu oldukça basit bir işlemdir, bu yüzden şimdi bu konuyu ele alalım:

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

Medya yükleniyor

Cast SDK'sında RemotePlayer ve RemotePlayerController, alıcıdaki uzaktan medya oynatmayı yönetmek için bir dizi kullanışlı API sağlar. Medya oynatmayı destekleyen bir CastSession için RemotePlayer ve RemotePlayerController örnekleri SDK tarafından otomatik olarak oluşturulur. Bu kodlara, codelab'in başlarında gösterildiği gibi sırasıyla cast.framework.RemotePlayer ve cast.framework.RemotePlayerController örnekleri oluşturarak erişilebilir.

Daha sonra, SDK'nın işleyip isteği iletmesi için bir MediaInfo nesnesi oluşturarak hâlihazırda seçili olan videoyu alıcıya yüklememiz gerekir. Bunun için setupRemotePlayer hesabına aşağıdaki kodu ekleyin:

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

    //...
};

Şimdi de yerel ve uzaktan oynatma arasında geçiş yapmak için bir yöntem ekleyin:

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

Son olarak, Cast hata mesajlarını işlemek için bir yöntem ekleyin:

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

Şimdi uygulamayı çalıştırın. Yayın cihazınıza bağlanıp bir videoyu oynatmaya başlayın. Videonun alıcıda oynatıldığını görüyor olmanız gerekir.

7. Cast Connect Desteği ekleyin

Cast Connect kitaplığı, mevcut gönderen uygulamalarının Cast protokolü aracılığıyla Android TV uygulamalarıyla iletişim kurmasına olanak tanır. Cast Connect, Android TV uygulamanızın alıcı görevi gördüğü Cast altyapısını temel alır.

Bağımlılıklar

  • Chrome tarayıcı M87 veya sonraki sürümler

Android Alıcısı ile Uyumlu Olarak Ayarlayın

Android Alıcı olarak da bilinen Android TV uygulamasını başlatmak için CastOptions nesnesinde androidReceiverCompatible işaretini true olarak ayarlamamız gerekir.

initializeCastPlayer işlevinde CastVideos.js öğenize aşağıdaki kodu ekleyin:

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

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

Başlatma Kimlik Bilgilerini Ayarla

Gönderen tarafında, oturuma kimlerin katıldığını temsil etmesi için CredentialsData değerini belirtebilirsiniz. credentials, ATV uygulamanız tarafından anlaşılabildiği sürece kullanıcı tanımlı bir dizedir. CredentialsData, Android TV uygulamanıza yalnızca başlatma veya katılma sırasında aktarılır. Bağlıyken tekrar ayarlarsanız Android TV uygulamanıza aktarılmaz.

Başlatma Kimlik Bilgilerinin ayarlanması için, başlatma seçenekleri ayarlandıktan sonra CredentialsData herhangi bir zamanda tanımlanmalıdır.

initializeCastPlayer işlevinin altındaki CastVideos.js sınıfınıza şu kodu ekleyin:

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

Yükleme İsteğinde Kimlik Bilgilerini Belirle

Web Alıcısı ve Android TV uygulamanızın credentials ürününü farklı şekilde işlemesi durumunda, her biri için ayrı kimlik bilgileri tanımlamanız gerekebilir. Bu işlemi yapmak için setupRemotePlayer işlevindeki playerTarget.load altındaki CastVideos.js bölümüne aşağıdaki kodu ekleyin:

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

Göndereninizin yayın yaptığı alıcı uygulamaya bağlı olarak, SDK artık geçerli oturum için hangi kimlik bilgilerinin kullanılacağını otomatik olarak işliyor.

Cast Connect'i test etme

Android TV APK'sını Google TV Yüklü Chromecast'e yükleme adımları:

  1. Android TV cihazınızın IP adresini bulun. Bu özellik genellikle Ayarlar > Ağ ve İnternet > (Cihazınızın bağlı olduğu ağ adı) altından bulunur. Sağ tarafta, ayrıntıları ve cihazınızın ağdaki IP'sini gösterir.
  2. Cihazınıza terminali kullanarak ADB aracılığıyla bağlanmak için IP adresini kullanın:
$ adb connect <device_ip_address>:5555
  1. Terminal pencerenizden, bu codelab'in başında indirdiğiniz codelab örneklerinin üst düzey klasörüne gidin. Örneğin:
$ cd Desktop/chrome_codelab_src
  1. Aşağıdaki komutu çalıştırarak bu klasördeki .apk dosyasını Android TV'nize yükleyin:
$ adb -s <device_ip_address>:5555 install android-tv-app.apk
  1. Artık Android TV cihazınızdaki Uygulamalarınız menüsünde Video Yayınla adıyla bir uygulamayı görebilmeniz gerekir.
  2. Güncellenen web gönderen kodunu çalıştırın ve yayınlama simgesini kullanarak Android TV cihazınızla yayın oturumu oluşturun veya Chrome tarayıcınızın açılır menüsünden Cast.. öğesini seçin. Bunu yaptığınızda, Android TV uygulaması Android alıcınızda başlatılır ve Android TV uzaktan kumandanızı kullanarak oynatmayı kontrol edebilirsiniz.

8. Tebrikler

Artık Chrome web uygulamasındaki Cast SDK widget'larını kullanarak bir video uygulamasını Cast için nasıl etkinleştireceğinizi biliyorsunuz.

Daha ayrıntılı bilgi için Web Göndereni geliştirici kılavuzuna bakın.