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 cihazdan TV'ye içerik yayınlamasına olanak tanır. Böylece kullanıcılar TV'de medya oynatmak için uzaktan kumanda olarak mobil cihazlarını kullanabilirler.
Google Cast SDK'sı, TV veya ses sistemini kontrol etmek için uygulamanızı genişletmenize olanak 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, Cast kullanıcı deneyimini tüm desteklenen platformlarda basit ve tahmin edilebilir hale getirmek için sağlanmıştır.
Ne inşa edeceğiz?
Bu codelab'i tamamladıktan sonra videoları bir Google Cast cihazında yayınlayabilecek bir Chrome web video uygulamanız olacaktır.
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ı 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ş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. Böyle bir aboneliğiniz yoksa, bu eğiticinin sonuna doğru Cast Connect Desteği adımını atlayabilirsiniz.
Deneyim
- Bunun için web geliştirme konusunda yeterli bilgiye sahip olmanız gerekir.
- Ayrıca, TV izleme konusunda da ö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ı paketten çıkarı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çip videoyu cihazda yerel olarak oynatabilir veya bir Google Cast cihazında yayınlayabilir.
Tamamlananların kullanılabilmesi için barındırılması gerekir.
Kullanabileceğiniz bir sunucunuz yoksa Firebase Hosting veya ngrok'u kullanabilirsiniz.
Sunucuyu çalıştırın
İstediğiniz hizmeti ayarladıktan sonra app-done'ye gidin ve sunucunuzu başlatın.
Tarayıcınızda, barındırdığınız örneğin https URL'sini ziyaret edin.
- 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 ve oynat düğmesini tıklayın.
- Video, Google Cast cihazınızda oynatılmaya başlar.
Videoyu alıcıda 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ırlayın
İndirdiğiniz başlangıç uygulamasına Google Cast desteği 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ı varsa
- Google Cast cihazında bir alıcı uygulaması çalışır.
Artık favori metin düzenleyicinizi kullanarak başlangıç projesinin üzerine inşa etmeye hazırsınız:
- Ö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 atması için bir liste sağlar. Kullanıcılar, ayrıntıları görmek için bir video seçebilir veya videoyu mobil cihazda yerel olarak oynatabilir.
Uygulama, index.html dilinde tanımlanmış bir ana görünüm ve CastVideos.js. ana kumandasından oluşuyor
index.html
Bu HTML dosyası, web uygulaması için kullanıcı arayüzünün neredeyse tamamını tanımlar.
Videoların yer aldığı div#main_video bölümümüz mevcuttur. Video div'imiz ile ilgili olarak, video öğesi için tüm kontrolleri tanımlayan div#media_control var. Bunun altında, media_info ile ilgili ayrıntıların gösterildiği video yer alır. Son olarak carousel div, div içindeki videoların listesini gösterir.
index.html dosyası, ayrıca Cast SDK'yı önyükler ve CastVideos işlevinin yüklenmesini sağlar.
Bu öğeleri dolduracak içeriklerin çoğu CastVideos.js içinde tanımlanır, eklenir ve kontrol edilir. Bunu görelim.
CastVideos.js
Bu komut dosyası, Yayın Videoları web uygulaması için tüm mantığı yönetir. Video listesi ve bunlarla ilişkili meta veriler CastVideos.js içinde mediaJSON adlı bir nesne içinde yer alır.
Videoyu hem yerel olarak hem de uzaktan yönetmekten ve oynatmaktan sorumlu birkaç ana bölüm vardır. Bu, oldukça genel bir web uygulaması.
CastPlayer, tüm uygulamayı yöneten, oynatıcıyı ayarlama, medya seçme ve medya oynatma için etkinlikleri PlayerHandler ile bağlamayı sağlayan ana sınıftır. CastPlayer.prototype.initializeCastPlayer, tüm Yayın işlevini oluşturan yöntemdir. CastPlayer.prototype.switchPlayer, yerel ve uzak oyuncular arasındaki durumu değiştirir. CastPlayer.prototype.setupLocalPlayer ve CastPlayer.prototype.setupRemotePlayer, yerel ve uzak oynatıcıları başlatır.
PlayerHandler, medya oynatmayı yönetmekten sorumlu sınıftır. Medya yönetimi ve oynatma işlemlerinden sorumlu birkaç farklı yöntem daha vardır.
Sık sorulan sorular
5. Yayınla düğmesini ekleme
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österilir. Kullanıcı, gönderen cihazda yerel olarak içerik oynatıyorsa yayın cihazı seçmek, ilgili yayın cihazında oynatmayı başlatır veya devam ettirir. Kullanıcı, Yayın oturumu sırasında herhangi bir zamanda Yayın düğmesini tıklayabilir ve uygulamanızı Yayın cihazına yayınlamayı durdurabilir. Kullanıcının, Google Cast Tasarım Listesi'nde açıklandığı gibi, uygulamanızın herhangi bir ekranındayken Yayın cihazına bağlanabilmesi veya yayın cihazının bağlantısını kesebilmesi gerekir.
Yapılandırma
Başlangıç projesi, tamamlanan örnek uygulamadakiyle 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 sunucunuzda örneği yeniden barındırmanız gerektiğini unutmayın.
Başlatma
Yayın çerçevesi, çerçevenin tüm etkinliklerini koordine eden global bir tekil nesneye sahiptir: CastContext. Bu nesne, uygulama yaşam döngüsünün başlarında, genellikle window['__onGCastApiAvailable'] uygulamasına atanmış bir geri çağırmadan çağrılmalıdır. Bu adım, SDK SDK yüklendikten sonra kullanılabilir ve kullanıma hazırdır. Bu durumda, CastContext daha önce belirtilen geri çağırma olarak ç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. En önemlisi, yalnızca belirtilen uygulamayı çalıştırabilen cihazları göstermek ve bir Yayın oturumu başlatıldığında alıcı uygulamasını başlatmak için kullanılabilir Yayın cihazları listesini filtrelemek üzere kullanılan alıcı uygulama kimliğidir.
Kendi Cast uyumlu uygulamanızı geliştirdiğinizde Cast geliştiricisi olarak kaydolmanız ve ardından uygulamanız için bir uygulama kimliği almanız gerekir. Bu codelab için örnek bir uygulama kimliği kullanacağız.
body bölümünün en sonunda 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 işlemini başlatmak için aşağıdaki kodu index.html öğesine 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 uygulamasında az önce çağırdığımız yönteme karşılık gelen yeni bir yöntem eklememiz gerekir. initializeCastPlayer adında, CastContext'te seçenekleri ayarlayan ve yeni RemotePlayer ve RemotePlayerControllers öğesini başlatan 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üğmesi eklememiz gerekiyor. Yayın SDK'sı, "castbutton"" kimliğine sahip google-cast-launcher adında bir Cast düğmesi bileşeni sağlar. media_control bölümüne sadece 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>
media_control bölümünde, index.html uygulaması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ö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çin. Örnek alıcı uygulaması, Yayın cihazında yüklenir.
Medya oynatma desteğimiz yok. Bu nedenle 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ınlanıyor
Örnek uygulamanın kapsamını, bir yayın cihazında uzaktan video oynatacak şekilde genişleteceğiz. Bunun için Yayın çerçevesi tarafından oluşturulan çeşitli etkinlikleri dinlememiz gerekir.
Medya yayınlanıyor
Genel olarak, bir yayın cihazında medya oynatmak isterseniz aşağıdaki işlemlerin yapılması gerekir:
- Bir medya öğesini modelleyen Cast SDK'sından
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 oynatma komutlarını alıcıya gönderin.
1. adım, bir nesnenin başka bir özellikle eşlenmesine denk gelir. MediaInfo, SDK'nın anladığı şeydir ve mediaJSON, uygulamamızın bir medya öğesidir. mediaJSON özelliğini kolayca MediaInfo ile eşleyebiliriz. Önceki bölümde zaten 2. adımı gerçekleştirmiştik. Cast SDK ile 3. adımı kolayca uygulayabilirsiniz.
CastPlayer adlı örnek uygulama, switchPlayer yönteminde yerel ve uzaktan oynatma arasında zaten ayrım yapar:
if (cast && cast.framework) {
if (this.remotePlayer.isConnected) {
//...
Bu codelab'de örnek oynatıcı mantığının nasıl çalıştığını tam olarak anlamanız önemli değildir. Bununla birlikte, uygulamanızın medya oynatıcısının hem yerel hem de uzaktan oynatmayın farkında olmak için değiştirilmesi gerektiğini bilmeniz önemlidir.
Yerel oynatıcı, Yayınlama durumları hakkında henüz hiçbir bilgiye sahip olmadığı için şu anda 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şladığımızda yerel oynatmayı durdurmamız ve bazı kontrolleri devre dışı bırakmamız gerekir. Benzer şekilde, bu görünüm denetleyicisindeyken içerik yayınlamayı durdurursak yerel oynatmaya geçmemiz gerekir. Bu sorunu çözmek için Yayın çerçevesi tarafından oluşturulan çeşitli etkinlikleri dinlememiz gerekir.
Yayınlama oturumu yönetimi
Yayın çerçevesi için Yayınlama oturumu, bir cihaza bağlanma, başlatma (veya mevcut bir oturuma katılma), bir alıcı uygulamasına bağlanma ve uygun durumlarda bir medya kontrol kanalı başlatma adımlarını birleştirir. Medya denetim kanalı, Yayın çerçevesinin medya oynatmayla ilgili mesajları alıcıdan gönderip alma şeklidir.
Kullanıcı, Yayın 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ın oturumları, cast.framework.CastContext.getInstance().getCurrentSession() üzerinden erişebileceğiniz 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.
Şu anki başvurumuzda, oturum ve eyalet yönetiminin tamamı setupRemotePlayer yönteminde bizim tarafımızdan gerçekleştirilir. Aşağıdaki kodu CastVideos.js cihazınıza 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();
};
Ancak, geri çağırmalardan gelen tüm etkinlikleri bağlamamız ve gelen tüm etkinlikleri ele almamız gerekir. Bu oldukça basit bir işlemdir. Şimdi bu konuyu ele alalı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
Google Cast SDK'sında RemotePlayer ve RemotePlayerController, alıcıda uzaktan medya oynatmayı yönetmek için bir dizi uygun API sağlar. Medya oynatmayı destekleyen bir CastSession için RemotePlayer ve RemotePlayerController örnekleri SDK tarafından otomatik olarak oluşturulur. Bunlara, codelab'de daha önce gösterildiği gibi sırasıyla cast.framework.RemotePlayer ve cast.framework.RemotePlayerController örnekleri oluşturularak erişilebilir.
Ardından, SDK'nın isteği işlemesi ve iletmesi için bir MediaInfo nesnesi oluşturarak seçili durumdaki videoyu alıcıya yüklememiz gerekir. Bunu yapmak için setupRemotePlayer hesabı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, 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 bir video oynatmaya başlayın. Videonun alıcı tarafından oynatıldığını görürsünüz.
7. Cast Connect Desteği Ekleyin
Cast Connect kitaplığı, mevcut gönderen uygulamalarının Yayın protokolü aracılığıyla Android TV uygulamalarıyla iletişim kurmasını sağlar. Cast Connect, yayın altyapısını temel alır ve Android TV uygulamanız alıcı işlevi görü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 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 Bilgilerini Belirle
Gönderen tarafında, oturuma kimlerin katılacağını temsil etmek için CredentialsData değerini belirtebilirsiniz. credentials, ATV uygulamanız anlayabildiğ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 iletilir. Bağlıyken bu özelliği tekrar ayarlarsanız Android TV uygulamanıza aktarılmaz.
Lansman Kimlik Bilgilerini ayarlamak için başlatma seçenekleri ayarlandıktan sonra CredentialsData herhangi bir zamanda tanımlanmalıdır.
Aşağıdaki kodu 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 sorunu çözmek için setupRemotePlayer işlevinin playerTarget.load bölümündeki CastVideos.js kodunuza aşağıdaki kodu ekleyin:
...
var request = new chrome.cast.media.LoadRequest(mediaInfo);
request.credentials = 'user-credentials';
request.atvCredentials = 'atv-user-credentials';
...
SDK, gönderenin mevcut alıcıya bağlı olarak geçerli oturumda hangi kimlik bilgilerinin kullanılacağını otomatik olarak yönetir.
Cast Connect'i test etme
Android TV APK'sını Google TV'li Chromecast'e 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ı) altında kullanılabilir. Sağ tarafta, ayrıntılar ve cihazınızın ağdaki IP adresi gösterilir.
- Terminal 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 uygulamayı görebilirsiniz.
- Güncellenmiş web gönderen kodunu çalıştırın ve yayınla simgesini kullanarak ya da Chrome tarayıcınızdaki açılır menüden
Cast..simgesini seçerek Android TV cihazınızla bir yayınlama oturumu oluşturun. Bunu yaptığınızda Android TV uygulamasını Android Alıcınızda başlatabilir ve Android TV uzaktan kumandanızı kullanarak oynatmayı kontrol edebilirsiniz.
8. Tebrikler
Artık Chrome web uygulamasındaki Yayın SDK widget'larını kullanarak video uygulaması yayınlamaya nasıl başlayacağınızı biliyorsunuz.
Daha fazla ayrıntı için Web Gönderen geliştirici kılavuzuna bakın.