Bir web uygulamasını Cast uyumlu hale getirme

1. Genel Bakış

Google Cast logosu

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

Google Cast nedir?

Google Cast, kullanıcıların mobil cihazdan TV'ye içerik yayınlamasına olanak tanır. Kullanıcılar, 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 Listesi, Cast kullanıcı deneyimini desteklenen tüm platformlarda basit ve tahmin edilebilir hale getirmek için sağlanmıştır.

Ne oluşturacağız?

Bu kod laboratuvarını tamamladığınızda, videoları Google Cast cihazına yayınlayabilecek bir Chrome web video uygulamasına sahip olacaksınız.

Neler öğreneceksiniz?

  • Google Cast SDK'sını örnek bir video uygulamasına ekleme.
  • Google Cast cihazı seçmek için Cast düğmesini ekleme.
  • Bir Cast cihazına bağlanma ve medya alıcısını başlatma.
  • Video yayınlama
  • Cast Connect'i entegre etme

İhtiyacınız olanlar

  • En son Google Chrome tarayıcısı.
  • Firebase Hosting veya ngrok gibi bir HTTPS barındırma hizmeti.
  • Chromecast veya Android TV gibi internet erişimi olan 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 gerekir ancak Codelab'in geri kalanı için isteğe bağlıdır. AdSense hesabınız yoksa bu eğiticinin sonuna doğru, Cast Connect Desteği Ekle adımını atlayabilirsiniz.

Deneyim

  • Web geliştirme konusunda bilgi sahibi olmanız gerekir.
  • TV izleme konusunda önceden bilgiye de sahip olmanız gerekir :)

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

Yalnızca okuyun Okuyup alıştırmaları tamamlayın

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

Acemi Orta Uzman

TV izleme deneyiminizi nasıl değerlendirirsiniz?

Acemi Orta Uzman

2. Örnek kodu alın

Tüm örnek kodları bilgisayarınıza indirebilirsiniz...

ve indirilen ZIP dosyasını açın.

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

Google Chrome logosu

Öncelikle, 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çip videoyu yerel olarak cihazda oynatabilir veya bir Google Cast cihazına yayınlayabilir.

Tamamlanan raporu kullanabilmek için barındırılması gerekir.

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

Sunucuyu çalıştırma

Tercih ettiğiniz hizmeti ayarladıktan sonra app-done bölümüne gidin ve sunucunuzu başlatın.

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

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

Cast cihazda oynatılan videonun resmi

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

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

Devam etmeden önce sunucuyu durdurun.

4. Başlangıç projesini hazırlama

Cast cihazda oynatılan videonun resmi

İndirdiğiniz başlangıç uygulamasına Google Cast desteği eklememiz gerekiyor. Bu codelab'de kullanacağımız Google Cast terminolojilerinden bazıları şunlardır:

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

Favori metin düzenleyicinizi kullanarak başlangıç projesinin temelini oluşturmaya artık hazırsınız:

  1. İndirilen örnek koddan klasör simgesiapp-start dizinini seçin.
  2. Sunucunuzu kullanarak uygulamayı çalıştırın ve kullanıcı arayüzünü keşfedin.

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

Uygulama tasarımı

Uygulama, uzak bir web sunucusundan videoların listesini alır ve kullanıcının göz atabileceği bir liste sağlar. Kullanıcılar, ayrıntıları görmek için bir video seçebilir veya videoyu mobil cihazda yerel olarak oynatabilir.

Uygulama, index.html içinde tanımlanan bir ana görünümden ve CastVideos.js. ana denetleyicisinden 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ü vardır. Video öğesini içeren div#main_video öğemiz vardır. Video div'imizle ilgili olarak, video öğesinin tüm kontrollerini tanımlayan div#media_control öğesine sahibiz. Bunun altında, görüntülemekte olduğunuz videonun ayrıntılarını gösteren media_info yer alır. Son olarak carousel div'inde videoların listesi gösterilir.

index.html dosyası ayrıca Cast SDK'sını önyükler ve CastVideos işlevine yüklemeyi söyler.

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

CastVideos.js

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

Videoyu hem yerel hem de uzaktan yönetmekten ve oynatmaktan sorumlu birkaç önemli bölüm vardır. Genel olarak bu oldukça basit bir web uygulamasıdır.

CastPlayer, uygulamanın tamamını yöneten, oynatıcıyı ayarlayan, medyayı seçen ve medyayı oynatmak için etkinlikleri PlayerHandler ile bağlayan ana sınıftır. CastPlayer.prototype.initializeCastPlayer, tüm Cast işlevini ayarlayan yöntemdir. CastPlayer.prototype.switchPlayer, durumu yerel ve uzak oyuncular arasında değiştirir. CastPlayer.prototype.setupLocalPlayer ve CastPlayer.prototype.setupRemotePlayer, yerel ve uzak oyuncuları başlatır.

