Bir Chrome web uygulamasını yayınla etkinleştirin

googlecastnew500.png

Bu kod laboratuvarı, bir Google Cast cihazında içerik oynatmak için mevcut bir web video uygulamasını nasıl değiştireceğinizi öğretecektir.

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

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

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

Ne inşa edeceğiz?

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

Ne öğreneceksin

  • Google Cast SDK'sı örnek bir video uygulamasına nasıl eklenir?
  • Google Cast cihazı seçmek için Yayın düğmesi nasıl eklenir?
  • Bir Cast cihazına bağlanma ve bir medya alıcısı başlatma.
  • Bir video nasıl yayınlanır.
  • Cast Connect nasıl entegre edilir

Neye ihtiyacın olacak

  • En son Google Chrome tarayıcısı.
  • npm.
  • İnternet erişimi ile yapılandırılmış bir Chromecast veya Android TV gibi bir Google Cast cihazı.
  • HDMI girişli bir TV veya monitör.
  • Cast Connect entegrasyonunu test etmek için Google TV'li bir Chromecast gerekir, ancak Codelab'in geri kalanı için isteğe bağlıdır. Bir hesabınız yoksa, bu eğiticinin sonuna doğru Cast Connect Desteği Ekle adımını atlamaktan çekinmeyin.

Deneyim

  • Önceden web geliştirme bilgisine sahip olmanız gerekecektir.
  • Ayrıca önceden TV izleme bilgisine de ihtiyacınız olacak :)

Bu öğreticiyi nasıl kullanacaksınız?

Sadece baştan sona okuyun Okuyun ve alıştırmaları tamamlayın

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

Acemi Orta düzey Yetkin

TV izleme deneyiminizi nasıl değerlendirirsiniz?

Acemi Orta düzey Yetkin

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

Kaynak Kodunu İndir

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

Google_Chrome_logo_icon.png

İlk olarak, tamamlanmış örnek uygulamanın neye benzediğini görelim. Uygulama temel bir video oynatıcıdır. Kullanıcı, listeden bir video seçebilir ve ardından videoyu cihazda yerel olarak oynatabilir veya bir Google Cast cihazında yayınlayabilir.

Uygulamayı çalıştırın

Kullanabileceğiniz herhangi bir sunucunuz yoksa endişelenmeyin. Node.js, http-server ve ngrok node modülünü kurabilirsiniz.

npm install -g http-server
npm install -g ngrok

http-server kullanıyorsanız, konsolunuza gidin ve aşağıdakileri yapın:

cd app-done
http-server

Daha sonra aşağıdaki gibi bir şey görmelisiniz:

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://172.19.17.192:8080
Hit CTRL-C to stop the server

Yerel göndericinizi ngrok kullanarak HTTPS üzerinden ifşa etmek için yeni bir terminalde kullanılan yerel bağlantı noktasına dikkat edin ve aşağıdakileri ngrok : (8080, http sunucusundan bağlantı noktası olmalıdır)

ngrok http 8080

