1. Genel Bakış
Bu codelab'de, Google Cast uyumlu bir cihazda içerik yayınlamak için mevcut bir web videosu uygulamasını nasıl değiştireceğiniz açıklanmaktadır.
Google Cast nedir?
Google Cast, kullanıcıların mobil cihazdan TV'ye içerik yayınlamasına olanak tanır. Böylece kullanıcılar, TV'de medya oynatmak için mobil cihazlarını uzaktan kumanda olarak kullanabilir.
Google Cast SDK'sı, uygulamanızın kapsamını genişleterek bir TV'yi veya ses sistemini kontrol etmenizi sağlar. 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.
Ne oluşturacağız?
Bu codelab'i tamamladığınızda, Google Cast cihazlarına video yayınlayabilecek bir Chrome web video uygulamanız olacak.
Neler öğreneceksiniz?
- 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?
- 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?
İhtiyacınız olanlar
- En son Google Chrome tarayıcı.
- Firebase Hosting veya ngrok gibi HTTPS barındırma hizmeti.
- Chromecast veya Android TV gibi internet erişimi olan bir Google Cast cihazı.
- HDMI girişli bir TV veya monitör.
- Cast Connect entegrasyonunu test etmek için Google TV'li Chromecast gereklidir, 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
- Daha önce web geliştirme konusunda bilgi sahibi olmanız gerekir.
- TV izleme konusunda önceden bilgiye de sahip olmanız gerekir :)
Bu eğiticiden nasıl yararlanacaksınız?
Web uygulamaları geliştirme deneyiminizi nasıl değerlendirirsiniz?
TV izleme deneyiminizi nasıl değerlendirirsiniz?
2. Örnek kodu alın
Tüm örnek kodları bilgisayarınıza indirebilirsiniz...
ve indirilen zip dosyasının paketini açın.
3. Örnek uygulamayı çalıştırma
Öncelikle tamamlanan ö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 daha sonra videoyu cihazda yerel olarak oynatabilir veya bir Google Cast cihazında yayınlayabilir.
Tamamlanan öğenin 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 bölümüne gidip sunucunuzu başlatın.
Tarayıcınızda, barındırdığınız örneğin https URL'sini ziyaret edin.
- Video uygulaması ekranda gösterilir.
- Yayınla düğmesini tıklayın ve Google Cast cihazınızı seçin.
- Bir video seçip oynat düğmesini tıklayın.
- Video, Google Cast cihazınızda oynatılmaya başlar.
Alıcıdaki videoyu 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
İ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 çalışan gönderen uygulaması,
- Google Cast cihazında çalışan bir alıcı uygulaması.
Favori metin düzenleyicinizi kullanarak başlangıç projesinin temelini oluşturmaya artık hazırsınız:
- İndirilen örnek koddan
app-startdizinini seçin. - Sunucunuzu kullanarak uygulamayı çalıştırın ve kullanıcı arayüzünü keşfedin.
Bu codelab üzerinde ç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, ayrıntılarını görmek için bir video seçebilir veya videoyu mobil cihazda yerel olarak oynatabilir.
Uygulama, index.html içinde tanımlanmış bir ana görünüm ve CastVideos.js. ana denetleyiciden 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 bölümümüz vardır. Video div öğesimizle ilgili olarak, video öğesine ilişkin tüm denetimleri tanımlayan div#media_control öğesimiz var. Onun altında ise media_info, görüntülenen videonun ayrıntılarını gösterir. Son olarak, carousel div öğesi, div içindeki videoların listesini gösterir.
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 içinde tanımlanır, yerleştirilir ve kontrol edilir. Şimdi buna bir göz atalım.
CastVideos.js
Bu komut dosyası, Videoları Yayınlama web uygulamasının tüm mantığını yönetir. CastVideos.js politikasında tanımlanan videoların listesi ve bunlarla ilişkili meta veriler, mediaJSON adlı bir nesnede yer alır.
Videonun hem yerel olarak hem de uzaktan yönetilmesinden ve oynatılmasından birlikte sorumlu 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ı ayarlayan, medyayı seçen ve etkinlikleri medya oynatmak için PlayerHandler ürününe bağlamayı sağlayan ana sınıftır. CastPlayer.prototype.initializeCastPlayer, tüm Cast işlevlerini 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 oynatmanın yönetiminden sorumlu olan sınıftır. Medya ve oynatma yönetiminin ayrıntılarından sorumlu olan başka yöntemler de vardır.
Sık sorulan sorular
5. Yayınla düğmesi ekleniyor
Cast uyumlu bir uygulama, video öğesinde Yayınla düğmesini gösteriyor. Yayın 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çtiğinde oynatma işlemi o yayın cihazında başlar veya devam ettirilir. Yayın oturumu sırasında herhangi bir zamanda, kullanıcı Yayın 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ında yayın cihazına bağlanabilmeli veya cihazın bağlantısını kesebilmelidir.
Yapılandırma
Başlangıç projesi, tamamlanan örnek uygulama için yaptığınızla aynı bağımlılıkları ve kurulumu gerektirir ancak bu kez app-start içeriğini 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 gerekeceğini unutmayın.
Başlatma
Cast çerçevesi, çerçevenin tüm etkinliklerini koordine eden CastContext adlı küresel bir tekil nesneye sahiptir. 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, yukarıda bahsedilen geri çağırmadan ç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, yalnızca belirtilen uygulamayı çalıştırabilen cihazları göstermek ve bir Cast oturumu başlatıldığında alıcı uygulamayı başlatmak için kullanılabilir yayın cihazlarının listesini filtrelemek 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 sonundaki index.html alanına 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ı ilk kullanıma hazırlamak için index.html uygulamasına şu 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 uygulamasına az önce index.html içinde çağırdığımız yönteme karşılık gelen yeni bir yöntem eklememiz gerekiyor. CastContext'te seçenekleri ayarlayan ve yeni RemotePlayer ve 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 bir Yayın cihazı seçmesine izin vermek için Yayınla düğmesini eklememiz gerekir. Cast SDK'sı, "castbutton"" kimliğine sahip google-cast-launcher adlı 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 aşağıdaki gibi görünür:
<google-cast-launcher id="castbutton"></google-cast-launcher>
media_control bölümünde index.html öğesine 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ınla düğmesi görürsünüz. Bu düğmeyi tıkladığınızda yerel ağınızdaki Yayın cihazları listelenir. Cihaz keşfi, Chrome tarayıcı tarafından otomatik olarak yönetilir. Yayın cihazınızı seçtiğinizde örnek alıcı uygulaması yayın cihazınıza yüklenir.
Medya oynatma için herhangi bir destek kaydetmediğimizden henüz Cast cihazında video oynatamazsınız. Yayını durdurmak için Yayınla düğmesini tıklayın.
6. Video içeriği yayınlama
Örnek uygulamanın kapsamını, Cast cihazında uzaktan video oynatacak şekilde genişleteceğiz. Bunu yapmak için Cast çerçevesi tarafından oluşturulan çeşitli etkinlikleri dinlememiz gerekiyor.
Medya yayınlanıyor
Genel olarak, bir yayın cihazında medya oynatmak istiyorsanız aşağıdakilerin olması gerekir:
- Cast SDK'sından, medya öğesini modelleyen bir
MediaInfoJSONnesnesi oluşturun. - Kullanıcı, alıcı uygulamanızı başlatmak için yayın cihazına bağlanır.
MediaInfonesnesini alıcınıza yükleyin ve içeriği oynatın.- Medya durumunu izleyin.
- Kullanıcı etkileşimlerine göre alıcıya oynatma komutları gönderin.
1. Adım, bir nesnenin başka bir nesneyle eşlenmesi anlamına gelir; MediaInfo, Cast SDK'sının anladığı bir şeydir. mediaJSON, uygulamamızın bir medya öğesini kapsamasıdır; bir mediaJSON öğesini kolayca MediaInfo ile eşleyebiliriz. Önceki bölümde yer alan 2. Adım'ı uyguladık. 3. adım, Cast SDK'sı ile kolayca yapılabilir.
Örnek uygulama (CastPlayer), switchPlayer yönteminde yerel oynatma ile uzaktan oynatma arasında zaten ayrım yapıyor:
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, 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.
Şu anda yerel oynatıcı, Yayınlama durumu 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 dayalı olarak 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üntüleme denetleyicisindeyken yayını durdurursak yerel oynatmaya geçmemiz gerekir. Bunun 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ğırmaları; 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. Aşağıdaki kodu CastVideos.js cihazınıza 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 geri çağırmalardan gelen tüm etkinlikleri bağlamamız ve gelen tüm etkinlikleri işlememiz gerekir. Bu oldukça basit bir işlem olduğu için, şimdi tamamlayalı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'da RemotePlayer ve RemotePlayerController, alıcıda 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 öğelere, codelab'in önceki bölümlerinde 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 iletebilmesi için bir MediaInfo nesnesi oluşturarak seçili durumdaki videoyu alıcıya yüklememiz gerekir. Bunun için setupRemotePlayer alanına şu 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, 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 : '');
}
};
Şimdi uygulamayı çalıştırın. Yayın cihazınıza bağlanıp video oynatmaya başlayın. Videonun alıcıda oynatıldığını göreceksiniz.
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ıyla Uyumlu Olarak Ayarla
Android Alıcı olarak da bilinen Android TV uygulamasını başlatmak için CastOptions nesnesinde androidReceiverCompatible işaretini doğru değerine ayarlamamız gerekir.
initializeCastPlayer işlevindeki CastVideos.js bölümüne aşağıdaki kodu ekleyin:
var options = {};
...
options.androidReceiverCompatible = true;
cast.framework.CastContext.getInstance().setOptions(options);
Başlatma Kimlik Bilgilerini Ayarlayın
Gönderen tarafında, oturuma kimlerin katıldığını göstermek için CredentialsData belirtebilirsiniz. credentials, ATV uygulamanız anabildiği sürece kullanıcı tarafından tanımlanabilecek bir dizedir. CredentialsData, Android TV uygulamanıza yalnızca başlatma veya katılma sırasında aktarılır. İnternete bağlıyken tekrar ayarlarsanız Android TV uygulamanıza aktarılmaz.
Başlatma Kimlik Bilgilerini ayarlamak için başlatma seçenekleri belirlendikten sonra CredentialsData her zaman 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ğinde Kimlik Bilgilerini Ayarlama
Web Alıcı uygulamanız ve Android TV uygulamanız credentials öğesini farklı şekilde işliyorsa 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 test ediliyor
Android TV APK'sını Google TV Yüklü Chromecast'e yükleme adımları:
- Android TV cihazınızın IP adresini bulun. Bu işlev genellikle Ayarlar > Ağ ve İnternet > (Cihazınızın bağlı olduğu ağ adı). Sağ tarafta ayrıntılar ve cihazınızın ağdaki IP'si gösterilir.
- 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
- Terminal pencerenizden, bu codelab'in başında indirdiğiniz codelab örneklerinin bulunduğu üst düzey klasöre gidin. Örneğin:
$ cd Desktop/chrome_codelab_src
- 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
- Artık Android TV cihazınızdaki Uygulamalarınız menüsünde Video Yayınla adlı uygulamayı görebilirsiniz.
- 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. 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 bir Chrome web uygulamasındaki Cast SDK widget'larını kullanarak bir video uygulamasını nasıl yayınlayabileceğinizi biliyorsunuz.
Daha ayrıntılı bilgi için Web Sender geliştirici kılavuzuna bakın.