1. Genel bakış
Bu codelab'de Google Cast uyumlu bir cihazda içerik yayınlamak için mevcut bir web video uygulamasının nasıl değiştirileceği açıklanmaktadır.
Google Cast nedir?
Google Cast, kullanıcıların mobil cihazlardan TV'ye içerik 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'sı, TV veya ses sistemini kontrol etmek için uygulamanızı genişletmenize olanak tanır. Cast SDK'sı, Google Cast Tasarım 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 amacıyla hazırlanmıştır.
Ne tür bir kampanya oluşturacağız?
Bu codelab'i tamamladığınızda videoları Google Cast cihazlarında yayınlayabilecek bir Chrome web video uygulamanız olacaktır.
Neler öğreneceksiniz?
- Google Cast SDK'sı örnek bir video uygulamasına nasıl eklenir?
- Google Cast cihazı seçmek için Yayınla düğmesini ekleme.
- Yayın cihazına bağlanma ve medya alıcısı başlatma.
- Video nasıl yayınlanır?
- Cast Connect'i entegre etme
Gerekenler
- En son Google Chrome tarayıcı.
- Firebase Hosting veya ngrok gibi HTTPS barındırma hizmeti.
- İnternet erişimiyle yapılandırılmış Chromecast veya Android TV gibi bir Google Cast cihazı.
- HDMI girişi olan bir TV veya monitör.
- Cast Connect entegrasyonunu test etmek için Google TV'li Chromecast gereklidir ancak Codelab'in geri kalanında isteğe bağlıdır. Böyle bir cihazınız yoksa bu eğiticinin sonuna doğru Cast Connect Desteği adımını atlayabilirsiniz.
Deneyim
- Bunun için önce web geliştirme bilgisine sahip olmanız gerekir.
- Ayrıca, TV izleme konusunda önceden bilgi sahibi olmanız gerekir :)
Bu eğiticiyi nasıl kullanacaksı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 kodu bilgisayarınıza indirebilirsiniz...
ve indirilen zip dosyasının paketini açın.
3. Örnek uygulamayı çalıştırın
Ö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 cihazına yayınlayabilir.
Tamamlananları kullanabilmeniz 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ğe ait https URL'ye gidin.
- Video uygulaması görünür.
- Yayınla düğmesini tıklayın ve Google Cast cihazınızı seçin.
- Bir video seçin, Oynat düğmesini tıklayın.
- Video, Google Cast 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 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 için destek eklememiz gerekiyor. Bu codelab'de kullanacağımız bazı Google Cast terimleri şunlardır:
- Mobil cihazda veya dizüstü bilgisayarda çalışan bir gönderen uygulaması
- Google Cast cihazında çalışan bir alıcı uygulaması
Artık favori metin düzenleyicinizi kullanarak başlangıç projesini temel alabilirsiniz:
- Ö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'de çalışırken hizmete bağlı olarak örneği sunucunuzda yeniden barındırmanız gerektiğini unutmayın.
Uygulama tasarımı
Uygulama, uzak bir web sunucusundan video listesi getirir ve kullanıcının göz atabilmesi için bir liste sağlar. Kullanıcılar bir videoyu seçerek ayrıntılarını görebilir veya mobil cihazda videoyu yerel olarak oynatabilir.
Uygulama, index.html kapsamında tanımlanmış bir ana görünümden ve ana denetleyiciden (CastVideos.js.) oluşuyor
index.html
Bu html dosyası, web uygulamasının kullanıcı arayüzünün neredeyse tamamını tanımlar.
Video bölümlerini içeren div#main_video bölümümüz mevcuttur. Video div ile ilgili olarak, video öğesi için tüm kontrolleri tanımlayan div#media_control var. Bunun altında, görünümde videonun ayrıntılarını gösteren media_info yer alır. Son olarak carousel div, bir div içindeki videoların listesini gösterir.
index.html dosyası, ayrıca Cast SDK'sını önyükler ve CastVideos işlevinin yüklenmesini sağlar.
Bu öğeleri dolduracak içeriğin çoğu CastVideos.js ürününde tanımlanır, yerleştirilir ve kontrol edilir. Şimdi buna göz atalım.
CastVideos.js
Bu komut dosyası, Cast Video web uygulamasının mantığını yönetir. Videoların listesi ve bunlarla ilişkili CastVideos.js meta verileri mediaJSON adlı nesnede yer alır.
Videonun hem yerel hem de uzaktan yönetilip oynatılmasından sorumlu birkaç ana bölüm vardır. Bu, genel olarak oldukça düz bir web uygulamasıdır.
CastPlayer tüm uygulamayı yöneten, oynatıcıyı kuran, medyayı seçen ve medya oynatmak için etkinlikleri PlayerHandler'a bağlayan ana sınıftır. CastPlayer.prototype.initializeCastPlayer, tüm Yayın işlevini oluşturan yöntemdir. CastPlayer.prototype.switchPlayer, durumu yerel ve uzak oynatıcılar arasında değiştirir. CastPlayer.prototype.setupLocalPlayer ve CastPlayer.prototype.setupRemotePlayer, yerel ve uzak oyuncuları başlatır.
PlayerHandler, medya oynatmayı yönetmekten sorumlu olan sınıftır. Medya yönetimi ve oynatmanın ayrıntılarından sorumlu olan başka çeşitli 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örüntüler. Yayınla düğmesi tıklandığında, kullanıcının seçebileceği Yayın cihazlarının listesi görüntülenir. Kullanıcı, gönderen cihazda yerel olarak içerik oynatıyorsa, yayın cihazı seçildiğinde o yayın cihazında oynatma işlemi başlar veya devam eder. Kullanıcı, Yayın oturumu sırasında istediği zaman Yayınla düğmesini tıklayıp uygulamanızı Yayın cihazına yayınlamayı durdurabilir. Kullanıcının, Google Cast Tasarım Kontrol Listesi'nde açıklandığı şekilde, uygulamanızın herhangi bir ekranında Yayın cihazına bağlanabilmesi veya yayın bağlantısını kesebilmesi gerekir.
Yapılandırma
Başlangıç projesi, tamamlanmış örnek uygulamadakiyle aynı bağımlılıkları ve kurulumu gerektirir. Ancak bu sefer 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
Yayın çerçevesi, çerçevenin tüm etkinliklerini koordine eden CastContext adlı genel bir tekil nesneye sahiptir. Bu nesne, uygulama yaşam döngüsünün başlarında, genellikle window['__onGCastApiAvailable'] öğesine atanan bir geri çağırmadan çağrılmalıdır. Bu çağrı, Cast SDK'sı yüklendikten sonra çağrılır ve kullanılabilir. Bu örnekte CastContext, daha önce bahsedilen 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çenekler içerir. En önemlisi alıcı uygulama kimliğidir. Alıcı uygulama kimliği, mevcut yayın cihazlarının listesini yalnızca belirtilen uygulamayı çalıştırabilecek cihazları gösterecek şekilde filtrelemek ve bir yayın oturumu başlatıldığında alıcı uygulamasını başlatmak için kullanılır.
Kendi Cast özellikli uygulamanızı geliştirdiğinizde, bir Cast geliştiricisi olarak kaydolmanız ve ardından uygulamanız için bir uygulama kimliği edinmeniz gerekir. Bu codelab'de örnek bir uygulama kimliği kullanacağız.
body bölümünün en sonuna index.html bölümüne şu kodu 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 öğesini başlatmak için index.html koduna 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 adında yeni bir yönteme karşılık gelen yeni bir yöntem eklememiz gerekiyor. CastContext'te seçenekleri ayarlayan ve yeni RemotePlayer ile RemotePlayerControllers öğesini 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 değişkenlerini 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'sında, "castbutton"" kimliğine sahip google-cast-launcher adında bir Cast düğmesi bileşeni bulunur. media_control bölümüne yalnızca bir button eklenerek uygulamanın video öğesine eklenebilir.
Düğme öğesi şu şekilde görünür:
<google-cast-launcher id="castbutton"></google-cast-launcher>
Aşağıdaki kodu media_control bölümünde index.html bölümüne 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öreceksiniz. 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ı uygulama, Yayın cihazında yüklenir.
Medya oynatma için henüz destek vermediğimizden Cast cihazında henüz video oynatamazsınız. Yayını durdurmak için Yayınla düğmesini tıklayın.
6. Video içeriği yayınlanıyor
Örnek uygulamayı, Cast cihazında uzaktan video oynatacak şekilde genişleteceğiz. Bunun için Yayın çerçevesinin oluşturduğu çeşitli etkinlikleri dinlememiz gerekir.
Medya yayınlanıyor
Genel olarak, Yayın cihazında medya oynatmak isterseniz aşağıdakilerin yapılması gerekir:
- Yayın SDK'sından bir medya öğesi 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şimlerini temel alan oynatma komutlarını alıcıya gönderin.
1. adım, bir nesneyi başka bir nesneyle eşlemeye karşılık gelir. MediaInfo, Cast SDK'sının anladığı bir şeydir ve mediaJSON, uygulamamızın bir medya öğesine ilişkin kapsülüdür; bir mediaJSON öğesini kolayca MediaInfo ile eşleyebiliriz. Önceki bölümde 2. adımı tamamladık. 3. adım, Cast SDK'sıyla kolayca uygulanabilir.
CastPlayer örnek uygulaması, switchPlayer yönteminde yerel ve uzaktan oynatma arasında zaten ayrım yapmaktadır:
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. Ancak, uygulamanızın medya oynatıcısının hem yerel hem de uzaktan oynatmaya duyarlı olması için değiştirilmesi gerektiğini bilmeniz önemlidir.
Şu anda yerel oynatıcı, yerel yayınlama durumuyla ilgili hiç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 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ünüm denetleyicisindeyken yayını durdurursak yerel oynatmaya geçmemiz gerekir. Bu sorunu çözmek için Cast çerçevesinin oluşturduğu çeşitli etkinlikleri dinlememiz gerekir.
Yayınlama oturumu yönetimi
Yayın çerçevesi için Yayın oturumu, bir cihaza bağlanma, (veya mevcut bir oturuma katılma), bir alıcı uygulamasına bağlanma ve uygunsa bir medya kontrol kanalı başlatma adımlarını birleştirir. Medya kontrol kanalı, Yayın çerçevesinin medya oynatmayla ilgili mesajları alıcıdan gönderdiği ve aldığı yöntemdir.
Kullanıcı, Yayınla düğmesinden bir cihaz seçtiğinde Yayınla oturumu otomatik olarak başlatılır ve kullanıcı 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ınlama oturumları CastSession tarafından yönetilir. Bu uygulamaya cast.framework.CastContext.getInstance().getCurrentSession() üzerinden erişilebilir. EventListener geri çağırmaları; oluşturma, askıya alma, devam ettirme ve fesih gibi oturum etkinliklerini izlemek için kullanılabilir.
Geçerli başvurumuzda, tüm oturum ve durum yönetimi setupRemotePlayer yönteminde bizim için yönetilir. Aşağıdaki kodu CastVideos.js kodunuza ekleyerek uygulamanızda bunu 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();
};
Geri çağırmalardan gelen tüm etkinlikleri yine de bağlamamız ve gelen tüm etkinlikleri ele almamız gerekir. Bu oldukça kolay bir işlemdir. Ş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ü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. Bu örneklere codelab'de daha önce belirtildiği gibi, sırasıyla cast.framework.RemotePlayer ve cast.framework.RemotePlayerController örnekleri oluşturularak erişilebilir.
Daha sonra, SDK'nın isteği işleyip iletmesi için bir MediaInfo nesnesi oluşturarak alıcıda seçili videoyu yüklememiz gerekir. Bunu yapmak için aşağıdaki kodu setupRemotePlayer uygulamasına 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, yayınlama 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. Yayın cihazınıza bağlanıp video oynatmaya başlayın. Video, alıcıda oynatılıyor.
7. Cast Connect Desteği Ekle
Cast Connect kitaplığı, mevcut gönderen uygulamalarının Yayın protokolü aracılığıyla Android TV uygulamalarıyla iletişim kurmasına olanak tanır. Cast Connect, Android yayın alıcınız gibi davranan Cast altyapısına dayanır.
Bağımlılıklar
- Chrome Tarayıcı M87 veya sonraki sürümler
Android Alıcıyla Uyumlu Ayarla
Android Alıcısı olarak da adlandırılan Android TV uygulamasını başlatmak için CastOptions nesnesinde androidReceiverCompatible işaretini true olarak ayarlamamız gerekir.
initializeCastPlayer işlevinde CastVideos.js kodunuza şu kodu ekleyin:
var options = {};
...
options.androidReceiverCompatible = true;
cast.framework.CastContext.getInstance().setOptions(options);
Başlatma Kimlik Bilgileri
Gönderen tarafta, oturuma kimlerin katılacağını temsil etmek için CredentialsData değerini belirtebilirsiniz. credentials, ATV uygulamanız tarafından anlaşılabildiği sürece kullanıcı tarafından tanımlanabilen bir dizedir. CredentialsData yalnızca Android TV uygulamanıza lansman veya katılma sırasında iletilir. Bağlıyken bu ayarı tekrar yaparsanız Android TV uygulamanıza iletilmez.
Lansman Kimlik Bilgilerinin ayarlanabilmesi için CredentialsData, başlatma seçenekleri ayarlandıktan sonra her zaman tanımlanmalıdır.
Aşağıdaki işlevi, initializeCastPlayer işlevi altındaki CastVideos.js sınıfınıza 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 uygulamasını farklı şekilde işliyorsa her biri için ayrı kimlik bilgileri tanımlamanız gerekebilir. Bu durumu düzeltmek için setupRemotePlayer içindeki playerTarget.load bölümünde şu kodu CastVideos.js kodunuza ekleyin:
...
var request = new chrome.cast.media.LoadRequest(mediaInfo);
request.credentials = 'user-credentials';
request.atvCredentials = 'atv-user-credentials';
...
SDK, alıcınızın yayın yaptığı alıcıya bağlı olarak mevcut oturum için kullanılacak kimlik bilgilerini otomatik olarak işler.
Cast Connect testi
Google TV'li Chromecast'e Android TV APK'sını yükleme adımları:
- Android TV cihazınızın IP adresini bulun. Bu özellik genellikle Ayarlar > Ağ ve İnternet > (Cihazınızın bağlı olduğu ağ adı) bölümünde kullanılabilir. Sağ tarafta ayrıntıları ve cihazınızın ağdaki IP'sini gösterir.
- Terminali kullanarak ADB üzerinden 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 üst düzey klasörüne gidin. Örneğin:
$ cd Desktop/chrome_codelab_src
- Aşağıdaki kodu ç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 Yayın Videoları adıyla bir uygulama görebilirsiniz.
- Güncellenmiş web gönderen kodunu çalıştırın ve yayınla simgesini kullanarak veya Chrome tarayıcınızdaki açılır menüden
Cast..öğesini seçerek Android TV cihazınızla bir yayın oturumu oluşturun. Bu işlem, Android TV'nizin Android Alıcınızda başlatılmasını sağlar ve Android TV uzaktan kumandanızı kullanarak oynatmayı kontrol etmenize olanak tanır.
8. Tebrikler
Artık Chrome web uygulamasında Cast SDK widget'larını kullanarak video uygulamalarını nasıl etkinleştireceğinizi biliyorsunuz.
Daha fazla ayrıntı için Web Gönderen geliştirici kılavuzuna bakın.