Bu, yerel HTTP sunucunuza bir ngrok tüneli ngrok size bir sonraki adımda kullanabileceğiniz küresel olarak mevcut HTTPS güvenli bir uç nokta ngrok (https://116ec943.eu.ngrok.io):

ngrok by @inconshreveable                                                                                                                                                                                                                                     (Ctrl+C to quit)

Session Status         online
Version                2.2.4
Web Interface          http://127.0.0.1:8080
Forwarding             http://116ec943.eu.ngrok.io -> localhost:8080
Forwarding             https://116ec943.eu.ngrok.io -> localhost:8080

ngrok hem ngrok hem de http-server çalışır durumda tutmalısınız. Yerel olarak yaptığınız tüm değişiklikler anında kullanılabilir olacaktır.

Tarayıcınızda, ngrok döndürülen https URL'sini ziyaret edin.

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

app-done.png

Alıcıdaki videoyu duraklatmak için video öğesindeki duraklat düğmesine tıklayın. Videoyu tekrar oynatmaya devam etmek için video öğesindeki oynat düğmesine tıklayın.

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

Devam etmeden önce sunucuyu durdurmalıyız. http-server çalışırken terminale gidin ve işlemi şu şekilde sonlandırın:

CTRL-C

ngrok çalışırken terminale gidin ve işlemi şu şekilde ngrok :

CTRL-C

Ekran Görüntüsü 2016-11-08, 4.09.45 PM.png

İndirdiğiniz başlangıç ​​uygulamasına Google Cast desteği eklememiz gerekiyor. Bu kod laboratuvarında kullanacağımız bazı Google Cast terminolojileri şunlardır:

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

Artık favori metin düzenleyicinizi kullanarak başlangıç ​​projesinin üzerine inşa etmeye hazırsınız:

  1. Seçin android_studio_folder.png örnek kod indirmenizden app-start dizini.
  2. http-server ve ngrok kullanarak uygulamayı çalıştırın ve kullanıcı arayüzünü keşfedin.

Bu kod laboratuarında çalışırken, http-server yaptığınız değişiklikleri alması gerektiğini unutmayın. Eğer olmadığını fark ederseniz, http-server öldürmeyi ve yeniden başlatmayı deneyin.

Uygulama tasarımı

Uygulama, uzak bir web sunucusundan bir video listesi getirir ve kullanıcının göz atması için 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 tanımlanan bir ana görünümden ve ana denetleyici olan CastVideos.js.

index.html

Bu html dosyası, web uygulaması için neredeyse tüm kullanıcı arayüzünü bildirir.

Birkaç görünüm bölümü var, video öğesini içeren div#main_video var. Video div#media_control ilgili olarak, video öğesi için tüm kontrolleri tanımlayan div#media_control . Bunun altında, görünümdeki videonun ayrıntılarını gösteren media_info . Son olarak, carousel div, bir div içindeki videoların bir listesini görüntüler.

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

Bu öğeleri dolduracak içeriğin çoğu, CastVideos.js tanımlanır, enjekte edilir ve kontrol edilir. Öyleyse, şuna bir bakalım.

CastVideos.js

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

Videonun hem yerel hem de uzaktan yönetilmesinden ve oynatılmasından birlikte sorumlu olan birkaç ana bölüm vardır. Genel olarak, bu oldukça basit bir web uygulamasıdır.

CastPlayer , tüm uygulamayı yöneten, oynatıcıyı kuran, medyayı seçen ve olayları medya oynatmak için PlayerHandler ana PlayerHandler . CastPlayer.prototype.initializeCastPlayer , tüm Cast işlevselliğini 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 oynatıcıları başlatır.

PlayerHandler , medya oynatımını yönetmekten sorumlu sınıftır. Medya yönetimi ve oynatma ayrıntılarından sorumlu olan bir dizi başka yöntem vardır.

Sıkça Sorulan Sorular

app-done.png

Cast özellikli bir uygulama, video öğesinde Yayın düğmesini görüntüler. Yayın düğmesine tıklamak, bir kullanıcının seçebileceği Yayın cihazlarının bir listesini görüntüler. Kullanıcı, gönderen cihazda yerel olarak içerik oynatıyorsa, bir Cast cihazının seçilmesi o Cast cihazında oynatmayı başlatır veya devam ettirir. Bir Cast oturumu sırasında herhangi bir zamanda, kullanıcı Yayınla düğmesini tıklayabilir ve uygulamanızı Yayın 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 bağlantısını kesebilmelidir .

Konfigürasyon

Başlangıç ​​projesi, tamamlanan örnek uygulama için yaptığınız gibi aynı bağımlılıkları ve kurulumu gerektirir.

http-server kullanıyorsanız, konsolunuza gidin ve aşağıdakileri yapın:

cd app-start
http-server

Daha sonra aşağıdaki gibi bir şey görmelisiniz:

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://172.19.17.192:8080
Hit CTRL-C to stop the server

Yerel göndericinizi ngrok kullanarak HTTPS üzerinden ifşa etmek için yeni bir terminalde kullanılan yerel bağlantı noktasına dikkat edin ve aşağıdakileri ngrok : (8080, http sunucusundan bağlantı noktası olmalıdır)

ngrok http 8080

Bu, yerel HTTP sunucunuza bir ngrok tüneli ngrok size bir sonraki adımda kullanabileceğiniz küresel olarak mevcut HTTPS güvenli bir uç nokta ngrok (https://116ec943.eu.ngrok.io):

ngrok by @inconshreveable                                                                                                                                                                                                                                     (Ctrl+C to quit)

Session Status         online
Version                2.2.4
Web Interface          http://127.0.0.1:8080
Forwarding             http://116ec943.eu.ngrok.io -> localhost:8080
Forwarding             https://116ec943.eu.ngrok.io -> localhost:8080

ngrok hem ngrok hem de http-server çalışır durumda tutmalısınız. Yerel olarak yaptığınız tüm değişiklikler anında kullanılabilir olacaktır.

Tarayıcınızda, ngrok döndürülen https URL'sini ziyaret edin.

Başlatma

Cast çerçevesi, çerçevenin tüm etkinliklerini koordine eden genel bir tekil nesne olan CastContext sahiptir. Bu nesne, uygulamanın yaşam döngüsünün başlarında başlatılmalıdır, genellikle window['__onGCastApiAvailable'] atanan, Cast SDK yüklendikten sonra çağrılan ve kullanıma hazır olan bir geri window['__onGCastApiAvailable'] çağrılır. Bu durumda, CastContext denir CastPlayer.prototype.initializeCastPlayer yukarıda sözü edilen geri arama denir.

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

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

Aşağıdaki kodu body bölümünün en sonuna 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ı başlatmak ve CastContext başlatmak için aşağıdaki kodu index.html CastContext :

<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 index.html az önce çağırdığımız yönteme karşılık gelen yeni bir yöntem eklememiz gerekiyor. En adlandırılan yeni bir yöntem, ekleyelim initializeCastPlayer CastContext seçenekleri ayarlar ve yeni başlatır, RemotePlayer ve 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)
    );
};

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

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

