1. Genel Bakış
Bu codelab'de, mevcut bir web video uygulamasını Google Cast uyumlu bir cihazda içerik yayınlayacak şekilde nasıl değiştireceğinizi öğreneceksiniz.
Google Cast nedir?
Google Cast, kullanıcıların mobil cihazdaki içerikleri TV'ye yayınlamasına olanak tanır. Kullanıcılar daha sonra mobil cihazlarını TV'de medya oynatma için uzaktan kumanda olarak kullanabilir.
Google Cast SDK, uygulamanızı genişleterek TV'yi veya ses sistemini kontrol etmenizi sağlar. Cast SDK, 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ğlanır.
Ne geliştireceğiz?
Bu codelab'i tamamladığınızda, videoları Google Cast cihazına yayınlayabilen bir Chrome web video uygulamanız olacak.
Neler öğreneceksiniz?
- Google Cast SDK'sını örnek bir video uygulamasına ekleme
- Google Cast cihazı seçmek için Yayınla düğmesini ekleme
- Yayın 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 yeni Google Chrome tarayıcı.
- Firebase Hosting veya ngrok gibi bir HTTPS barındırma hizmeti.
- İnternet erişimiyle yapılandırılmış bir Chromecast veya Android TV gibi Google Cast yayın cihazı.
- HDMI girişi olan bir TV veya monitör.
- Cast Connect entegrasyonunu test etmek için Google TV Yüklü bir Chromecast gereklidir ancak codelab'in geri kalanı için isteğe bağlıdır. Yoksa bu eğitimin sonuna doğru Cast Connect desteği ekleme adımını atlayabilirsiniz.
Deneyim
- Daha önce web geliştirme bilgisine sahip olmanız gerekir.
- Ayrıca TV izleme konusunda önceden bilgi sahibi olmanız gerekir :)
Bu eğitimi nasıl kullanacaksınız?
Web uygulamaları 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, ardından videoyu cihazda yerel olarak oynatabilir veya Google Cast yayın cihazına yayınlayabilir.
Tamamlanmış öğeyi kullanabilmek için barındırılması gerekir.
Kullanabileceğiniz bir sunucunuz yoksa Firebase Hosting veya ngrok'u kullanabilirsiniz.
Sunucuyu çalıştırma
Seçtiğiniz hizmeti kurduktan sonra app-done simgesine 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örürsünüz.
- Yayınla düğmesini tıklayın ve Google Cast yayın cihazınızı seçin.
- Bir video seçip oynat düğmesini tıklayın.
- Video, Google Cast yayın cihazınızda oynatılmaya başlar.
Alıcıda videoyu 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 cihazda 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 bazı Google Cast terimleri şunlardır:
- Bir gönderen uygulaması mobil cihazda veya dizüstü bilgisayarda çalışıyorsa,
- Google Cast cihazında bir alıcı uygulaması çalışıyor olmalıdır.
Artık en sevdiğiniz metin düzenleyiciyi kullanarak başlangıç projesinin üzerine yeni özellikler eklemeye hazırsınız:
- Örnek kod indirme işleminizden
app-startdizinini seçin. - Uygulamayı sunucunuzu kullanarak çalıştırın ve kullanıcı arayüzünü keşfedin.
Bu codelab'i tamamlarken hizmete bağlı olarak örneği sunucunuzda yeniden barındırmanız gerektiğini unutmayın.
Uygulama tasarımı
Uygulama, uzak bir web sunucusundan 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 veya videoyu mobil cihazda yerel olarak oynatmak için bir video seçebilir.
Uygulama, index.html içinde tanımlanan bir ana görünüm ve ana denetleyiciden (CastVideos.js.) oluşur.
index.html
Bu HTML dosyası, web uygulamasının kullanıcı arayüzünün neredeyse tamamını bildirir.
Görünümlerin birkaç bölümü vardır. Video öğesini içeren div#main_video bölümümüz bulunur. Video div'imizle ilgili olarak, video öğesinin tüm kontrollerini tanımlayan div#media_control öğemiz var. Bunun altında, görüntülenen videonun ayrıntılarını gösteren media_info bulunur. Son olarak, carousel div öğesi, bir div öğesinde video listesini gösterir.
index.html dosyası, Cast SDK'sını da başlatır ve CastVideos işlevine yükleme yapmasını 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ı, Cast Videos web uygulamasının tüm mantığını yönetir. CastVideos.js içinde tanımlanan videoların listesi ve ilişkili meta verileri, mediaJSON adlı bir nesnede yer alır.
Videoyu hem yerel olarak hem de uzaktan yönetmek ve oynatmak için birlikte çalışan birkaç ana bölüm vardır. Genel olarak bu, oldukça basit bir web uygulamasıdır.
CastPlayer, oynatıcıyı ayarlama, medya seçme ve medya oynatmak için etkinlikleri PlayerHandler'ye bağlama gibi işlemlerle uygulamanın tamamını yöneten 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.
Medya oynatmayı yönetmekten sorumlu sınıf PlayerHandler'dır. Medya yönetimi ve oynatma ayrıntılarından sorumlu başka yöntemler de vardır.
Sık sorulan sorular
5. Yayın düğmesini ekleme
Yayın uyumlu bir uygulamada, video öğesinde Yayınla düğmesi gösterilir. Yayınla düğmesini tıkladığınızda, kullanıcının seçebileceği yayın cihazlarının listesi gösterilir. Kullanıcı, gönderen cihazda yerel olarak içerik oynatıyorsa bir yayın cihazı seçildiğinde bu yayın cihazında oynatma başlatılır veya devam ettirilir. Yayın oturumu sırasında kullanıcı istediği zaman Yayınla düğmesini tıklayarak uygulamanızın yayın cihazına yayınlanmasını durdurabilir. Kullanıcı, Google Cast Tasarım Kontrol Listesi'nde açıklandığı gibi uygulamanızın herhangi bir ekranında yayın cihazına bağlanabilmeli veya bağlantısını kesebilmelidir.
Yapılandırma
Başlangıç projesi, tamamlanan örnek uygulamada kullandığınız bağımlılıkları ve kurulumu gerektirir ancak bu kez app-start içeriğini barındırı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çevesinde, çerçevedeki tüm etkinlikleri koordine eden genel bir tekil nesne olan CastContext bulunur. Bu nesne, uygulamanın yaşam döngüsünün başlarında başlatılmalıdır. Genellikle Cast SDK yüklendikten ve kullanıma hazır hale geldikten sonra çağrılan window['__onGCastApiAvailable']'ya atanmış bir geri çağırma işleminden çağrılır. Bu durumda, CastContext, yukarıda belirtilen geri çağırmadan ç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çenekleri içerir. Bunların 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 almanız gerekir. Bu codelab'de örnek bir uygulama kimliği kullanacağız.
index.html bölümünün en sonuna aşağıdaki kodu ekleyin:body
<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
CastVideos uygulamasını ve CastContext'ı başlatmak için index.html dosyasına aşağıdaki kodu ekleyin:
<script src="CastVideos.js"></script>
<script type="text/javascript">
var castPlayer = new CastPlayer();
window['__onGCastApiAvailable'] = function(isAvailable) {
if (isAvailable) {
castPlayer.initializeCastPlayer();
}
};
</script>
Şimdi CastVideos.js içinde, 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 ile RemotePlayerControllers'yi başlatan initializeCastPlayer adlı yeni bir yöntem ekleyelim:
/**
* This method sets up the CastContext, and a few other members
* that are necessary to play and control videos on a Cast
* device.
*/
CastPlayer.prototype.initializeCastPlayer = function() {
var options = {};
// Set the receiver application ID to your own (created in
// the Google Cast Developer Console), or optionally
// use the chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
options.receiverApplicationId = 'C0868879';
// Auto join policy can be one of the following three:
// ORIGIN_SCOPED - Auto connect from same appId and page origin
// TAB_AND_ORIGIN_SCOPED - Auto connect from same appId, page origin, and tab
// PAGE_SCOPED - No auto connect
options.autoJoinPolicy = chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED;
cast.framework.CastContext.getInstance().setOptions(options);
this.remotePlayer = new cast.framework.RemotePlayer();
this.remotePlayerController = new cast.framework.RemotePlayerController(this.remotePlayer);
this.remotePlayerController.addEventListener(
cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED,
this.switchPlayer.bind(this)
);
};
Son olarak, RemotePlayer ve RemotePlayerController için değişkenler oluşturmamız gerekir:
var CastPlayer = function() {
//...
/* Cast player variables */
/** @type {cast.framework.RemotePlayer} */
this.remotePlayer = null;
/** @type {cast.framework.RemotePlayerController} */
this.remotePlayerController = null;
//...
};
Yayınla düğmesi
CastContext başlatıldığına göre, kullanıcının yayın cihazı seçmesine izin vermek için Yayınla düğmesini eklememiz gerekiyor. Cast SDK, "castbutton"" kimliğine sahip google-cast-launcher adlı bir yayın düğmesi bileşeni sağlar. media_control bölümüne button ekleyerek bu bileşeni uygulamanın video öğesine ekleyebilirsiniz.
Düğme öğesi şu şekilde görünür:
<google-cast-launcher id="castbutton"></google-cast-launcher>
index.html bölümündeki media_control dosyası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 yayınla 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ına yüklenir.
Medya oynatma için henüz destek eklemediğimizden videoları yayın cihazında oynatamazsınız. Yayınlamayı durdurmak için Yayınla düğmesini tıklayın.
6. Video içeriğini yayınlama
Örnek uygulamayı, videoları Cast cihazda uzaktan oynatacak şekilde genişleteceğiz. Bunu yapmak 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 şunlar gerekir:
- Cast SDK'dan bir 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 takip edin.
- Kullanıcı etkileşimlerine göre alıcıya oynatma komutları gönderme.
1. adım, bir nesneyi başka bir nesneyle eşlemeye karşılık gelir. MediaInfo, Cast SDK'nın anladığı bir şeydir ve mediaJSON, medya öğesi için uygulamamızın kapsülüdür. mediaJSON öğesini MediaInfo öğesiyle kolayca eşleyebiliriz. Önceki bölümde 2. adımı tamamlamıştık. 3. adımı Cast SDK ile kolayca gerçekleştirebilirsiniz.
Örnek uygulama CastPlayer, 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 oyuncu mantığının tam olarak nasıl çalıştığını anlamanız önemli değildir. Ancak uygulamanızın Medya Oynatıcısının hem yerel hem de uzaktan oynatmayı destekleyecek şekilde değiştirilmesi gerektiğini unutmayın.
Şu anda yerel oynatıcı, yayınlama durumları hakkında henüz bir bilgiye sahip olmadığı için her zaman yerel oynatma durumundadır. Cast çerçevesinde gerçekleşen durum geçişlerine göre kullanıcı arayüzünü güncellememiz gerekiyor. Örneğin, yayınlamaya başladığımızda yerel oynatmayı durdurmamız ve bazı kontrolleri devre dışı bırakmamız gerekir. Benzer şekilde, bu görünüm denetleyicisindeyken yayınlamayı durdurursak yerel oynatmaya geçmemiz gerekir. Bunu işlemek için Cast çerçevesi tarafından oluşturulan çeşitli etkinlikleri dinlememiz gerekir.
Yayınlama oturumu yönetimi
Cast çerçevesinde, Cast oturumu bir cihaza bağlanma, başlatma (veya mevcut bir oturuma katılma), alıcı uygulamasına bağlanma ve uygunsa medya kontrol kanalı başlatma adımlarını birleştirir. Medya kontrol kanalı, Cast çerçevesinin alıcıdan medya oynatmayla ilgili mesajları gönderip aldığı kanaldır.
Kullanıcı, Yayınla düğmesinden bir cihaz seçtiğinde yayın oturumu otomatik olarak başlatılır ve bağlantıyı kestiğinde otomatik olarak durdurulur. Ağ sorunları nedeniyle alıcı oturumuna yeniden bağlanma da Cast çerçevesi tarafından otomatik olarak gerçekleştirilir.
Yayı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, oturum ve durum yönetimiyle ilgili tüm işlemler setupRemotePlayer yöntemiyle gerçekleştirilir. Aşağıdaki kodu CastVideos.js öğenize ekleyerek uygulamanızda bu yapılandırmayı yapmaya 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();
};
Geri çağırmalardan gelen tüm etkinlikleri bağlamamız ve gelen tüm etkinlikleri işlememiz gerekir. Bu işlem oldukça basittir. Şimdi 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ükleniyor
Cast SDK'sında 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, Code Lab'in önceki bölümlerinde gösterildiği gibi sırasıyla cast.framework.RemotePlayer ve cast.framework.RemotePlayerController örnekleri oluşturularak erişilebilir.
Ardından, SDK'nın işleyip isteğe iletmesi için bir MediaInfo nesnesi oluşturarak alıcıda şu anda seçili olan videoyu 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, tüm Cast hata mesajlarını işleyecek 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ın ve bir video oynatmaya başlayın. Videoyu alıcıda oynarken görmeniz gerekir.
7. Cast Connect desteği ekleme
Cast Connect kitaplığı, mevcut gönderen uygulamalarının Cast protokolü aracılığıyla Android TV uygulamalarıyla iletişim kurmasına olanak tanır. Cast Connect, Android TV uygulamanızın alıcı görevi gördüğü Cast altyapısı üzerine kuruludur.
Bağımlılıklar
- Chrome tarayıcı M87 veya sonraki sürümler
Android alıcı uyumluluğunu ayarlama
Android alıcı olarak da bilinen Android TV uygulamasını başlatmak için androidReceiverCompatible işaretini CastOptions nesnesinde doğru olarak ayarlamamız gerekir.
CastVideos.js işlevinizdeki initializeCastPlayer işlevine 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 belirtebilirsiniz. credentials, ATV uygulamanızın anlayabileceğ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 iletilir. Bağlıyken tekrar ayarlarsanız Android TV uygulamanıza aktarılmaz.
Başlatma kimlik bilgilerini ayarlamak için başlatma seçenekleri ayarlandıktan sonra CredentialsData 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 isteğinde kimlik bilgilerini ayarlama
Web alıcı uygulamanız ve Android TV uygulamanız credentials farklı şekilde işliyorsa her biri için ayrı kimlik bilgileri tanımlamanız gerekebilir. Bunu düzeltmek için CastVideos.js işlevinizde setupRemotePlayer altında playerTarget.load bölümüne aşağıdaki kodu ekleyin:
...
var request = new chrome.cast.media.LoadRequest(mediaInfo);
request.credentials = 'user-credentials';
request.atvCredentials = 'atv-user-credentials';
...
Göndereninizin yayın yaptığı alıcı uygulamaya bağlı olarak SDK, mevcut oturum için hangi kimlik bilgilerinin kullanılacağını otomatik olarak işleyecektir.
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ğın adı) bölümünde bulunur. Sağ tarafta ayrıntılar ve cihazınızın ağdaki IP'si gösterilir.
- Terminali kullanarak ADB üzerinden cihazınıza bağlanmak için 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 bulunduğu üst düzey klasöre gidin. Örneğin:
$ cd Desktop/chrome_codelab_src
- Bu klasördeki .apk dosyasını aşağıdaki komutu çalıştırarak Android TV'nize yükleyin:
$ adb -s <device_ip_address>:5555 install android-tv-app.apk
- Android TV cihazınızdaki Uygulamalarınız menüsünde Video Yayınla adlı bir uygulama görmeniz gerekir.
- Güncellenen web gönderen kodunu çalıştırın ve Chrome tarayıcınızdaki açılır menüden yayın simgesini kullanarak veya
Cast..seçeneğini belirleyerek 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 Android TV kumandanızı kullanarak oynatmayı kontrol etmenize olanak tanır.
8. Tebrikler
Artık Chrome web uygulamasında Cast SDK widget'larını kullanarak bir video uygulamasında Cast'i nasıl etkinleştireceğinizi biliyorsunuz.
Daha fazla bilgi için Web Gönderen geliştirici kılavuzuna bakın.