1. Genel bakış
Bu codelab'de, Cast uyumlu cihazlarda içerik oynatmak için nasıl Özel Web Alıcısı uygulaması oluşturulacağını öğreteceksiniz.
Google Cast nedir?
Google Cast, kullanıcıların bir mobil cihazdan TV'ye içerik yayınlamasına olanak tanır. Böylece kullanıcılar, TV'de medya oynatmak için mobil cihazlarını veya masaüstü Chrome Tarayıcısını uzaktan kumanda olarak 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 uygun olarak 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.
Neyi inşa edeceğiz?
Bu codelab'i tamamladığınızda, Cast uyumlu cihazlarda video içeriği görüntüleyebilen, kendi özel alıcınız olarak çalışan bir HTML5 uygulamanız olacaktır.
Neler öğreneceksiniz?
- Alıcı geliştirme için gerekli ayarları yapma.
- Cast Uygulama Çerçevesi'ne dayalı, Cast uyumlu bir alıcıyla ilgili temel bilgiler.
- Yayınlanan video nasıl alınır?
- Hata Ayıklama Kaydedici'yi entegre etme.
- Alıcınızı akıllı ekranlar için optimize etme.
Gerekenler
- En son Google Chrome tarayıcı.
- Firebase Hosting veya ngrok gibi HTTPS barındırma hizmetleri.
- İnternet erişimi olan, Chromecast veya Android TV gibi bir Google Cast cihazı.
- HDMI girişi olan bir TV veya monitör.
Deneyim
- Web geliştirme konusunda önceden bilgi sahibi olmanız gerekir.
- Ayrıca TV izleme konusunda da önceden bilgi sahibi olmanız gerekir :)
Bu eğiticiyi nasıl kullanacaksınız?
Web uygulamaları oluşturma deneyiminizi nasıl değerlendirirsiniz?
TV izleme deneyiminizi nasıl değerlendirirsiniz?
2. Örnek kodu alın
Örnek kodun tamamını bilgisayarınıza indirebilirsiniz...
indirilen zip dosyasını açın.
3. Alıcınızı yerel olarak dağıtma
Web alıcınızı bir Yayın cihazıyla kullanabilmek için yayın cihazınızın, yayın cihazınızın erişebileceği bir yerde barındırılması gerekir. https'yi destekleyen bir sunucunuz zaten varsa aşağıdaki talimatları atlayın ve bir sonraki bölümde ihtiyaç duyacağınızdan URL'yi not edin.
Kullanabileceğiniz bir sunucunuz yoksa Firebase Hosting veya ngrok'u kullanabilirsiniz.
Sunucuyu çalıştırma
İstediğiniz hizmeti ayarladıktan sonra app-start
adresine gidip sunucunuzu başlatın.
Barındırılan alıcınızın URL'sini not edin. Bu adı bir sonraki bölümde kullanacaksınız.
4. Cast Developer Console'da bir uygulamayı kaydetme
Chromecast cihazlarda bu codelab'de yerleşik olarak bulunan özel bir 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ı gerçekleştirmek (ör. bir alıcı uygulamayı 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. Geliştiriyoruz.
Yeni alıcınızın bilgilerini girin. Son aldığınız URL'yi kullandığınızdan emin olun
ele alacağız. Yeni alıcınıza atanan Uygulama Kimliğini not edin.
Yayınlamadan önce alıcı uygulamanıza erişebilmesi için Google Cast cihazınızı da kaydettirmeniz gerekir. Alıcı uygulamanız yayınlandıktan sonra tüm Google Cast cihazlarında kullanılabilir hale gelir. 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 Developer Console'a erişirken ekranınızı Chrome'da yayınlayarak da bulabilirsiniz.
Alıcınızın ve cihazınızın test için 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 test için hazır olmasını beklerken örnek bir tamamlanmış alıcı uygulamasının nasıl göründüğüne bakalım. Oluşturacağımız alıcı, uyarlanabilir bit hızı akışını kullanarak medyayı oynatabilecektir (HTTP üzerinden Dinamik Uyarlanabilir Akış için kodlanmış örnek içerik kullanacağız).
Tarayıcınızda Komut ve Denetim (CaC) Aracı'nı açın.
- CaC Aracımızı görmeniz gerekir.
- Varsayılan "CC1AD845" örnek alıcı kimliğini kullanın ve "Uygulama kimliğini ayarla" düğmesini tıklayın.
- Sol üstteki Yayınla düğmesini tıklayın ve Google Cast cihazınızı seçin.
- Üstteki "Medya Yükle" sekmesine gidin.
- Örnek bir video oynatmak için "İçeriğe Göre Yükle" düğmesini tıklayın.
- Video, Varsayılan Alıcı kullanılırken temel alıcı işlevinin nasıl göründüğünü göstermek için 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 codelab'de kullanacağımız bazı Google Cast terminolojisi şöyledir:
- Mobil cihazda veya dizüstü bilgisayarda çalışan bir gönderen uygulaması ise
- Google Cast cihazında bir alıcı uygulaması çalışır.
Artık favori metin düzenleyicinizi kullanarak başlangıç projesinin temellerini oluşturmaya hazırsınız:
- Örnek kod indirdiğinizden
app-start
dizinini seçin. js/receiver.js
veindex.html
uygulamasını açın.
Bu codelab'de çalışırken http-server
uygulamasının yaptığınız değişiklikleri alması gerektiğini unutmayın. Sorun çıkmadığını fark ederseniz http-server
aracını sonlandırıp yeniden başlatmayı deneyin.
Uygulama Tasarımı
Alıcı uygulama, Yayın oturumunu başlatır ve bir gönderenden YÜKLE isteği (diğer bir deyişle, bir medya parçasını oynatma komutu) gelene kadar bekleme modunda 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ğlamak için gereken 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 dosyaya eklenecek.
receiver.js
Bu komut dosyası, alıcı uygulamamızın tüm mantığını yönetecek. Şu anda yalnızca boş bir dosya, ancak bir sonraki bölümde sadece birkaç satır kodla bunu tam olarak çalışan bir Cast alıcısına dönüştüreceğiz.
7. Temel bir Yayın alıcı
Temel bir Yayın alıcısı başlangıçta Yayın oturumunu başlatır. Bu, tüm bağlı gönderen uygulamalarına, alıcının başarıyla ulaştığını bildirmek için gereklidir. Ek olarak, yeni SDK, uyarlanabilir bit hızı akış medyalarını (DASH, HLS ve Smooth Streaming kullanarak) ve kullanıma hazır olarak düz MP4 dosyalarını işleyecek şekilde önceden yapılandırılmış olarak sunulur. Şimdi bunu deneyelim.
Başlatma
Başlıktaki index.html
öğesine şu 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 gönderilen varsayılan alıcı kullanıcı arayüzünü açması için alan sağlamak amacıyla aşağıdaki kodu index.html
adlı <footer>
yüklemesinden <body>
önce receiver.js,
ekleyin.
<cast-media-player></cast-media-player>
Şimdi SDK'yı js/receiver.js
dilinde başlatmamız gerekiyor. Bu işlemler şunlardır:
CastReceiverContext
için referans alırken tüm Alıcı SDK'nız için birincil giriş noktanız olur.PlayerManager
için referans saklayarak, oynatmayı işlemeyi sağlayan ve kendi özel mantığınızı eklemek için ihtiyacınız olan tüm kancaları sunan nesnedir.CastReceiverContext
üzerindestart()
çağrısıyla SDK'yı başlatma
Aşağıdakileri js/receiver.js
reklam grubuna ekleyin.
const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
context.start();
8. "Temel" video içeriğini yayınlama
Bu Codelab'in amacı doğrultusunda, yepyeni alıcınızı denemek için CaC Aracı'nı kullanın.
Web tarayıcınızda Komut ve Denetim (CaC) Aracı'na gidin.
Kendi Uygulama Kimliğinizi, alanda daha önce kayıtlı olduğu şekliyle değiştirdiğinizden emin olun ve "Uygulama Kimliğini Ayarla"yı tıklayın. Bu, araca Yayın oturumunu başlatırken alıcınızı kullanması için talimat verir.
Medya yayınlanıyor
Yüksek bir düzeyde, bir yayın cihazında medya oynatmak için aşağıdakilerin gerçekleşmesi gerekir:
- Gönderen, Cast SDK'dan 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
MediaInfo
nesnesiniLOAD
isteği üzerinden yükler. - Alıcı, medya durumunu izler ve izler.
- Gönderen, kullanıcının gönderen uygulamayla etkileşimlerine göre oynatmayı kontrol etmek için alıcıya oynatma komutları gönderir.
Bu ilk temel denemede MediaInfo
alanını bir oynatılabilir öğe URL'si (MediaInfo.contentUrl
içinde kayıtlı) ile 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 öğe URL'sini MediaInfo.contentUrl.
olarak ayarlamak üzere uygun arka uç API çağrıları yapmak için tanımlayıcı olarak contentId
özelliğini kullanır. Alıcı, DRM lisansı edinme veya reklam araları hakkında bilgi ekleme gibi görevleri de yerine getirir.
Bir sonraki bölümde alıcınızın süresini aynı işlemi yapması için uzatacağız. Şimdilik, Yayınla 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şlamalıdır.
Alıcı SDK'sı kullanıma hazır olarak şunları işler:
- Yayınlama oturumu başlatılıyor
- Oynatılabilir öğeler içeren gönderenlerden gelen
LOAD
isteklerini yerine getirin - Büyük ekranda görüntülenmeye hazır temel bir oynatıcı kullanıcı arayüzü sağlayın.
Gönderenlerden gelen LOAD
isteklerini yerine getirmek için alıcımızı basit bir örnek API ile konuşacak şekilde genişleteceğimiz bir sonraki bölüme geçmeden önce CaC Aracı'nı ve kodunu inceleyebilirsiniz.
9. Harici bir API ile entegrasyon
Çoğu geliştiricinin gerçek dünyadaki uygulamalarda Yayın Alıcıları ile etkileşimde bulunma şekline uygun olarak, hedeflenen medya içeriğine, oynatılabilir öğe URL'si göndermek yerine API anahtarıyla referans veren LOAD
isteklerini işleyecek şekilde alıcımızı değiştireceğiz.
Uygulamalar bunu genellikle şu nedenlerle 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şleyecek şekilde tasarlanmıştır.
Bu işlev temel olarak PlayerManager
setMessageInterceptor()
yönteminde uygulanır. Bu sayede gelen mesajları türe göre müdahale edebilir ve SDK'nın dahili mesaj işleyicisine ulaşmadan önce değiştirebilirsiniz. Bu bölümde LOAD
istekleriyle ilgileniyoruz. Bunlarla ilgili aşağıdaki işlemler gerçekleştirilir:
- Gelen
LOAD
isteğini ve özelcontentId
isteğini okuyun. - Akışlı öğeyi
contentId
özelliğine göre aramak için API'mizeGET
ç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. - Oynatma isteğini SDK'ya iletin veya istenen medyayı arayamazsak komutu reddedin.
Sağlanan örnek API'de, SDK'nın genel alıcı görevlerini özelleştirirken yararlanabileceği özellikler gösterilmektedir.
Ö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. İçerikte, poster resimlerinin png biçimindeki URL'lerinin yanı sıra DASH ve HLS akışları da bulunmaktadır. DASH ve HLS akışları, parçalanmış mp4 kapsayıcılarında depolanan bağımsız 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, LOAD
isteğiyle alıcı çağrıldıktan sonra her girişin anahtarını (ör. 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şlevle yük önleyici oluşturacağız. JSON
dosyası alındıktan sonra içeriği ayrıştırır ve meta verileri ayarlayacağız. İlerleyen bölümlerde MediaInformation
parametrelerini içerik türünü belirtecek şekilde ö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ğı özetlenmektedir.
Örnek API DASH İçeriğini Kullanma
Artık yük önleyiciyi hazırladığımıza göre, içerik türünü alıcıya ileteceğiz. Bu bilgiler, alıcıya ana oynatma listesi URL'sini ve akış MIME türünü sağlar. LOAD
önleyicinin Promise()
öğesindeki 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 bölümüne geçebilirsiniz. Bunun yerine, yüklemeyi HLS içeriği ile test etmek istiyorsanız sonraki adıma göz atın.
Örnek API HLS İçeriğini Kullanma
Örnek API, HLS içeriğinin yanı sıra DASH'i içerir. Yükleme isteğinde, önceki adımda yaptığımız gibi contentType
özelliğinin ayarlanmasına ek olarak örnek API'nin HLS URL'lerini kullanmak için bazı ek özellikler gerekir. Alıcı, HLS akışlarını oynatacak şekilde yapılandırıldığında, beklenen varsayılan kapsayıcı türü taşıma akışıdır (TS). Sonuç olarak, yalnızca contentUrl
özelliği değiştirilirse alıcı örnek MP4 akışlarını TS biçiminde açmaya çalışır. Yükleme isteğinde, alıcının içeriğin TS değil MP4 türünde olduğunu bilmesi için MediaInformation
nesnesi ek özelliklerle değiştirilmelidir. contentUrl
ve contentType
özelliklerini değiştirmek için yük önleyicide js/receiver.js dosyanıza aşağıdaki kodu ekleyin. Buna ek olarak, HlsSegmentFormat
ve HlsVideoSegmentFormat
özelliklerini de 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ği olarak ayarlayın. Yayınla 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ı medya öğelerimize yalnızca contentId
referansı içeren bir LOAD
isteği göndermeye zorlar.
Alıcıda yaptığınız değişikliklerde herhangi bir sorun olmadığını varsayarsak önleyicinin MediaInfo
nesnesini, ekranda oynatabileceği bir şeye dönüştürme işlemini halletmesi gerekir.
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 ID'yi content.json dosyasında başka bir kimlikle değiştirebilirsiniz.
10. Akıllı ekranlar için optimize etme
Akıllı ekranlar, alıcı uygulamaların dokunmatik kontrolleri desteklemesini sağlayan dokunma işlevine sahip cihazlardır.
Bu bölümde, akıllı ekranlarda açıldığında 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. js/receiver.js
dosyanızda context.start()
etiketinin üzerine şu kodu ekleyin:
...
// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
context.start();
<cast-media-player> öğesini kullanmazsanız CastReceiverOptions
içinde touchScreenOptimizedApp
öğesini 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
kodlarına göre her yuvaya atanır.
Video Denetimleri
MetadataType.MOVIE
, MetadataType.TV_SHOW
ve MetadataType.GENERIC
için Akıllı Ekranlar için Kullanıcı Arayüzü Kontrolleri nesnesi aşağıdaki örnekte olduğu 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 Denetimleri
MetadataType.MUSIC_TRACK
için, Akıllı Ekranlar için Kullanıcı Arayüzü Kontrolleri nesnesi aşağıdaki gibi görüntülenir:
--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
öğesine göre bir ControlsButton
öğesinin gösterilip gösterilmeyeceğini de belirler.
supportedMediaCommands
değeri ALL_BASIC_MEDIA
olduğunda varsayılan kontrol düzeni aşağıdaki gibi gösterilir:
supportedMediaCommands
değeri ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT
olduğunda varsayılan kontrol düzeni aşağıdaki gibi gösterilir:
supportedMediaCommands değeri PAUSE | QUEUE_PREV | QUEUE_NEXT
değerine eşit olduğunda varsayılan kontrol düzeni aşağıdaki gibi gösterilir:
Metin parçaları mevcut olduğunda, altyazı düğmesi her zaman SLOT_1
konumunda gösterilir.
Alıcı bağlamını 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
kullanarak mevcut bir komutu kaldırabilirsiniz.
Denetim Düğmelerini Özelleştirme
PlayerDataBinder
kullanarak denetimleri özelleştirebilirsiniz. Kontrollerinizin ilk zaman aralığını ayarlamak için touchControls'ün altına şu kodu js/receiver.js
dosyanıza 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ği
Medyaya Göz Atma, kullanıcıların dokunmatik cihazlarda ek içeriği keşfetmelerine olanak tanıyan bir CAF Alıcı özelliğidir. Bu işlemi gerçekleştirmek için, BrowseContent
kullanıcı arayüzünü ayarlamak üzere PlayerDataBinder
kullanmanız gerekir. Daha sonra, görüntülemek istediğiniz içeriğe göre bu alanı BrowseItems
ile doldurabilirsiniz.
BrowseContent
Aşağıda, BrowseContent
kullanıcı arayüzü ve özellikleriyle ilgili bir örnek verilmiştir:
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ı tarafından desteklenen üç en boy oranı: SQUARE_1_TO_1
, PORTRAIT_2_TO_3
, LANDSCAPE_16_TO_9
.
BrowseItem
Her öğede başlık, alt başlık, süre ve resim görüntülemek için BrowseItem
öğesini kullanın:
BrowseItem.image
BrowseItem.duration
BrowseItem.title
BrowseItem.subtitle
Medyaya Göz Atma verilerini ayarlama
setBrowseContent
numaralı telefonu arayarak göz atabileceğiniz medya içeriklerinin listesini sağlayabilirsiniz. Göz atma öğelerini "Sıradaki" başlığıyla ayarlamak için js/receiver.js
dosyanıza playerDataBinder
öğesinin altına 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
önleyiciyi tetikler. Medyaya göz atma öğesinden request.media.contentId
öğesini request.media.entity
ile eşlemek için LOAD
önleyicinize 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) => {
...
});
});
Medyaya 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
Yayın Alıcı SDK'sı, geliştiricilerin CastDebugLogger API'sini ve günlükleri kaydetmek için tamamlayıcı bir Command and Control (CaC) Tool'u kullanarak alıcı uygulamalarda kolayca hata ayıklaması için başka bir seçenek sunar.
Başlatma
API'yi dahil etmek için CastDebugLogger
kaynak komut dosyasını index.html dosyanıza ekleyin. Kaynak, Yayın Alıcı SDK'sı bildiriminden sonra <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>
js/receiver.js
içinde, dosyanın üst ve playerManager
altına, CastDebugLogger
örneğini almak ve günlük 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ıklama günlük kaydedici etkinleştirildiğinde alıcıda DEBUG MODE
işaretini gösteren bir yer paylaşımı gösterilir.
Günlük Oynatıcı Etkinlikleri
CastDebugLogger
ile CAF Receiver SDK tarafından tetiklenen oynatıcı etkinliklerini kolayca günlüğe kaydedebilir ve farklı günlük kaydedici seviyeleri kullanarak etkinlik verilerini kaydedebilirsiniz. loggerLevelByEvents
yapılandırması, hangi etkinliklerin günlüğe kaydedileceğini belirtmek için cast.framework.events.EventType
ve cast.framework.events.category
değerlerini kullanır.
Oynatıcı CORE
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ının hata ayıklama yer paylaşımında farklı renklerle görünen günlük mesajları oluşturmanızı sağlar. En yüksek öncelikli olandan en az öncelikliye doğru sıralanmış aşağıdaki günlük yöntemleri 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 günlük mesajı'dır.
Günlükleri çalışırken görmek için günlükleri LOAD
müdahale aracınıza 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
bölümünde 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 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üzeyiyle özel bir etiket etkinleştirildiğinde yalnızca hata gösterilir ve uyarı günlük mesajları gösterilir.
loggerLevelByTags
yapılandırması isteğe bağlıdır. Özel etiket günlük kaydedici 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,
};
Yer Paylaşımında Hata Ayıklama
Yayın Hata Ayıklama Kaydedici, yayın cihazında özel günlük mesajlarınızın görüntülenmesi için alıcıda bir hata ayıklama yer paylaşımı sağlar. Hata ayıklama yer paylaşımını açıp kapatmak için showDebugLogs
, yer paylaşımındaki günlük mesajlarını temizlemek için clearDebugLogs
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 Alıcı SDK'sını kullanarak nasıl özel bir web alıcı uygulaması oluşturacağınızı biliyorsunuz.
Daha ayrıntılı bilgi için Web Alıcısı geliştirici kılavuzuna bakın.