Yayın düğmesi

Artık CastContext başlatıldığına göre, kullanıcının bir Yayın cihazı seçmesine izin vermek için Yayınla düğmesini eklememiz gerekiyor. Cast SDK, google-cast-launcher adlı bir " castbutton" kimliğine sahip bir Cast düğmesi bileşeni sağlar. media_control bölümüne bir button ekleyerek uygulamanın video öğesine eklenebilir.

Düğme öğesi şu şekilde görünecektir:

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

media_control bölümünde index.html 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 Chrome tarayıcınızda sayfayı yenileyin. Video öğesinde bir Yayın düğmesi görmelisiniz ve üzerine tıkladığınızda, yerel ağınızdaki Yayın cihazlarını listeleyecektir. Cihaz keşfi, Chrome tarayıcısı tarafından otomatik olarak yönetilir. Yayın cihazınızı seçin, örnek alıcı uygulaması Yayın cihazına yüklenecektir.

Medya oynatma için herhangi bir destek sağlamadık, bu nedenle henüz Cast cihazında video oynatamazsınız. Yayını durdurmak için Yayınla düğmesini tıklayın.

Örnek uygulamayı bir Cast cihazında uzaktan video oynatmak için genişleteceğiz. Bunu yapmak için Cast çerçevesi tarafından oluşturulan çeşitli olayları dinlememiz gerekir.

Medya döküm

Yüksek düzeyde, bir medyayı bir Cast cihazında oynatmak istiyorsanız, aşağıdakilerin gerçekleşmesi gerekir:

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

Adım 1, bir nesneyi diğerine eşlemek anlamına gelir; MediaInfo , Cast SDK'nın anladığı bir şeydir ve mediaJSON , uygulamamızın bir medya öğesi için kapsüllemesidir; bir mediaJSON bir MediaInfo kolayca eşleştirebiliriz. Önceki bölümde 2. Adımı zaten yaptık. 3. Adımın, Cast SDK ile yapılması kolaydır.

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

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

Bu kod laboratuarında, tüm örnek oynatıcı mantığının tam olarak nasıl çalıştığını anlamanız sizin için önemli değildir. Bununla birlikte, uygulamanızın medya oynatıcısının hem yerel hem de uzaktan oynatmanın farkında olması için değiştirilmesi gerekeceğini anlamak önemlidir.

Şu anda yerel oynatıcı her zaman yerel oynatma durumundadır çünkü henüz Casting durumları hakkında hiçbir şey bilmiyor. Kullanıcı arayüzünü, Cast çerçevesinde gerçekleşen durum geçişlerine göre güncellememiz gerekiyor. Örneğin, yayına başlarsak, yerel oynatmayı durdurmalı ve bazı kontrolleri devre dışı bırakmalıyız. Benzer şekilde, bu görünüm denetleyicisindeyken yayını durdurursak, yerel oynatmaya geçmemiz gerekir. Bunu halletmek için Cast çerçevesi tarafından oluşturulan çeşitli olayları dinlememiz gerekir.

Yayın oturumu yönetimi

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

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

Yayın oturumları, cast.framework.CastContext.getInstance().getCurrentSession() aracılığıyla erişilebilen CastSession tarafından yönetilir. EventListener geri aramaları, oluşturma, askıya alma, devam EventListener ve sonlandırma gibi oturum olaylarını izlemek için kullanılabilir.

