1. Genel Bakış
Bu codelab'de, Cast özellikli cihazlarda içerik oynatmak için nasıl Özel Web Alıcısı uygulaması oluşturacağınızı öğreneceksiniz.
Google Cast nedir?
Google Cast, kullanıcıların mobil cihazdan TV'ye içerik yayınlamasına olanak tanır. Kullanıcılar, mobil cihazlarını veya masaüstü Chrome Tarayıcı'larını TV'de medya oynatmak için uzaktan kumanda olarak kullanabilir.
Google Cast SDK'sı, uygulamanızın Google Cast özellikli cihazları (ör. 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 öngörülebilir hale getirmek için sağlanmıştır. Daha fazla bilgi için bu sayfayı inceleyin.
Ne oluşturacağız?
Bu kod laboratuvarını tamamladığınızda, Cast özellikli cihazlarda video içeriği görüntüleyebilen kendi özel alıcınız olarak işlev görecek bir HTML5 uygulamanız olur.
Neler öğreneceksiniz?
- Alıcı geliştirme için nasıl hazırlanılır?
- Cast Uygulama Çerçevesi'ne dayalı Cast özellikli alıcıyla ilgili temel bilgiler.
- Yayınlanan videoyu alma.
- Hata Ayıklama Günlüğün'ü entegre etme.
- Alıcınızı akıllı ekranlar için optimize etme.
İhtiyacınız olanlar
- En son Google Chrome tarayıcısı.
- Firebase Hosting veya ngrok gibi bir HTTPS barındırma hizmeti.
- İnternet erişimi yapılandırılmış bir Chromecast veya Android TV gibi bir Google Cast cihazı.
- HDMI girişi olan bir TV veya monitör.
Deneyim
- Web geliştirme konusunda bilgi sahibi olmanız gerekir.
- Ayrıca TV izleme konusunda bilgi sahibi olmanız gerekir.
Bu eğitimi nasıl kullanacaksı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ı açın.
3. Alıcınızı yerel olarak dağıtma
Web alıcınızı bir Cast cihazıyla kullanabilmek için Cast 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
Tercih ettiğiniz hizmeti ayarladıktan sonra app-start
bölümüne gidin ve sunucunuzu başlatın.
Barındırılan alıcınızın URL'sini not edin. Bu adı sonraki bölümde kullanacaksınız.
4. Cast Developer Console'a bir uygulama kaydetme
Bu codelab'de oluşturulan özel bir alıcıyı Chromecast cihazlarda çalıştırabilmek için uygulamanızı kaydetmeniz gerekir. Uygulamanızı kaydettikten sonra, gönderen uygulamanızın API çağrıları yapmak (ör. alıcı uygulamasını başlatmak) 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. Şu anda bunu oluşturuyoruz.
Yeni alıcınızın ayrıntılarını girin. Elde ettiğiniz 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ınladıktan sonra tüm Google Cast cihazlarda kullanılabilir. Bu kod laboratuvarının amacı doğrultusunda, yayınlanmamış bir alıcı uygulamasıyla çalışmanız önerilir.
"Yeni Cihaz ekle"yi tıklayın.
Yayın cihazınızın arkasındaki seri numarasını girin ve cihaza 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 Cast 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ış örnek bir alıcı uygulamasının nasıl göründüğüne göz atalı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ızı görürsünüz.
- Varsayılan "CC1AD845" örnek alıcı kimliğini kullanın ve "Uygulama Kimliğini Ayarla" düğmesini tıklayın.
- Sol üstteki Cast düğmesini tıklayın ve Google Cast cihazınızı seçin.
- En üstteki "Medya Yükle" sekmesine gidin.
- Sana Özel bölümündeki bir videoyu oynatmak için "İçeriğe göre yükle" düğmesini tıklayın.
- Varsayılan alıcı kullanılarak temel alıcı işlevinin nasıl göründüğünü göstermek için video Google Cast cihazınızda oynatılmaya başlar.
6. Başlangıç projesini hazırlama
İndirdiğiniz başlangıç uygulamasına Google Cast desteği eklememiz gerekiyor. Bu kod laboratuvarında kullanacağımız bazı Google Cast terimleri şunlardır:
- Mobil cihazda veya dizüstü bilgisayarda bir gönderen uygulaması çalışır,
- Google Cast cihazında bir alıcı uygulaması çalışır.
Artık favori metin düzenleyicinizi kullanarak bir başlangıç projesi oluşturmaya hazırsınız:
- İndirilen örnek koddan
app-start
dizinini seçin. js/receiver.js
veindex.html
uygulamalarını açın
Bu kod laboratuvarını çalıştırırken http-server
'ün yaptığınız değişiklikleri algıladığını unutmayın. Başlamazsa http-server
cihazını sonlandırıp yeniden başlatmayı deneyin.
Uygulama Tasarımı
Alıcı uygulama, Cast oturumunu başlatır ve bir gönderenden LOAD isteği (yani bir medya parçasının oynatılmasıyla ilgili komut) 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çerecek. Şu anda boş olan bu dosyaya kod laboratuvarının ilerleyen aşamalarında içerik ekleyeceğiz.
receiver.js
Bu komut dosyası, alıcı uygulamamızın tüm mantığını yönetecektir. Şu anda boş bir dosyadır ancak sonraki bölümde birkaç kod satırı ekleyerek tamamen işlevsel bir Cast alıcısına dönüştüreceğiz.
7. Temel bir Cast alıcısı
Temel bir Cast alıcı, başlangıçta Cast oturumunu başlatır. Bu, bağlı tüm gönderen uygulamalarına alıcının başarıyla açıldığını bildirmek için gereklidir. Ayrıca yeni SDK, uyarlanabilir bit hızı akış medyasını (DASH, HLS ve Smooth Streaming kullanılarak) ve düz MP4 dosyalarını kutudan çıktığı anda işlemek için önceden yapılandırılmıştır. Bunu deneyelim.
İlk kullanıma hazırlama
Üstbilgideki index.html
alanına 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ü getirmek 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, SDK'yı js/receiver.js
içinde başlatmamız gerekiyor. Bu işlem için şunları yapmamız gerekir:
- Alıcı SDK'sının tamamına yönelik birincil giriş noktanız olan
CastReceiverContext
referansını edinme - Oynatma işlemini yöneten
PlayerManager
nesnesine referans depolama ve kendi özel mantığınızı takmak için ihtiyaç duyduğunuz tüm bağlantı noktalarını sağlama CastReceiverContext
üzerindestart()
çağrısı yaparak SDK'yı başlatma
Aşağıdakileri js/receiver.js
alanına ekleyin.
const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
context.start();
8. "Temel" video içeriğini yayınlama
Bu Codelab'de, yeni alıcınızı denemek için CaC aracını kullanın.
Web tarayıcınızı Komuta ve Kontrol (CaC) Aracı'na yönlendirin.
Alanda daha önce kaydettiğiniz kendi uygulama kimliğinizi eklediğinizden emin olun ve "Uygulama Kimliği Ayarla"yı tıklayın. Bu işlem, alıcınızı Cast oturumunu başlatırken kullanması için araca talimat verir.
Medya yayınlanıyor
Genel olarak, Cast cihazında medya oynatmak için aşağıdakilerin gerçekleşmesi gerekir:
- Gönderen, Cast SDK'sından bir medya öğesini modelleyen bir
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, oynatmayı kullanıcının gönderen uygulamasıyla etkileşimlerine göre kontrol etmek için alıcıya oynatma komutları gönderir.
Bu ilk temel denemede MediaInfo
'ü oynatılabilir bir öğe URL'siyle (MediaInfo.contentUrl
içinde depolanır) dolduracağız.
Gerçek bir gönderen, MediaInfo.contentId
alanında uygulamaya özel bir medya tanımlayıcısı kullanır. Alıcı, gerçek öğe URL'sini çözmek ve MediaInfo.contentUrl.
olarak ayarlamak için uygun arka uç API çağrıları yapmak üzere contentId
'yi tanımlayıcı olarak kullanır. Alıcı, DRM lisansı edinme veya reklam araları hakkında bilgi ekleme gibi görevleri de üstlenir.
Bir sonraki bölümde, alıcınızı tam olarak bu şekilde bir işlem yapması için 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" sekmesine gidin ve "İçeriğe göre yükle" düğmesini tıklayın. Alıcınız, örnek içeriği oynatmaya başlar.
Bu nedenle, Receiver SDK'sı kutudan çıktığı anda şunları yönetir:
- Yayınlama oturumunu başlatma
- Oynatılabilecek öğeler içeren gönderenlerden gelen
LOAD
isteklerini işleme - Büyük ekranda gösterilmeye 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 keşfedebilirsiniz. Bu bölümde, alıcımızı, gönderenlerden gelen LOAD
isteklerini yerine getirmek için basit bir örnek API ile konuşacak şekilde genişleteceğiz.
9. Harici bir API ile entegrasyon
Çoğu geliştiricinin gerçek uygulamalarda Cast alıcılarıyla etkileşim şekline uygun olarak, alıcımızı oynatılabilir öğe URL'si göndermek yerine istenen medya içeriğine API anahtarıyla atıfta bulunan LOAD
isteklerini işleyecek şekilde değiştireceğiz.
Uygulamalar genellikle şu nedenlerle bu işlemi yapar:
- Gönderen, içerik URL'sini bilmiyor olabilir.
- Cast uygulaması, kimlik doğrulama, diğer iş mantığı veya API çağrılarını doğrudan alıcıda işlemek için tasarlanmıştır.
Bu işlev, birincil olarak PlayerManager
setMessageInterceptor()
yönteminde uygulanır. Bu sayede, gelen iletileri türe göre durdurabilir ve SDK'nın dahili mesaj işleyicisine ulaşmadan önce değiştirebilirsiniz. Bu bölümde, aşağıdakileri yapacağımız LOAD
istekleriyle ilgileniyoruz:
- Gelen
LOAD
isteğini ve özelcontentId
değerini okuyun. - Aktarılabilir öğeyi
contentId
değerine göre aramak için API'mizeGET
çağrısı gönderin. LOAD
isteğini, yayını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ı bulamıyorsak komutu reddedin.
Sağlanan örnek API, SDK'nın genel alıcı görevlerini özelleştirmek için kullandığı kancaları gösterirken çoğunlukla kullanıma hazır bir deneyim sunar.
Örnek API
Tarayıcınızı https://storage.googleapis.com/cpe-sample-media/content.json adresine yönlendirip ö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, birleştirilmemiş video ve ses kaynaklarını gösterir.
{
"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ı bir LOAD
isteğiyle çağrıldıktan sonra her girişin anahtarını (örneğin, bbb, fbb_ad
) aktarımın URL'siyle eşleştiririz.
LOAD isteğine müdahale etme
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ır ve meta verileri ayarları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
mülkünün nasıl yapılandırılacağı açıklanmaktadır.
Örnek API DASH İçeriği'ni kullanma
Yükleyiciyi hazırladığımıza göre, alıcıya içerik türünü belirteceğiz. Bu bilgiler, alıcıya ana oynatma listesi URL'sini ve akış MIME türünü sağlar. LOAD
engelleyicinin Promise()
klasöründeki js/receiver.js dosyasına aşağıdaki kodu 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'ın yanı sıra HLS içeriği de içerir. Önceki adımda yaptığımız gibi contentType
değerini ayarlamanın yanı sıra, örnek API'nin HLS URL'lerini kullanmak için yükleme isteğinin bazı ek özelliklere ihtiyacı vardır. Alıcı, HLS akışlarını oynatacak şekilde yapılandırıldığında, beklenen varsayılan container türü aktarım akışıdır (TS). Sonuç olarak alıcı, yalnızca contentUrl
mülkü değiştirilirse örnek MP4 akışlarını TS biçiminde açmaya çalışır. Yükleme isteğinde, MediaInformation
nesnesi ek özelliklerle değiştirilmelidir. Böylece alıcı, içeriğin TS değil MP4 türü olduğunu bilir. 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. Cast düğmesini kullanarak cihazınızı seçin.
"Medya Yükle" sekmesine gidin. Bu kez, "İçeriğe göre yükle" düğmesinin yanındaki "İçerik URL'si" alanındaki metni silin. Bu işlem, uygulamamızın yalnızca medyamıza ait contentId
referansını içeren bir LOAD
isteği göndermesini zorunlu kılar.
Alıcıda yaptığınız değişikliklerin sorunsuz çalıştığını varsayarsak MediaInfo
nesnesini SDK'nın ekranda oynatabileceği bir şeye dönüştürme işlemini engelleyici üstlenir.
Medyanızın düzgün oynatılıp oynatılmadığını görmek için "İçeriğe göre yükle" 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 optimizasyon
Akıllı ekranlar, alıcı uygulamaların dokunmatik kontrolleri desteklemesine olanak tanıyan dokunma işlevine sahip cihazlardır.
Bu bölümde, alıcı uygulamanızı akıllı ekranlarda başlatırken 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 için kullanıcı arayüzü denetimleri nesnesine cast.framework.ui.Controls.GetInstance()
kullanılarak erişilebilir. js/receiver.js
dosyanıza context.start()
'un üstüne aşağıdaki kodu ekleyin:
...
// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
context.start();
<cast-media-player> öğesini kullanmıyorsanız CastReceiverOptions
içinde touchScreenOptimizedApp
değerini ayarlamanız gerekir. Bu codelab'de <cast-media-player> öğesini kullanıyoruz.
context.start({ touchScreenOptimizedApp: true });
Varsayılan kontrol düğmeleri, MetadataType
ve MediaStatus.supportedMediaCommands
'a göre her yuvaya atanır.
Video Kontrolleri
MetadataType.MOVIE
, MetadataType.TV_SHOW
ve MetadataType.GENERIC
için Akıllı Ekranlar'a yönelik kullanıcı arayüzü denetimleri nesnesi aşağıdaki örnekte gösterildiği gibi görüntülenir.
--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'a yönelik kullanıcı arayüzü denetimleri 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ü kontrolleri nesnesi, MediaStatus.supportedMediaCommands
'a bağlı olarak ControlsButton
'ün gösterilip gösterilmeyeceğini de belirler.
supportedMediaCommands
değeri ALL_BASIC_MEDIA
'a eşit olduğunda varsayılan kontrol düzeni aşağıdaki gibi gösterilir:
supportedMediaCommands
değeri ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT
'a eşit olduğunda varsayılan kontrol düzeni aşağıdaki gibi gösterilir:
supportedMediaCommands değerinin PAUSE | QUEUE_PREV | QUEUE_NEXT
olduğu durumlarda varsayılan kontrol düzeni aşağıdaki gibi görünür:
Metin parçaları mevcut olduğunda altyazı düğmesi her zaman SLOT_1
konumunda gösterilir.
Alıcı bağlamı başlattıktan sonra supportedMediaCommands
değerini dinamik olarak değiştirmek için değeri geçersiz kılmak üzere PlayerManager.setSupportedMediaCommands
işlevini çağırabilirsiniz. Ayrıca addSupportedMediaCommands
kullanarak yeni bir komut ekleyebilir veya removeSupportedMediaCommands
kullanarak mevcut bir komutu kaldırabilirsiniz.
Kontrol Düğmelerini Özelleştirme
PlayerDataBinder
simgesini kullanarak kontrolleri ö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. Akıllı ekranlarda medyaya göz atma özelliğini uygulama
Medya Göz Atma, kullanıcıların dokunmatik cihazlarda ek içerikleri keşfetmesine olanak tanıyan bir CAF alıcı özelliğidir. Bunu uygulamak için BrowseContent
kullanıcı arayüzünü ayarlamak üzere PlayerDataBinder
öğesini kullanırsınız. Ardından, görüntülemek istediğiniz içeriğe göre BrowseItems
ile doldurabilirsiniz.
BrowseContent
Aşağıda BrowseContent
kullanıcı arayüzü ve özellikleri gösterilmektedir:
BrowseContent.title
BrowseContent.items
En Boy Oranı
Resim öğeleriniz için en iyi en boy oranını seçmek üzere targetAspectRatio property
simgesini kullanın. CAF Receiver SDK'sı üç en boy oranını destekler: SQUARE_1_TO_1
, PORTRAIT_2_TO_3
, LANDSCAPE_16_TO_9
.
BrowseItem
Her öğenin başlığını, alt başlığını, süresini ve resmini görüntülemek için BrowseItem
simgesini kullanın:
BrowseItem.image
BrowseItem.duration
BrowseItem.title
BrowseItem.subtitle
Medya Göz Atma verilerini ayarlama
setBrowseContent
numaralı telefonu arayarak göz atabileceğiniz medya içeriklerinin listesini sağlayabilirsiniz. Göz atma öğelerini "Sonraki" başlıklı bir şekilde ayarlamak için aşağıdaki kodu playerDataBinder
dosyanızdaki playerDataBinder
öğesinin altına ve MEDIA_CHANGED
etkinlik dinleyicinize ekleyin.js/receiver.js
// 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ıkladığınızda LOAD
müdahaleci tetiklenir. Medya göz atma öğesinden request.media.contentId
öğesini request.media.entity
ile eşlemek için LOAD
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) => {
...
});
});
Medya Göz Atma kullanıcı arayüzünü kaldırmak için BrowseContent
nesnesini null
olarak da ayarlayabilirsiniz.
12. Alıcı uygulamalarında hata ayıklama
Cast Receiver SDK'sı, geliştiricilerin CastDebugLogger API'yi ve günlükleri yakalamak için tamamlayıcı bir Komut ve Kontrol (CaC) Aracı kullanarak alıcı uygulamalarında kolayca hata ayıklama yapmalarına olanak tanır.
Başlatma
API'yi dahil etmek için index.html dosyanıza CastDebugLogger
kaynak komut dosyasını ekleyin. Kaynak, Cast Receiver SDK beyanının ardından <head> etiketinde belirtilmelidir.
<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>
Dosyanın en üstündeki js/receiver.js
içinde ve playerManager
'un altına CastDebugLogger
örneğini almak ve günlüğe kaydediciyi etkinleştirmek için 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 kaydetme
CastDebugLogger
'ü kullanarak CAF Receiver SDK'sı tarafından tetiklenen oynatıcı etkinliklerini kolayca günlüğe kaydedebilir ve etkinlik verilerini günlüğe kaydetmek için farklı günlük kaydı 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 oynatıcı CORE
etkinliği tetiklendiğinde veya mediaStatus
değişikliği yayınlandığında günlüğe kaydetmek için castDebugLogger
beyanının 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örünen günlük mesajları oluşturmanıza olanak tanır. Aşağıdaki günlük yöntemleri kullanılabilir. Öncelik sırasına göre en yüksekten en düşüğe doğru listelenmiştir:
castDebugLogger.error(custom_tag, message);
castDebugLogger.warn(custom_tag, message);
castDebugLogger.info(custom_tag, message);
castDebugLogger.debug(custom_tag, message);
Her günlük kaydı yönteminde ilk parametre bir özel etikettir. Bu, anlamlı bulduğunuz herhangi bir tanımlayıcı dize olabilir. CastDebugLogger
, günlükleri filtrelemek için etiketler kullanır. Etiketlerin kullanımı aşağıda ayrıntılı olarak açıklanmıştır. İkinci parametre günlük mesajıdır.
Günlükleri çalışırken göstermek için LOAD
arayıcınıza günlük 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);
}
});
});
});
Her özel etiket için loggerLevelByTags
'te günlük düzeyini ayarlayarak hata ayıklama yer paylaşımında hangi mesajların gösterileceğini kontrol edebilirsiniz. Örneğin, cast.framework.LoggerLevel.DEBUG
günlük düzeyine sahip bir özel 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 uyarı günlük mesajları gösterilir.
loggerLevelByTags
yapılandırması isteğe bağlıdır. Bir özel etiket, günlük kaydı düzeyi için yapılandırılmamışsa 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şımlı Reklamı
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. Hata ayıklama yer paylaşımını açmak için showDebugLogs
, yer paylaşımındaki günlük mesajlarını silmek 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 bir web alıcısı uygulaması oluşturmayı biliyorsunuz.
Daha fazla bilgi için Web Alıcısı geliştirici kılavuzuna bakın.