PlayerHandler, medya oynatmanın yönetiminden sorumlu olan sınıftır. Medya ve oynatma yönetiminin ayrıntılarından 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 uygulamada, video öğesinde Cast düğmesi gösterilir. Yayınla düğmesini tıkladığınızda kullanıcının seçebileceği Cast cihazlarının listesi gösterilir. Kullanıcı, gönderen cihazda yerel olarak içerik oynatıyorsa bir Cast cihazı seçtiğinizde oynatma işlemi o Cast cihazda başlatılır veya devam ettirilir. Kullanıcı, Cast oturumu sırasında dilediğinde Cast düğmesini tıklayarak uygulamanızı Cast cihazına yayınlamayı 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 cihazla bağlantısını kesebilmelidir.

Yapılandırma

Başlangıç projesi, tamamlanmış örnek uygulama için kullandığınız bağımlılıkları ve kurulumu gerektirir ancak bu sefer app-start'nin içeriklerini barındırır.

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 gerektiğini unutmayın.

Başlatma

Cast çerçevesi, çerçevenin tüm etkinliklerini koordine eden CastContext adlı global bir tekil nesne içerir. Bu nesne, uygulamanın yaşam döngüsünün başlarında ilk kullanıma hazırlanmalıdır. Genellikle window['__onGCastApiAvailable'] işlevine atanmış bir geri çağırma ile çağrılır. Cast SDK'sı yüklendikten sonra çağrılan bu geri çağırma, kullanılabilir durumda olur. Bu durumda, CastContext, daha önce bahsedilen geri çağırma işlevinden çağrılan CastPlayer.prototype.initializeCastPlayer içinde çağrılır.

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

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

body bölümünün en sonuna aşağıdaki kodu index.html 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'yi başlatmak için aşağıdaki kodu index.html dosyasına 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 içinde index.html'te çağırdığımız yönteme karşılık gelen yeni bir yöntem eklememiz gerekiyor. CastContext'ta seçenekleri ayarlayan ve yeni RemotePlayer ile RemotePlayerControllers öğelerini 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şkenleri 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 bir Cast cihazı seçmesine izin vermek için Cast düğmesini eklememiz gerekir. Cast SDK'sı, "castbutton"" kimlikli google-cast-launcher adlı bir Cast düğmesi bileşeni sağlar. Bu bileşen, media_control bölümüne bir button ekleyerek 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 alanına 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>

Ardından Chrome tarayıcınızda sayfayı yenileyin. Video öğesinde bir Yayınla düğmesi görürsünüz. Bu düğmeyi tıkladığınızda yerel ağınızdaki Yayın cihazları listelenir. Cihaz bulma özelliği, Chrome Tarayıcı tarafından otomatik olarak yönetilir. Cast cihazınızı seçtiğinizde örnek alıcı uygulaması Cast cihazına yüklenir.

Medya oynatma için henüz destek sağlamadığımızdan Cast cihazda video oynatamazsınız. Yayınlamayı durdurmak için Yayınla düğmesini tıklayın.

6. Video içeriğini yayınlama

Cast cihaz seçim menüsünü içeren Cast uyumlu uygulama resmi

Örnek uygulamayı, Cast cihazlarda da videoları uzaktan oynatacak şekilde genişleteceğiz. Bunun için Cast çerçevesi tarafından oluşturulan çeşitli etkinlikleri dinlememiz gerekir.

Medya yayınlama

Bir Cast cihazda medya oynatmak için genel olarak aşağıdakilerin gerçekleşmesi gerekir:

  1. Cast SDK'sından bir medya öğesini modelleyen bir 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 göre alıcıya oynatma komutları gönderme.

1. adım, bir nesnenin diğeriyle eşlenmesini ifade eder; MediaInfo, Cast SDK'sının anladığı bir şeydir ve mediaJSON, uygulamamızın bir medya öğesi için sarmalayıcısıdır; mediaJSON'yi MediaInfo ile kolayca eşleyebiliriz. 2. adımı önceki bölümde tamamlamıştık. 3. adımı Cast SDK'sı ile kolayca tamamlayabilirsiniz.

CastPlayer örnek uygulaması, switchPlayer yönteminde yerel ve uzaktan oynatma arasında zaten ayrım yapıyor:

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

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

Yerel oynatıcı, henüz Yayınlama durumları hakkında hiçbir şey bilmediği için şu anda 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 gerekiyor. Örneğin, yayınlamaya başlarsak yerel oynatmayı durdurmamız ve bazı kontrolleri devre dışı bırakmamız gerekir. Benzer şekilde, bu görüntüleme denetleyicisindeyken yayını durdurursak yerel oynatmaya geçmemiz gerekir. Bunu yapabilmek için Cast çerçevesi tarafından oluşturulan çeşitli etkinlikleri dinlememiz gerekir.