Mevcut uygulamamızda, tüm oturum ve durum yönetimi bizim için setupRemotePlayer yönteminde ele alınmaktadır. Aşağıdaki kodu CastVideos.js kodunuza ekleyerek uygulamanızda 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 tüm olayları geri aramalardan bağlamamız ve gelen tüm olayları ele almamız gerekiyor. Bu oldukça basit bir şey, o yüzden şimdi bununla ilgilenelim:

/**
 * 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'da, RemotePlayer ve RemotePlayerController , alıcıda uzaktan medya oynatmayı yönetmek için bir dizi uygun API sağlar. Medya oynatmayı destekleyen bir CastSession için, RemotePlayer ve RemotePlayerController örnekleri SDK tarafından otomatik olarak oluşturulacaktır. cast.framework.RemotePlayerController daha önce gösterildiği gibi sırasıyla cast.framework.RemotePlayer ve cast.framework.RemotePlayerController örnekleri oluşturularak cast.framework.RemotePlayer erişilebilir.

Ardından, SDK'nın isteği işleyip iletmesi için bir MediaInfo nesnesi oluşturarak o anda seçili videoyu alıcıya yüklememiz gerekir. Bunu yapmak için setupRemotePlayer 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 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, tüm 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. Cast cihazınıza bağlanın ve bir video oynatmaya başlayın. Alıcıda oynatılan videoyu görmelisiniz.

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

Bağımlılıklar

  • Chrome tarayıcı sürümü M87 veya üstü

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

Android Alıcısı olarak da adlandırılan Android TV uygulamasını başlatmak için, CastOptions nesnesinde androidReceiverCompatible bayrağını true olarak ayarlamamız gerekir.

Sizin için aşağıdaki kodu ekleyin CastVideos.js içinde initializeCastPlayer fonksiyonu:

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ı göstermek için CredentialsData belirtebilirsiniz. credentials , ATV uygulamanız anlayabildiği sürece kullanıcı tarafından tanımlanabilen bir dizedir. CredentialsData yalnızca başlatma veya katılma sırasında Android TV uygulamanıza aktarılır. Bağlıyken yeniden ayarlarsanız, Android TV uygulamanıza aktarılmaz.

Başlatma Kimlik CredentialsData ayarlamak için Verilerin, başlatma seçenekleri ayarlandıktan sonra herhangi bir zamanda tanımlanması gerekir.

Sizin için aşağıdaki kodu ekleyin CastVideos.js altında sınıfına initializeCastPlayer fonksiyonu:

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 Ayarlayın

Web Alıcısı uygulamanızın ve Android TV uygulamanızın credentials farklı şekilde ele alması durumunda, her biri için ayrı kimlik bilgileri tanımlamanız gerekebilir. Bunu halletmek için, aşağıdaki kodu CastVideos.js playerTarget.load setupRemotePlayer işlevinde setupRemotePlayer altına playerTarget.load :

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

Göndericinizin yayın yaptığı alıcı uygulamasına bağlı olarak, SDK artık geçerli oturum için hangi kimlik bilgilerini kullanacağını otomatik olarak işleyecektir.

Cast Connect'i Test Etme

Android TV APK'sını Google TV ile 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ı) altında bulunur . Sağ tarafta, ayrıntıları ve cihazınızın ağdaki IP'sini gösterecektir.
  2. Terminali kullanarak ADB aracılığıyla cihazınıza bağlanmak için cihazınızın IP adresini kullanın:
$ adb connect <device_ip_address>:5555
  1. Terminal pencerenizden, bu kod laboratuarının başlangıcında indirdiğiniz kod laboratuvarı örnekleri için en üst düzey klasöre gidin. Örneğin:
$ cd Desktop/chrome_codelab_src
  1. Bu klasördeki .apk dosyasını aşağıdakileri çalıştırarak Android TV'nize yükleyin:
$ adb -s <device_ip_address>:5555 install android-tv-app.apk
  1. Artık Android TV cihazınızda Uygulamalarınız menüsünde Video Yayınlama adına göre bir uygulamayı görebiliyor olmanız gerekir.
  2. Güncellenen web gönderen kodunu çalıştırın ve Android TV cihazınızda yayınla simgesini kullanarak veya Chrome tarayıcınızdaki açılır menüden Cast.. kullanarak bir yayın oturumu oluşturun. Bu, şimdi Android Alıcınızda Android TV uygulamasını başlatmalı ve Android TV uzaktan kumandanızı kullanarak oynatmayı kontrol etmenize izin vermelidir.

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

GitHub'daki örnek uygulamalarımıza bir göz atın: github.com/googlecast .