1. Genel Bakış
Bu codelab'de, yayın özellikli cihazlarda içerik oynatmak için Özel Web Alıcısı uygulamasının nasıl oluşturulacağı açıklanmaktadır.
Google Cast nedir?
Google Cast, kullanıcıların mobil cihazdan TV'ye içerik yayınlamasına olanak tanır. Kullanıcılar, TV'de medya oynatmak için uzaktan kumanda olarak mobil cihazlarını veya masaüstü Chrome Tarayıcı'yı kullanabilir.
Google Cast SDK'sı, uygulamanızın Google Cast uyumlu cihazları (örneğin, TV veya ses sistemi) kontrol etmesine olanak tanır. Cast SDK'sı, Google Cast Tasarım Kontrol Listesi'ne göre gerekli kullanıcı arayüzü bileşenlerini sağlar.
Google Cast Tasarım Kontrol Listesi, desteklenen tüm platformlarda Cast kullanıcı deneyimini basit ve tahmin edilebilir hale getirmek için sağlanmıştır. Daha fazla bilgi edinin.
Ne oluşturacağız?
Bu codelab'i tamamladığınızda, Cast uyumlu cihazlarda video içeriği görüntüleyebilen, size ait bir özel alıcı olarak çalışan bir HTML5 uygulamanız olacaktır.
Neler öğreneceksiniz?
- Alıcı geliştirme için nasıl hazırlanılır?
- Cast Uygulama Çerçevesi'ne dayalı Cast uyumlu bir alıcının temelleri.
- Yayınlanan bir videoyu nasıl alınır?
- Hata Ayıklama Günlükçüsü'nü entegre etme.
- Alıcınızı akıllı ekranlar için optimize etme.
İhtiyacınız olanlar
- En son Google Chrome tarayıcı.
- Firebase Hosting veya ngrok gibi HTTPS barındırma hizmeti.
- Chromecast veya Android TV gibi internet erişimi olan bir Google Cast cihazı.
- HDMI girişli bir TV veya monitör.
Deneyim
- Daha önce web geliştirme konusunda bilgi sahibi olmanız gerekir.
- TV izleme konusunda önceden bilgiye de sahip olmanız gerekir :)
Bu eğiticiden nasıl yararlanacaksınız?
Web uygulamaları geliştirme deneyiminizi nasıl değerlendirirsiniz?
TV izleme deneyiminizi nasıl değerlendirirsiniz?
2. Örnek kodu alın
Tüm örnek kodları bilgisayarınıza indirebilirsiniz...
ve indirilen zip dosyasının paketini açın.
3. Alıcınızı yerel olarak dağıtma
Web alıcınızı bir yayın cihazıyla kullanabilmeniz için yayın cihazınızın, yayın cihazınızın erişebileceği bir yerde barındırılması gerekir. Halihazırda https'yi destekleyen bir sunucunuz varsa aşağıdaki talimatları atlayın ve URL'yi not edin. Sonraki bölümde bu URL'ye ihtiyacınız olacaktır.
Kullanabileceğiniz bir sunucunuz yoksa Firebase Hosting veya ngrok'u kullanabilirsiniz.
Sunucuyu çalıştırma
İstediğiniz hizmeti ayarladıktan sonra app-start
bölümüne gidip sunucunuzu başlatın.
Barındırılan alıcınızın URL'sini not edin. Bir sonraki bölümde bu kodu kullanacaksınız.
4. Cast Developer Console'a bir uygulama kaydetme
Chromecast cihazlarda bu codelab'de yerleşik olarak bulunan özel alıcıyı çalıştırabilmek için uygulamanızı kaydetmeniz gerekir. Uygulamanızı kaydettikten sonra gönderen uygulamanızın API çağrıları yapmak (örneğin, bir alıcı uygulamayı başlatmak için) için kullanması gereken bir uygulama kimliği alırsınız.
"Yeni uygulama ekle"yi tıklayın
"Özel Alıcı"yı seçin. inşa ettiğimiz şey bu.
Yeni alıcınızın ayrıntılarını girin. Aldığınız URL'yi kullandığınızdan emin olun
ele alacağız. Yeni alıcınıza atanan uygulama kimliğini not edin.
Ayrıca, yayınlamadan önce alıcı uygulamanıza erişebilmesi için Google Cast cihazınızı kaydetmeniz gerekir. Alıcı uygulamanız yayınlandıktan sonra tüm Google Cast cihazlarında kullanılabilir. Bu codelab'in amacı doğrultusunda, yayınlanmamış bir alıcı uygulamayla çalışmanız önerilir.
"Yeni Cihaz ekle"yi tıklayın.
Yayın cihazınızın arkasında basılı olan seri numarasını girin ve açıklayıcı bir ad verin. Seri numaranızı, Google Cast SDK Geliştirici Konsolu'na erişirken Chrome'da ekranınızı yayınlayarak da bulabilirsiniz
Alıcınızın ve cihazınızın teste hazır olması 5-15 dakika sürer. 5-15 dakika bekledikten sonra yayın cihazınızı yeniden başlatmanız gerekir.
5. Örnek uygulamayı çalıştırma
Yeni alıcı uygulamamızın teste hazır olmasını beklerken, tamamlanmış bir örnek alıcı uygulamasının nasıl göründüğüne bakalım. Oluşturacağımız alıcı, medyayı uyarlanabilir bit hızı akışını kullanarak oynatabilecek (HTTP üzerinden Dinamik Uyarlanabilir Akış için kodlanmış örnek içerik kullanacağız).
Tarayıcınızda Command and Control (CaC) aracını açın.
- CaC Aracımıza bakmalısınız.
- Varsayılan "CC1AD845"i kullanın örnek alıcı kimliğini seçin ve "Uygulama kimliğini ayarla"yı tıklayın düğmesini tıklayın.
- Sol üstteki Yayınla düğmesini tıklayıp Google Cast cihazınızı seçin.
- "Medya Yükle"ye gidin sekmesini tıklayın.
- "İçeriğe göre yükle"yi tıklayın düğmesini kullanabilirsiniz.
- Video, Google Cast cihazınızda oynatılmaya başlayarak Varsayılan Alıcı'yı kullanarak temel alıcı işlevlerinin nasıl görüneceğini gösterir.
6. Başlangıç projesini hazırlama
İndirdiğiniz başlangıç uygulamasına Google Cast desteği eklememiz gerekiyor. Bu codelab'de kullanacağımız Google Cast terminolojilerinden bazıları şunlardır:
- Mobil cihazda veya dizüstü bilgisayarda çalışan gönderen uygulaması,
- Google Cast cihazında çalışan bir alıcı uygulaması.
Favori metin düzenleyicinizi kullanarak başlangıç projesinin temelini oluşturmaya artık hazırsınız:
- İndirilen örnek koddan
app-start
dizinini seçin. js/receiver.js
veindex.html
uygulamalarını açın
Bu codelab üzerinde çalıştığınız sırada http-server
uygulamasının yaptığınız değişiklikleri alması gerektiğini unutmayın. Başlamazsa http-server
cihazını sonlandırıp yeniden başlatmayı deneyin.
Uygulama Tasarımı
Alıcı uygulama, Yayın oturumunu başlatır ve gönderenden bir YÜKLE isteği (diğer bir deyişle, medya parçası oynatma komutu) gelene kadar beklemede kalır.
Uygulama, index.html
içinde tanımlanmış bir ana görünüm ve alıcımızın çalışmasını sağlayacak tüm mantığı içeren js/receiver.js
adlı bir JavaScript dosyasından oluşur.
index.html
Bu html dosyası, alıcı uygulamamızın kullanıcı arayüzünü içerir. Şimdilik boş. Kod laboratuvarı boyunca bu alana ekleyeceğiz.
receiver.js
Bu komut dosyası, alıcı uygulamamızın tüm mantığını yönetir. Şu anda bu sadece boş bir dosya. Ancak bir sonraki bölümde sadece birkaç satır kodla bunu tam işlevli bir Cast alıcısına dönüştüreceğiz.
7. Temel bir Cast alıcı
Temel bir Cast alıcı, başlangıçta yayın oturumunu başlatır. Bu işlem, alıcıyı açan tüm bağlı gönderen uygulamalarına işlemin başarılı olduğunu bildirmek için gereklidir. Ayrıca yeni SDK, uyarlanabilir bit hızı akış medyasını (DASH, HLS ve Smooth Streaming kullanarak) ve basit MP4 dosyalarını işleyecek şekilde önceden yapılandırılmıştır. Şimdi bunu deneyelim.
Başlatma
Üstbilgideki index.html
öğesine aşağıdaki kodu ekleyin:
<head>
...
<script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
</head>
Alıcı SDK'ya, yeni eklediğiniz komut dosyasıyla birlikte gönderilen varsayılan alıcı kullanıcı arayüzünü görüntülemek için alan sağlamak amacıyla <footer>
yükleniyor receiver.js,
öncesinde index.html
<body>
öğesine aşağıdaki kodu ekleyin.
<cast-media-player></cast-media-player>
Şimdi şunlardan oluşan SDK'yı js/receiver.js
uygulamasında başlatmamız gerekiyor:
CastReceiverContext
, Alıcı SDK'sının tamamındaki birincil giriş noktanız olanPlayerManager
öğesine bir referans kaydetme, oynatma işlemini gerçekleştirme ve kendi özel mantığınızı eklemeniz için ihtiyacınız olan tüm kancaları sağlamaCastReceiverContext
üzerindestart()
çağırarak SDK başlatılıyor
Şunları ekleyin: js/receiver.js
.
const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
context.start();
8. "Temel" yayınlama video içeriği
Bu Codelab için CaC aracını kullanarak yepyeni alıcınızı deneyin.
Web tarayıcınızda Komut ve Denetim (CaC) Aracı'na gidin.
Alanda daha önce kaydettiğiniz kendi uygulama kimliğinizi değiştirdiğinizden emin olun ve "Uygulama kimliğini ayarla"yı tıklayın. Bu şekilde, araca Yayın oturumunu başlatırken alıcınızı kullanması için talimat verilir.
Medya yayınlanıyor
Yayın cihazında genel olarak medya oynatmak için aşağıdaki koşulların olması gerekir:
- Gönderen, Cast SDK'sından bir medya öğesini modelleyen
MediaInfo
JSON
nesnesi oluşturur. - Gönderen, alıcı uygulamayı başlatmak için yayın cihazına bağlanır.
- Alıcı, içeriği oynatmak için
LOAD
isteği aracılığıylaMediaInfo
nesnesini yükler. - Alıcı, medya durumunu izler ve takip eder.
- Gönderen, kullanıcının gönderen uygulamasıyla kurduğu etkileşimlere göre oynatmayı kontrol etmesi için alıcıya oynatma komutları gönderir.
Bu ilk temel denemede MediaInfo
öğesini bir oynanabilir öğe URL'si ile (MediaInfo.contentUrl
içinde depolanır) dolduracağız.
Gerçek bir gönderen, MediaInfo.contentId
ürününde uygulamaya özel bir medya tanımlayıcı kullanıyor. Alıcı, gerçek öğe URL'sini çözümlemek ve MediaInfo.contentUrl.
olarak ayarlamak için uygun arka uç API çağrılarını yapmak üzere tanımlayıcı olarak contentId
öğesini kullanır ve alıcı, DRM lisansı edinme veya reklam araları hakkında bilgi ekleme gibi görevleri de gerçekleştirir.
Alıcınızı da benzer bir işlem yapması için bir sonraki bölümde genişleteceğiz. Şimdilik Cast simgesini tıklayıp alıcınızı açmak için cihazınızı seçin.
"Medya Yükle"ye gidin sekmesini seçin ve "İçeriğe göre yükle"yi tıklayın. düğmesini tıklayın. Alıcınız örnek içeriği oynatmaya başlar.
Bu nedenle, Alıcı SDK'sı kullanıma hazır bir şekilde şunları yapar:
- Yayın oturumu başlatılıyor
- Oynatılabilir öğeler içeren gönderenlerden gelen
LOAD
isteklerini işleme - Büyük ekranda görüntülenmeye hazır temel bir oynatıcı kullanıcı arayüzü sağlayın.
Bir sonraki bölüme geçmeden önce CaC Aracı'nı ve kodunu inceleyebilirsiniz. Bu bölümde, gönderenlerden gelen LOAD
isteklerini yerine getirmek için alıcımızı basit bir örnek API ile konuşacak şekilde genişleteceğiz.
9. Harici bir API ile entegrasyon
Çoğu geliştiricinin gerçek dünyadaki uygulamalarda Yayın Alıcıları ile etkileşimine uygun olarak, oynatılabilir bir öğe URL'si üzerinden göndermek yerine, amaçlanan medya içeriğine API anahtarıyla referans veren LOAD
isteklerini ele alacak şekilde alıcımızı değiştireceğiz.
Uygulamalar bunu genellikle şu nedenlerden dolayı yapar:
- Gönderen, içerik URL'sini bilmiyor olabilir.
- Cast uygulaması, doğrudan alıcıdan kimlik doğrulama, diğer iş mantığı veya API çağrılarını işleyecek şekilde tasarlanmıştır.
Bu işlev temel olarak PlayerManager
setMessageInterceptor()
yönteminde uygulanır. Böylece gelen mesajlara türe göre müdahale edebilir ve bu mesajları SDK'nın dahili mesaj işleyicisine ulaşmadan önce değiştirebilirsiniz. Bu bölümde, aşağıdaki işlemleri gerçekleştireceğimiz LOAD
talepleriyle ilgileniyoruz:
- Gelen
LOAD
isteğini ve özelcontentId
isteğini okuyun. - Akışlı öğeyi
contentId
tarihine kadar aramak için API'mize birGET
çağrısı yapın. LOAD
isteğini akışın URL'siyle değiştirin.- Akış türü parametrelerini ayarlamak için
MediaInformation
nesnesini değiştirin. - İsteği, oynatma için SDK'ya iletin veya istenen medyayı bulamazsak komutu reddedin.
Sağlanan örnek API, SDK'nın genel alıcı görevlerini özelleştirmek için kancalarını gösterirken çoğunlukla kullanıma hazır bir deneyimi kullanmaya devam eder.
Örnek API
Tarayıcınızı https://storage.googleapis.com/cpe-sample-media/content.json adresine yönlendirin ve örnek video kataloğumuza göz atın. İçerik, hem DASH hem HLS akışlarının yanı sıra png biçimindeki poster resimlerinin URL'lerini içerir. DASH ve HLS akışları, parçalara ayrılmış mp4 kapsayıcılarında depolanan sesi kaldırılmış video ve ses kaynaklarını işaret eder.
{
"bbb": {
"author": "The Blender Project",
"description": "Grumpy Bunny is grumpy",
"poster": "https://[...]/[...]/BigBuckBunny/images/screenshot1.png",
"stream": {
"dash": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.mpd",
"hls": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.m3u8",
"title": "Big Buck Bunny"
},
"fbb_ad": {
"author": "Google Inc.",
"description": "Introducing Chromecast. The easiest way to enjoy [...]",
"poster": "https://[...]/[...]/ForBiggerBlazes/images/screenshot8.png",
"stream": {
"dash": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.mpd",
"hls": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.m3u8",
"title": "For Bigger Blazes"
},
[...]
}
Sonraki adımda, alıcı LOAD
isteğiyle çağrıldıktan sonra her bir girişin anahtarını (örneğin, bbb, fbb_ad
) akışın URL'siyle eşleyeceğiz.
LOAD isteğine müdahale et
Bu adımda, barındırılan JSON
dosyasına XHR
isteği gönderen bir işleve sahip bir yük önleyici oluşturacağız. JSON
dosyası alındıktan sonra içeriği ayrıştırıp meta verileri ayarlayacağız. Aşağıdaki bölümlerde, içerik türünü belirtmek için MediaInformation
parametrelerini özelleştireceğiz.
Aşağıdaki kodu js/receiver.js
dosyanıza, context.start()
çağrısından hemen önce ekleyin.
function makeRequest (method, url) {
return new Promise(function (resolve, reject) {
let xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
resolve(JSON.parse(xhr.response));
} else {
reject({
status: this.status,
statusText: xhr.statusText
});
}
};
xhr.onerror = function () {
reject({
status: this.status,
statusText: xhr.statusText
});
};
xhr.send();
});
}
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD,
request => {
return new Promise((resolve, reject) => {
// Fetch content repository by requested contentId
makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json').then(function (data) {
let item = data[request.media.contentId];
if(!item) {
// Content could not be found in repository
reject();
} else {
// Add metadata
let metadata = new
cast.framework.messages.GenericMediaMetadata();
metadata.title = item.title;
metadata.subtitle = item.author;
request.media.metadata = metadata;
// Resolve request
resolve(request);
}
});
});
});
Sonraki bölümde, DASH içeriği için yükleme isteğinin media
özelliğinin nasıl yapılandırılacağı açıklanır.
Örnek API DASH İçeriğini Kullanma
Artık yük engelleyiciyi hazırladığımıza göre alıcı için içerik türünü belirteceğiz. Bu bilgilerle alıcıya ana oynatma listesi URL'si ve akış MIME türü sağlanır. Aşağıdaki kodu, LOAD
aparatının Promise()
öğesindeki js/receiver.js dosyasına ekleyin:
...
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD,
request => {
return new Promise((resolve, reject) => {
...
} else {
// Adjusting request to make requested content playable
request.media.contentUrl = item.stream.dash;
request.media.contentType = 'application/dash+xml';
...
}
});
});
});
Bu adımı tamamladıktan sonra, DASH içeriğiyle yüklemeyi denemek için Test Etme'ye geçebilirsiniz. Bunun yerine, HLS içeriğiyle yüklemeyi test etmek istiyorsanız sonraki adıma göz atın.
Örnek API HLS İçeriğini Kullanma
Örnek API, DASH'in yanı sıra HLS içeriğini de içerir. Yükleme isteğinin, önceki adımda yaptığımız gibi contentType
değerini ayarlamanın yanı sıra örnek API'nin HLS URL'lerinin kullanılabilmesi için bazı ek özelliklere ihtiyacı vardır. Alıcı, HLS akışlarını oynatacak şekilde yapılandırıldığında beklenen varsayılan kapsayıcı türü aktarım akışıdır (TS). Sonuç olarak alıcı, yalnızca contentUrl
özelliği değiştirilirse örnek MP4 akışlarını TS biçiminde açmaya çalışır. Alıcının içeriğin TS değil MP4 türünde olduğunu bilmesi için, MediaInformation
nesnesinin ek özelliklerle değiştirilmesi gerekir. contentUrl
ve contentType
özelliklerini değiştirmek için yükleme önleyicide js/receiver.js dosyanıza aşağıdaki kodu ekleyin. Ayrıca, HlsSegmentFormat
ve HlsVideoSegmentFormat
özelliklerini ekleyin.
...
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD,
request => {
return new Promise((resolve, reject) => {
...
} else {
// Adjusting request to make requested content playable
request.media.contentUrl = item.stream.hls;
request.media.contentType = 'application/x-mpegurl';
request.media.hlsSegmentFormat = cast.framework.messages.HlsSegmentFormat.FMP4;
request.media.hlsVideoSegmentFormat = cast.framework.messages.HlsVideoSegmentFormat.FMP4;
...
}
});
});
});
Test Etme
Tekrar Komut ve Kontrol (CaC) Aracı'nı açın ve uygulama kimliğinizi alıcınızın uygulama kimliğine ayarlayın. Yayınla düğmesini kullanarak cihazınızı seçin.
"Medya Yükle"ye gidin sekmesinden erişebilirsiniz. Bu kez "İçerik URL'si"ndeki metni silin "İçeriğine Göre Yükle"nin yanındaki alan Bu düğme, uygulamamızı medyalarımıza yalnızca contentId
referansını içeren bir LOAD
isteği göndermeye zorlar.
Alıcıda yaptığınız değişikliklerle her şeyin düzgün çalıştığını varsayarsak müdahale aracının, MediaInfo
nesnesini SDK'nın ekranda oynatabileceği bir biçime dönüştürmesi gerekir.
"İçeriğe göre yükle"yi tıklayın düğmesini tıklayın. content.json dosyasında Content ID'yi başka bir kimlikle değiştirebilirsiniz.
10. Akıllı ekranlar için optimize etme
Akıllı ekranlar, alıcı uygulamaların dokunmatik kontrolleri desteklemesine olanak tanıyan dokunma işlevine sahip cihazlardır.
Bu bölümde, akıllı ekranlarda kullanıma sunulduğunda alıcı uygulamanızı nasıl optimize edeceğiniz ve oynatıcı kontrollerini nasıl özelleştireceğiniz açıklanmaktadır.
Kullanıcı Arayüzü Denetimlerine Erişme
Akıllı Ekranların Kullanıcı Arayüzü Kontrolleri nesnesine cast.framework.ui.Controls.GetInstance()
kullanılarak erişilebilir. Şu kodu js/receiver.js
dosyanızda context.start()
öğesinin üstüne ekleyin:
...
// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
context.start();
<cast-media-player> kullanmıyorsanız öğesi için CastReceiverOptions
içinde touchScreenOptimizedApp
değerini ayarlamanız gerekir. Bu codelab'de <cast-media-player> öğesine dokunun.
context.start({ touchScreenOptimizedApp: true });
Varsayılan kontrol düğmeleri, MetadataType
ve MediaStatus.supportedMediaCommands
temel alınarak her bir alana atanır.
Video Kontrolleri
MetadataType.MOVIE
, MetadataType.TV_SHOW
ve MetadataType.GENERIC
için Akıllı Ekranların Kullanıcı Arayüzü Denetimleri nesnesi, aşağıdaki örnekte olduğu gibi gösterilir.
--playback-logo-image
MediaMetadata.subtitle
MediaMetadata.title
MediaStatus.currentTime
MediaInformation.duration
ControlsSlot.SLOT_SECONDARY_1
:ControlsButton.QUEUE_PREV
ControlsSlot.SLOT_PRIMARY_1
:ControlsButton.SEEK_BACKWARD_30
PLAY/PAUSE
ControlsSlot.SLOT_PRIMARY_2
:ControlsButton.SEEK_FORWARD_30
ControlsSlot.SLOT_SECONDARY_2
:ControlsButton.QUEUE_NEXT
Ses Kontrolleri
MetadataType.MUSIC_TRACK
için Akıllı Ekranların Kullanıcı Arayüzü Kontrolleri nesnesi aşağıdaki gibi gösterilir:
--playback-logo-image
MusicTrackMediaMetadata.albumName
MusicTrackMediaMetadata.title
MusicTrackMediaMetadata.albumArtist
MusicTrackMediaMetadata.images[0]
MediaStatus.currentTime
MediaInformation.duration
ControlsSlot.SLOT_SECONDARY_1
:ControlsButton.NO_BUTTON
ControlsSlot.SLOT_PRIMARY_1
:ControlsButton.QUEUE_PREV
PLAY/PAUSE
ControlsSlot.SLOT_PRIMARY_2
:ControlsButton.QUEUE_NEXT
ControlsSlot.SLOT_SECONDARY_2
:ControlsButton.NO_BUTTON
Desteklenen Medya Komutlarını Güncelleme
Kullanıcı Arayüzü Denetimleri nesnesi, MediaStatus.supportedMediaCommands
öğesine bağlı olarak bir ControlsButton
öğesinin gösterilip gösterilmeyeceğini de belirler.
supportedMediaCommands
değeri ALL_BASIC_MEDIA
değerine eşit olduğunda varsayılan kontrol düzeni aşağıdaki gibi görünür:
supportedMediaCommands
değeri ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT
değerine eşit olduğunda varsayılan kontrol düzeni aşağıdaki gibi görünür:
supportedMediaCommands değeri PAUSE | QUEUE_PREV | QUEUE_NEXT
değerine eşit olduğunda, varsayılan kontrol düzeni aşağıdaki gibi görüntülenir:
Metin parçaları kullanılabildiğinde altyazı düğmesi SLOT_1
konumunda her zaman gösterilir.
Alıcı bağlamı başlattıktan sonra supportedMediaCommands
değerini dinamik olarak değiştirmek için PlayerManager.setSupportedMediaCommands
yöntemini çağırarak değeri geçersiz kılabilirsiniz. Ayrıca, addSupportedMediaCommands
kullanarak yeni bir komut ekleyebilir veya removeSupportedMediaCommands
ile mevcut bir komutu kaldırabilirsiniz.
Kontrol Düğmelerini Özelleştirme
PlayerDataBinder
kullanarak denetimleri özelleştirebilirsiniz. Kontrollerinizin ilk alanını ayarlamak için dokunmatik Kontroller’in altındaki js/receiver.js
dosyanıza aşağıdaki kodu ekleyin:
...
// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);
playerDataBinder.addEventListener(
cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
(e) => {
if (!e.value) return;
// Clear default buttons and re-assign
touchControls.clearDefaultSlotAssignments();
touchControls.assignButton(
cast.framework.ui.ControlsSlot.SLOT_PRIMARY_1,
cast.framework.ui.ControlsButton.SEEK_BACKWARD_30
);
});
context.start();
11. Medyaya göz atma özelliğini akıllı ekranlarda kullanma
Medyaya Göz Atma, kullanıcıların dokunmatik cihazlarda ek içerikleri keşfetmelerine olanak tanıyan bir CAF Alıcı özelliğidir. Bunu uygulamak için BrowseContent
kullanıcı arayüzünü ayarlamak üzere PlayerDataBinder
kullanmanız gerekir. Daha sonra, göstermek istediğiniz içeriğe göre bu sütunu BrowseItems
ile doldurabilirsiniz.
BrowseContent
Aşağıda BrowseContent
kullanıcı arayüzünün bir örneğini ve özelliklerini görebilirsiniz:
BrowseContent.title
BrowseContent.items
En Boy Oranı
Resim öğeleriniz için en iyi en boy oranını seçmek üzere targetAspectRatio property
özelliğini kullanın. CAF Alıcı SDK'sı üç en boy oranı destekler: SQUARE_1_TO_1
, PORTRAIT_2_TO_3
, LANDSCAPE_16_TO_9
.
BrowseItem
Her öğe için başlık, alt başlık, süre ve resim görüntülemek için BrowseItem
kullanın:
BrowseItem.image
BrowseItem.duration
BrowseItem.title
BrowseItem.subtitle
Medya Göz Atma verilerini ayarla
setBrowseContent
arayarak göz atabileceğiniz bir medya içeriği listesi sağlayabilirsiniz. Göz atma öğelerini "Sıradaki" başlığıyla ayarlamak için, playerDataBinder
altındaki js/receiver.js
dosyanıza ve MEDIA_CHANGED
etkinlik işleyicinize aşağıdaki kodu ekleyin.
// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);
...
let browseItems = getBrowseItems();
function getBrowseItems() {
let browseItems = [];
makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
.then(function (data) {
for (let key in data) {
let item = new cast.framework.ui.BrowseItem();
item.entity = key;
item.title = data[key].title;
item.subtitle = data[key].description;
item.image = new cast.framework.messages.Image(data[key].poster);
item.imageType = cast.framework.ui.BrowseImageType.MOVIE;
browseItems.push(item);
}
});
return browseItems;
}
let browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = browseItems;
browseContent.targetAspectRatio = cast.framework.ui.BrowseImageAspectRatio.LANDSCAPE_16_TO_9;
playerDataBinder.addEventListener(
cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
(e) => {
if (!e.value) return;
....
// Media browse
touchControls.setBrowseContent(browseContent);
});
Bir medya göz atma öğesini tıklamak, LOAD
müdahalesini tetikler. request.media.contentId
öğesini medya göz atma öğesindeki request.media.entity
ile eşlemek için LOAD
müdahale aracınıza aşağıdaki kodu ekleyin:
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD,
request => {
...
// Map contentId to entity
if (request.media && request.media.entity) {
request.media.contentId = request.media.entity;
}
return new Promise((resolve, reject) => {
...
});
});
Ayrıca, Medyalara Göz Atma kullanıcı arayüzünü kaldırmak için BrowseContent
nesnesini null
olarak ayarlayabilirsiniz.
12. Alıcı Uygulamalarında Hata Ayıklama
Cast Buyer SDK'sı, geliştiricilerin günlükleri kaydetmek için CastDebugLogger API'yi ve tamamlayıcı Command and Control (CaC) Aracı'nı kullanarak alıcı uygulamalarda kolayca hata ayıklaması için başka bir seçenek sunar.
Başlatma
API'yi dahil etmek için index.html dosyanıza CastDebugLogger
kaynak komut dosyasını ekleyin. Kaynak, <head> bölümünde belirtilmelidir. etiketinden sonra gelir.
<head>
...
<script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<!-- Cast Debug Logger -->
<script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>
CastDebugLogger
örneğini almak ve günlük kaydediciyi etkinleştirmek için dosyanın üst kısmındaki js/receiver.js
alanında ve playerManager
öğesinin altına aşağıdaki kodu ekleyin:
const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
if (!castDebugLogger.debugOverlayElement_) {
castDebugLogger.setEnabled(true);
}
});
Hata ayıklayıcı günlük kaydı etkinleştirildiğinde alıcıda DEBUG MODE
görüntüleyen bir yer paylaşımı gösterilir.
Oynatıcı Etkinliklerini Günlüğe Kaydet
CastDebugLogger
kullanarak, CAF Alıcı SDK'sı tarafından tetiklenen oynatıcı etkinliklerini kolayca kaydedebilir ve etkinlik verilerini günlüğe kaydetmek için farklı logger düzeyleri kullanabilirsiniz. loggerLevelByEvents
yapılandırması, hangi etkinliklerin günlüğe kaydedileceğini belirtmek için cast.framework.events.EventType
ve cast.framework.events.category
öğelerini kullanır.
Bir CORE
oynatıcısı etkinliği tetiklendiğinde veya mediaStatus
değişikliği yayınlandığında günlüğe kaydetmek için castDebugLogger
bildiriminin altına aşağıdaki kodu ekleyin:
// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
if (!castDebugLogger.debugOverlayElement_) {
castDebugLogger.setEnabled(true);
}
});
// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}
Günlük Mesajları ve Özel Etiketler
CastDebugLogger API, alıcı hata ayıklama yer paylaşımında farklı renklerle gösterilen günlük mesajları oluşturmanızı sağlar. Aşağıdaki günlük yöntemleri, en öncelikliden en az öncelikliye doğru sıralanmış şekilde kullanılabilir:
castDebugLogger.error(custom_tag, message);
castDebugLogger.warn(custom_tag, message);
castDebugLogger.info(custom_tag, message);
castDebugLogger.debug(custom_tag, message);
Her günlük yöntemi için ilk parametre bir özel etikettir. Bu, anlamlı bulduğunuz herhangi bir tanımlayıcı dize olabilir. CastDebugLogger
, günlükleri filtrelemek için etiketleri kullanır. Etiketlerin kullanımı aşağıda ayrıntılı olarak açıklanmıştır. İkinci parametre log Message'dır.
Günlükleri çalışırken göstermek için LOAD
müdahalecinize günlükleri ekleyin.
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD,
request => {
castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request');
// Map contentId to entity
if (request.media && request.media.entity) {
request.media.contentId = request.media.entity;
}
return new Promise((resolve, reject) => {
// Fetch content repository by requested contentId
makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
.then(function (data) {
let item = data[request.media.contentId];
if(!item) {
// Content could not be found in repository
castDebugLogger.error(LOG_TAG, 'Content not found');
reject();
} else {
// Adjusting request to make requested content playable
request.media.contentUrl = item.stream.dash;
request.media.contentType = 'application/dash+xml';
castDebugLogger.warn(LOG_TAG, 'Playable URL:', request.media.contentUrl);
// Add metadata
let metadata = new cast.framework.messages.MovieMediaMetadata();
metadata.metadataType = cast.framework.messages.MetadataType.MOVIE;
metadata.title = item.title;
metadata.subtitle = item.author;
request.media.metadata = metadata;
// Resolve request
resolve(request);
}
});
});
});
loggerLevelByTags
içinde her bir özel etiket için günlük düzeyini ayarlayarak hata ayıklama yer paylaşımında hangi mesajların görüneceğini kontrol edebilirsiniz. Örneğin, cast.framework.LoggerLevel.DEBUG
günlük düzeyinde özel bir etiket etkinleştirildiğinde hata, uyarı, bilgi ve hata ayıklama günlük mesajlarıyla eklenen tüm mesajlar gösterilir. WARNING
düzeyinde bir özel etiket etkinleştirildiğinde yalnızca hata ve günlük mesajları görüntülenir.
loggerLevelByTags
yapılandırması isteğe bağlıdır. Özel etiket, günlük kaydedici düzeyi için yapılandırılmazsa tüm günlük mesajları hata ayıklama yer paylaşımında gösterilir.
CORE
olay günlüğü kaydedicisinin altına aşağıdaki kodu ekleyin:
// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}
// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
[LOG_TAG]: cast.framework.LoggerLevel.DEBUG,
};
Hata Ayıklama Yer Paylaşımı
Yayın Hata Ayıklama Günlükçüsü, özel günlük mesajlarınızı yayın cihazında görüntülemek için alıcıda bir hata ayıklama yer paylaşımı sağlar. Yer paylaşımındaki hata ayıklama yer paylaşımını açmak/kapatmak için showDebugLogs
tuşunu, yer paylaşımındaki günlük mesajlarını temizlemek için clearDebugLogs
simgesini kullanın.
Hata ayıklama yer paylaşımını alıcınızda önizlemek için aşağıdaki kodu ekleyin.
context.addEventListener(cast.framework.system.EventType.READY, () => {
if (!castDebugLogger.debugOverlayElement_) {
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
castDebugLogger.setEnabled(true);
// Show debug overlay
castDebugLogger.showDebugLogs(true);
// Clear log messages on debug overlay
castDebugLogger.clearDebugLogs();
}
});
13. Tebrikler
Artık Cast Web Receiver SDK'sını kullanarak özel web alıcı uygulaması oluşturmayı biliyorsunuz.
Daha fazla bilgi için Web Receiver (Web Alıcısı) geliştirici kılavuzuna bakın.