1. Genel Bakış
Bu codelab'de, Cast Live Breaks API'sini kullanan Özel Web Alıcı uygulaması geliştirmeyi öğ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ı TV'de medya oynatmak için uzaktan kumanda olarak kullanabilir.
Google Cast SDK'sı, uygulamanızın kapsamını genişleterek bir TV'yi veya ses sistemini kontrol etmenizi sağlar. Cast SDK'sı, Google Cast Tasarım Kontrol Listesi'ne göre gerekli kullanıcı arayüzü bileşenlerini eklemenize olanak tanır.
Google Cast Tasarım Kontrol Listesi, desteklenen tüm platformlarda Cast kullanıcı deneyimini basit ve tahmin edilebilir hale getirmek için sağlanmıştır.
Ne oluşturacağız?
Bu codelab'i tamamladığınızda, canlı API'lerden yararlanan bir Cast alıcı oluşturmuş olursunuz.
Neler öğreneceksiniz?
- Cast'te canlı video içeriğini kullanma
- Cast tarafından desteklenen çeşitli canlı yayın senaryolarını yapılandırma.
- Canlı yayınınıza program verileri ekleme
İhtiyacınız olanlar
- En son Google Chrome tarayıcısı.
- Firebase Hosting veya ngrok gibi 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 ya da Google Home Hub
Deneyim
- Web geliştirme konusunda bilgi sahibi olmanız gerekir.
- Yayın gönderen ve alıcı uygulamaları oluşturma konusunda önceki deneyim.
Bu eğitimi nasıl kullanacaksınız?
Web uygulamaları geliştirme 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 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 Geliştirici Konsolu'na uygulama kaydetme
Chromecast cihazlarda bu codelab'de yerleşik olarak bulunan ö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 (ö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.
bölümünde bulabilirsiniz. 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 ö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ı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. Basit bir canlı yayını yayınlama
Bu codelab'e başlamadan önce, canlı API'lere genel bir bakış sunan canlı geliştirici kılavuzunu incelemeniz faydalı olabilir.
Gönderenimiz için Cast oturumu başlatmak üzere Cactool'u kullanacağız. Alıcı, canlı yayını otomatik olarak oynatacak şekilde tasarlanmıştır.
Alıcı üç dosyadan oluşur. Ana uygulama yapısını içeren receiver.html adlı temel bir HTML dosyası. Bu dosyayı değiştirmeniz gerekmez. Ayrıca, alıcıyla ilgili tüm mantığı içeren receiver.js adlı bir dosya da vardır. Son olarak, program rehberi verilerinin alınmasını simüle etmek için kod laboratuvarının ilerleyen bölümlerinde kullanılacak bir metadata_service.js de vardır.
Başlamak için Chrome'da Cactool'u açın. Cast SDK Geliştirici Konsolu'nda size verilen Alıcı Uygulama Kimliği'ni girin ve Ayarla'yı tıklayın.
Web Receiver Cast Application Framework'a (CAF), oynatılacak içeriğin canlı yayın olduğu talimatının verilmesi gerekir. Bunu yapmak için aşağıdaki kod satırını kullanarak uygulamada değişiklik yapın. receiver.js dosyasında yük tutucunun ana gövdesine ekleyin:
request.media.streamType = cast.framework.messages.StreamType.LIVE;
Akış türünü LIVE olarak ayarlamak CAF'nin canlı kullanıcı arayüzünü etkinleştirir. Web Receiver SDK'sı, yayının canlı kısmına otomatik olarak atlar. Canlı program rehberi verileri henüz eklenmediği için kaydırma çubuğu, yayının aranabilir aralığının tamamını gösterir.
receiver.js üzerinde yaptığınız değişiklikleri kaydedin ve Cactool'da yayın düğmesini tıklayıp hedef yayın cihazı seçerek bir yayın oturumu başlatın. Canlı yayın hemen oynatılmaya başlar.
6. Program rehberi verileri ekleniyor
CAF'nin canlı içerik desteği artık alıcı ve gönderen uygulamalarında program rehberi verilerinin gösterilmesini de içeriyor. İçerik sağlayıcıların, özellikle TV kanalları gibi uzun süreli canlı yayınlarda daha iyi bir son kullanıcı deneyimi sunmak için alıcı uygulamalarına program meta verilerini eklemeleri önemle tavsiye edilir.
CAF, tek bir akışta birden fazla program için meta veri ayarlama özelliğini destekler. Alıcı, MediaMetadata nesnelerinde başlangıç zaman damgaları ve süreleri ayarlayarak gönderenlerde gösterilen meta verileri ve yer paylaşımını, oynatıcının akıştaki mevcut konumuna göre otomatik olarak günceller. Aşağıda, API'lerin ve genel kullanımlarının bir örneği verilmiştir.
// 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 bir kapsayıcı oluşturun. ContainerMetadata, tek bir medya akışı için MediaMetadata nesnenin listesini tutar. Her MediaMetadata nesnesi, kapsayıcıdaki tek bir bölümü temsil eder. Oynatma çubuğu belirli bir bölümün sınırları içinde olduğunda, meta verileri otomatik olarak medya durumuna kopyalanır. Örnek meta verileri hizmetimizden 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 the sample MetadataService. Once
* obtained, the guide information is added using QueueManager.
*/
async function loadGuideData() {
const data = await MetadataService.fetchLiveMetadata();
const containerMetadata = new cast.framework.messages.ContainerMetadata();
containerMetadata.sections = data;
playerManager.getQueueManager().setContainerMetadata(containerMetadata);
}
Ayrıca, kılavuz verilerini yükleme aracısına yüklemek için işleve bir çağrı ekleyin:
loadGuideData();
receiver.js dosyasını kaydedin ve bir Cast oturumu başlatın. Program başlangıç zamanı, bitiş zamanı ve başlığı ekranda gösterilir.
Oynatma çubuğu kapsayıcıda yeni bir bölüme geçtiğinde, alıcıdan tüm gönderenlere yeni bir medya durumu mesajı gönderilir. Böylece gönderen uygulamaları kullanıcı arayüzlerini güncelleyebilir. Alıcı uygulamaların, program bilgilerini gönderen uygulamalara göndermeye devam etmek için medya durumu tutucudaki kapsayıcı meta verilerini güncellemesi önerilir. Örnek hizmetimizde, mevcut program meta verilerinin yanı sıra sonraki iki programın meta verilerini döndürüyoruz. Bir yayının meta verilerini güncellemek için yeni bir kapsayıcı oluşturun ve önceki örnekte olduğu gibi setContainerMetadata'ü çağırın.
7. Arama işlevini devre dışı bırakma
Çoğu video akışı, bir dizi video karesini barındıran segmentlerden oluşur. Aksi belirtilmedikçe CAF, kullanıcıların bu segmentler içinde arama yapmasına izin verir. Web Alıcısı, birkaç API'yi çağırarak bunu belirtebilir.
Yükleme engelleyicisinde, SEEK desteklenen medya komutunu kaldırın. Bu işlem, tüm mobil gönderen ve dokunmatik arayüzlerde aramayı devre dışı bırakır. receiver.js öğesindeki SDK örneği değişkenlerinin tanımlarından sonra aşağıdaki kodu ekleyin.
// Disable seeking
playerManager.removeSupportedMediaCommands(
cast.framework.messages.Command.SEEK, true);
Ok Google, 60 saniye geri atla gibi Asistan tarafından desteklenen sesli arama komutlarını devre dışı bırakmak için arama engelleyici kullanılmalıdır. Her arama isteği gönderildiğinde bu müdahale aracı çağrılır. SEEK destekli medya komutu devre dışı bırakılırsa müdahaleci, arama isteğini reddeder. Aşağıdaki kod snippet'ini receiver.js dosyasına ekleyin:
/**
* 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.
*/
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
// 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 seekRequestData;
});
receiver.js dosyasını kaydedin ve bir Cast oturumu başlatın. Artık canlı yayında ileri geri gidemezsiniz.
8. Tebrikler
Artık en yeni Cast Receiver SDK'sını kullanarak özel alıcı uygulaması oluşturmayı biliyorsunuz.
Daha fazla bilgi için Canlı Yayın Geliştirici Kılavuzu'na bakın.