Yayın oturumu yönetimi

Cast çerçevesi için bir Cast oturumu; cihaza bağlanma, cihazı başlatma (veya mevcut bir oturuma katılma), alıcı uygulamaya bağlanma ve uygun durumlarda medya kontrol kanalı başlatma adımlarını birleştirir. Medya kontrol kanalı, Cast çerçevesinin alıcıdan medya oynatmayla ilgili mesajları gönderme ve alma şeklidir.

Kullanıcı, Yayınla düğmesinden cihaz seçtiğinde Yayın oturumu 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 işlemi de Cast çerçevesi tarafından otomatik olarak gerçekleştirilir.

Yayın 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önteminde işlenmektedir. CastVideos.js dosyanıza aşağıdaki kodu ekleyerek uygulamanızda bu özelliği 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 işlemi yapmak oldukça basittir. Şimdi bunu yapalı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ükleme

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

Ardından, SDK'nın isteği işleyip iletmesi için bir MediaInfo nesnesi oluşturarak şu anda seçili olan videoyu alıcıya yüklememiz gerekir. Bunu yapmak için setupRemotePlayer dosyası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);

    //...
};

Ardından yerel ve uzak oynatma arasında geçiş yapma yöntemi 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ın işlenmesi 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 : '');
  }
};

Ardından uygulamayı çalıştırın. Cast cihazınıza bağlanın ve bir videoyu oynatmaya başlayın. Videoyu alıcıda oynattığınızdan emin olun.

7. Cast Connect Desteği ekleyin

Cast Connect kitaplığı, mevcut gönderen uygulamalarının Cast protokolü üzerinden 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ıyı uyumlu olarak ayarlama

Android TV uygulaması (Android alıcı olarak da bilinir) başlatmak için CastOptions nesnesinde androidReceiverCompatible işaretini doğru olarak ayarlamamız gerekir.

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

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

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

Başlatma Kimlik Bilgilerini Ayarlama

Gönderen tarafında, oturuma kimin katıldığını belirtmek için CredentialsData değerini kullanabilirsiniz. credentials, ATV uygulamanız tarafından anlaşıldığı sürece kullanıcı tarafından tanımlanabilen bir dizedir. CredentialsData yalnızca Android TV uygulamanıza başlatma veya katılma sırasında iletilir. Bağlantınız açıkken tekrar ayarlarsanız bu ayar Android TV uygulamanıza aktarılmaz.

Lansman kimlik bilgilerini ayarlamak için CredentialsData, lansman seçenekleri ayarlandıktan sonra herhangi bir zamanda tanımlanmalıdır.

initializeCastPlayer işlevi altında CastVideos.js sınıfınıza aşağıdaki 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ği'nde Kimlik Bilgilerini Ayarlama

Web alıcı uygulamanız ve Android TV uygulamanız credentials'yi farklı şekilde ele alıyorsa her biri için ayrı kimlik bilgileri tanımlamanız gerekebilir. Bu işlemi gerçekleştirmek için CastVideos.js içinde, setupRemotePlayer işlevindeki playerTarget.load öğesinin altına 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 kullanılacak kimlik bilgilerinin otomatik olarak işlenmesini sağlar.

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. Genellikle Ayarlar > Ağ ve İnternet > (Cihazınızın bağlı olduğu ağ adı) bölümünde bulunur. Sağ tarafta, ayrıntılar ve cihazınızın ağdaki IP adresi gösterilir.
  2. Terminali kullanarak cihazınıza ADB üzerinden bağlanmak için cihazınızın IP adresini kullanın:
$ adb connect <device_ip_address>:5555
  1. Terminal pencerenizde, 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ğıdakileri uygulayarak 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 adlı uygulamayı görebilirsiniz.
  2. Güncellenmiş web gönderen kodunu çalıştırın ve yayınlama simgesini kullanarak veya Chrome tarayıcınızdaki açılır menüden Cast.. öğesini seçerek Android TV cihazınızla bir yayın oturumu oluşturun. Bu işlem, Android alıcınızda Android TV uygulamasını başlatır ve oynatmayı Android TV uzaktan kumandanızı kullanarak kontrol etmenize olanak tanır.

8. Tebrikler

Artık bir Chrome web uygulamasındaki Cast SDK widget'larını kullanarak bir video uygulamasını nasıl yayınlayabileceğinizi biliyorsunuz.

Daha fazla bilgi için Web Gönderen geliştirici kılavuzunu inceleyin.