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ı bir TV'yi 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ı ö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'i entegre etme
İhtiyacınız olanlar
- En son Google Chrome tarayıcı.
- 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. Cast Connect Desteği'niz yoksa bu eğitimdeki 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 uygulaması oluşturma 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ı açın.
3. Örnek uygulamayı çalıştırma
Ö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çebilir ve daha sonra videoyu cihazda yerel olarak oynatabilir veya bir Google Cast cihazında 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.
- Video uygulamasının göründüğünü göreceksiniz.
- 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ı.
Artık favori metin düzenleyicinizi kullanarak başlangıç projesinin üzerine kod yazmaya 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ı 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'imizle ilgili olarak, video öğesinin tüm kontrollerini tanımlayan div#media_control öğesine sahibiz. Onun altında ise media_info, görüntülenen videonun ayrıntılarını gösterir. Son olarak carousel div'inde videoların listesi gösterilir.
index.html dosyası, Cast SDK'sını da temel oluşturur ve CastVideos işlevinin yüklenmesini söyler.
Bu öğeleri dolduracak içeriğin çoğu CastVideos.js içinde tanımlanır, yerleştirilir ve kontrol edilir. Şimdi buna 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.
Videoyu hem yerel hem de uzaktan yönetmekten ve oynatmaktan sorumlu birkaç önemli 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 medyayı oynatmak için etkinlikleri PlayerHandler ile bağ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 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ın düğmesini ekleme
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. 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, 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ı global bir tekil nesne içerir. Bu nesne, uygulamanın yaşam döngüsünün başlarında başlatılmalıdır. Genellikle window['__onGCastApiAvailable']'e atanan bir geri çağırma işlevinden çağrılır. Bu işlev, Cast SDK'sı yüklendikten ve kullanıma sunulduktan sonra çağrılır. 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 bir options JSON nesnesi sağlanmalıdır. Bu sınıf, çerçevenin davranışını etkileyen seçenekler içerir. Bunlardan en önemlisi, mevcut 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 özellikli uygulamanızı geliştirirken Cast geliştiricisi olarak kaydolmanız ve ardından uygulamanız için bir uygulama kimliği almanız gerekir. Bu kod laboratuvarında ö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'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ü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>
Ş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 Cast cihazları listelenir. Cihaz bulma özelliği, 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 henüz destek sağlamadığımızdan Cast cihazda video oynatamazsınız. Yayını durdurmak için Yayınla düğmesini tıklayın.
6. Video içeriği yayınlama
Ö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
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 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 yapılabilir.
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, 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 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 Cast oturumu, bir cihaza bağlanma, başlatma (veya mevcut bir oturuma katılma), alıcı uygulamasına bağlanma ve uygun durumlarda bir medya kontrol kanalını 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 setupRemotePlayer yönteminde bizim için yönetilir. 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ükleme
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. 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);
//...
};
Ş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 : '');
}
};
Ardından uygulamayı çalıştırın. Cast cihazınıza bağlanın ve bir videoyu oynatmaya başlayın. Video alıcıda oynatılıyor.
7. Cast Connect Desteği Ekleme
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 alıcı olarak görev yaptığında Cast altyapısının üzerine kuruludur.
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 kimlerin katıldığını göstermek için CredentialsData belirtebilirsiniz. credentials, ATV uygulamanız tarafından anlaşıldığı sürece kullanıcı tarafından tanımlanabilen 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.
Lansman kimlik bilgilerini ayarlamak için CredentialsData, lansman seçenekleri ayarlandıktan sonra herhangi bir zamanda tanımlanmalıdır.
initializeCastPlayer işlevi altındaki 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 öğ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'i test etme
Android TV APK'sını Google TV Yüklü Chromecast'e yükleme adımları:
- 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.
- Cihazınıza ADB üzerinden bağlanmak için terminali kullanarak cihazınızın IP adresini kullanın:
$ adb connect <device_ip_address>:5555
- 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
- Aşağıdaki adımları uygulayarak 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ında Cast SDK widget'larını kullanarak video uygulamalarını nasıl yayınlayacağınızı biliyorsunuz.
Daha ayrıntılı bilgi için Web Sender geliştirici kılavuzuna bakın.