1. Genel bakış
Bu codelab'de Cast Live Breaks API'yi kullanan Ö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 cihazlardan TV'ye içerik yayınlamasına olanak tanır. Kullanıcılar daha sonra mobil cihazlarını TV'de medya oynatma için uzaktan kumanda olarak kullanabilir.
Google Cast SDK'sı, TV veya ses sistemini kontrol etmek için uygulamanızı genişletmenize olanak tanır. Cast SDK'sı, Google Cast Tasarım Listesi'ne göre gerekli kullanıcı arayüzü bileşenlerini eklemenize olanak tanır.
Google Cast Tasarım Listesi, Cast kullanıcı deneyimini desteklenen tüm platformlarda basit ve tahmin edilebilir hale getirmek amacıyla hazırlanmıştır.
Ne tür bir kampanya oluşturacağız?
Bu codelab'i tamamladığınızda yeni Canlı Yayın işlevinden yararlanan bir Yayın Alıcısı oluşturmuş olursunuz.
Neler öğreneceksiniz?
- Yayındaki canlı video içeriğini kullanma.
- Cast tarafından desteklenen çeşitli canlı yayın senaryolarını yapılandırma.
- Canlı yayına program verileri ekleme
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 ya da monitör veya Google Home Hub
Deneyim
- Bunun için önce web geliştirme bilgisine sahip olmanız gerekir.
- Yayın gönderen ve alıcı uygulamaları oluşturma konusunda önceki deneyim.
Bu eğiticiyi nasıl kullanacaksınız?
Web uygulaması oluşturma deneyiminizi nasıl değerlendirirsiniz?
2. Örnek kodu alın
Tüm örnek kodu bilgisayarınıza indirebilirsiniz...
ve indirilen zip dosyasının paketini açın.
3. Alıcınızı yerel olarak dağıtma
Web alıcınızın Yayın cihazıyla kullanılabilmesi için yayın cihazınızın yayın cihazına ulaşabileceği bir yerde barındırılması gerekir. https'yi destekleyen bir sunucunuz zaten varsa aşağıdaki talimatları atlayın ve sonraki bölümde ihtiyaç duyacağınız 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 bölümüne gidip sunucunuzu başlatın.
Barındırılan alıcınızın URL'sini not edin. Bunları bir sonraki bölümde kullanacaksınız.
4. Cast Developer Console'da uygulama kaydetme
Bu codelab'de açıklandığı şekilde Chromecast cihazlarda özel bir alıcı çalıştırabilmek için uygulamanızı kaydetmeniz gerekir. Uygulamanızı kaydettikten sonra, gönderen uygulamanızın API çağrıları yapmak için kullanması gereken bir uygulama kimliği (ör. bir alıcı uygulama başlatmak) alırsınız.
"Yeni uygulama ekle"yi tıklayın.
"Özel Alıcı"yı seçin. Oluşturduğumuz öğe budur.
Yeni alıcınızın ayrıntılarını girin. Son aldığınız URL'yi kullandığınızdan emin olun
belirleyebilirsiniz. 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 amaçları doğrultusunda, yayınlanmamış bir alıcı uygulamayla çalışmanızı öneririz.
"Yeni Cihaz Ekle"yi tıklayın.
Yayın cihazınızın arkasında yazılı olan seri numarasını girin ve açıklayıcı bir ad verin. Google Cast SDK Developer Console'a erişirken ekranınızı Chrome'da yayınlayarak da seri numaranızı 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. Basit bir canlı yayın yapma
Bu codelab'e başlamadan önce, yeni canlı yayın işlevine genel bakış sunan canlı geliştirici kılavuzunu incelemeniz faydalı olabilir.
Gönderenimiz için bir Yayınlama oturumu başlatmak üzere CAF Alıcı Hata Ayıklamasını da kullanacağız. Alıcı, otomatik olarak canlı yayın oynatmaya başlayacak şekilde tasarlanmıştır.
Alıcı iki dosyadan oluşur. Yayın bağlamını başlatan receiver.html adlı temel bir html dosyası ve Yayın medya oynatıcısı için bir yer tutucu. Bu dosyada değişiklik yapmanıza gerek yoktur. Alıcı için tüm mantığımızı içeren receiver.js adlı bir dosya da vardır.
Başlamak için Chrome'da web gönderenini açın. Cast SDK Developer Console'da verilen Alıcı Uygulaması Kimliğini girin ve "Ayarla"yı tıklayın.
Alıcıda, Yayın Uygulama Çerçevesi'ne (CAF) yayının yayında olduğunu bildirmek için bazı mantık eklememiz gerekir. Neyse ki bunun için yalnızca tek satır kod gerekir. Aşağıdaki kod satırını receiver.js uygulamasındaki yük müdahale aracına ekleyin:
request.media.streamType = cast.framework.messages.StreamType.LIVE;
Akış türünün LIVE olarak ayarlanması CAF'nin canlı kullanıcı arayüzünü etkinleştirir. Bu senaryoda, akış birleştirildiğinde CAF'nin otomatik olarak yayının canlı kenarına atladığı anlamına gelir. Henüz bir program rehberi verisi ayarlamadık. Bu nedenle çalı çubuğu, bir akış için aranabilir aralığın tam uzunluğunu temsil eder.
Sayfada receiver.js ile ilgili değişikliklerinizi kaydedin ve herhangi bir sayfada sağ tıklayıp "Yayınla"yı seçerek yayın oturumu başlatın. Canlı yayın hemen oynatılmaya başlar.
6. Program rehberi verileri ekleme
CAF'nin yeni canlı içerik desteği artık, alıcı ve gönderen uygulamalarında program rehberi verilerinin ekranda gösterilmesini de destekliyor. İçerik sağlayıcılarının, özellikle TV Kanalları gibi uzun süreli canlı yayınlarda daha iyi bir son kullanıcı deneyimi için alıcı uygulamalarına programlama meta verilerini dahil etmeleri önemle tavsiye edilir.
Artık tek bir akışta birden fazla programın meta verilerini CAF ile paylaşabilirsiniz. Alıcı, MediaMeta nesnelerinde başlangıç zaman damgalarını ve sürelerini ayarlayarak gönderen ve alıcılarda gösterilen meta verileri, oyuncunun akıştaki mevcut konumuna göre otomatik olarak günceller.
// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;
Bu codelab'de, canlı yayınımızın meta verilerini sağlamak için örnek bir meta veri hizmeti kullanacağız. Program meta verilerinin listesini oluşturmak için öncelikle bir kapsayıcı oluşturmamız gerekir. Kapsayıcı, tek bir medya akışı için MediaMeta nesnelerinin listesini tutar. Her Mediametadata nesnesi, kapsayıcıdaki tek bir bölümü temsil eder. Video yer imleci, belirli bir bölümün sınırları içinde olduğunda, meta verileri otomatik olarak medya durumuna kopyalanır. Hizmetimizden örnek meta verileri indirmek ve kapsayıcıyı CAF'ye sağlamak için receiver.js dosyasına aşağıdaki kodu ekleyin:
/**
* Gets the current program guide data from our Google Cloud Function
* @return {cast.framework.messages.MediaMetadata[]} Latest program guide data
*/
function loadGuideData() {
return fetch(LIVE_MEDIA_METADATA_SERVICE_URI)
.then((response) => response.json())
.then(function(data) {
const containerMetadata =
new cast.framework.messages.ContainerMetadata();
containerMetadata.sections = data;
playerManager.getQueueManager().setContainerMetadata(containerMetadata);
});
}
Buna ek olarak, kılavuz verileri yükleme önleyicisine yüklenmesi için işleve bir çağrı ekleyin:
loadGuideData();
receiver.js dosyasını kaydedin ve bir Yayınlama oturumu başlatın. Programın başlangıç zamanı, bitiş zamanı ve başlığı ekranda görünmelidir.
Video yer imleci kapsayıcıdaki yeni bir bölüme geçtiğinde alıcıdan tüm gönderenlere yeni bir medya durumu mesajı gönderilir. Bu nedenle, her zaman güncel program bilgilerine sahip olabilmeniz için medya durumu müdahalecisinde kapsayıcı meta verilerini güncellemeniz mantıklı olabilir. Örnek hizmetimizde mevcut program meta verilerinin yanı sıra sonraki iki programın meta verilerini de döndürürüz. Bir akışın meta verilerini güncellemek için yeni bir kapsayıcı oluşturmanız ve yukarıdaki örnekte olduğu gibi setContainerMetadata yöntemini çağırmanız yeterlidir.
7. Sarmalamayı devre dışı bırakma
Çoğu video akışı, bir dizi video çerçevesi barındıran segmentlerden oluşur. Aksi belirtilmediği sürece CAF, kullanıcıların bu segmentlerde arama yapmasına izin verir. Aramayı devre dışı bırakmak için alıcımıza iki kod snippet'i eklememiz gerekir.
Yük müdahalecide, SEEK destekli medya komutunu kaldırın. Bu işlem, tüm mobil gönderen ve dokunmatik arayüzlerde arama yapılmasını devre dışı bırakır.
playerManager.removeSupportedMediaCommands(cast.framework.messages.Command.SEEK, true);
Ardından, "Ok Google, 60 saniye geri atla" gibi, izleyicilerin söz konusu akış sırasında atlamasına izin veren sesli komutları devre dışı bırakmamız gerekir. Sesle arama özelliğini devre dışı bırakmak için ekleyecek bir ara bulma aracı ekleyeceğiz. Her arama isteğinde bulunulduğunda bu müdahale eden çağrılır. SEEK destekli medya komutu devre dışı bırakılırsa aracı, arama isteğini reddeder. receiver.js dosyasına aşağıdaki kod snippet'ini ekleyin:
/**
* Seek a seek interceptor is called whenever CAF receives a request to seek to
* a different location in media. This interceptor can be used to modify that
* seek request or disable seeking completely.
* @param {cast.framework.messages.MessageType.SEEK} The message to intercept.
*/
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.SEEK,
(seekData) => {
// if the SEEK supported media command is disabled, block seeking
if (!(playerManager.getSupportedMediaCommands() &
cast.framework.messages.Command.SEEK)) {
castDebugLogger.info(TAG, 'Seek blocked.');
return null;
}
return seekData;
}
);
receiver.js dosyasını kaydedin ve bir Yayınlama oturumu başlatın. Artık canlı yayında arama yapamazsınız.
8. Tebrikler
Artık en son Cast Alıcı SDK'sını kullanarak nasıl özel alıcı uygulaması oluşturabileceğinizi biliyorsunuz.
Daha ayrıntılı bilgi için Canlı Yayın geliştirici kılavuzunu inceleyin.