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. Böylece kullanıcılar, TV'de medya oynatmak için mobil cihazlarını 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 Yayın Alıcısı oluşturmuş olacaksınız.
Neler öğreneceksiniz?
- Cast'te canlı video içeriği nasıl kullanılır?
- 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ı.
- 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 ya da Google Home Hub
Deneyim
- Daha önce web geliştirme konusunda bilgi sahibi olmanız gerekir.
- Daha önce yayın göndereni oluşturma ve alıcı uygulamalardır.
Bu eğiticiden nasıl yararlanacaksı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 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 yerleşik olarak bulunan bu codelab'de yer alan özel 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 (ö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, oluşturduğumuz ş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. Basit bir canlı yayın yapma
Bu codelab'e başlamadan önce, canlı API'lere genel bir bakış sunan canlı geliştirici kılavuzunu incelemeniz faydalı olabilir.
Gönderenimizde yayın oturumu başlatmak için Cactool'u kullanacağız. Alıcı, canlı yayını otomatik olarak oynatmaya başlayacak ş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 receiver.js adlı bir dosya da vardır. Bu dosya, alıcının tüm mantığını içerir. Son olarak, codelab'in ilerleyen bölümlerinde program rehberi verilerinin elde edilmesini simüle etmek için kullanılacak bir metadata_service.js bulunuyor.
Başlamak için Chrome'da Cactool'u açın. Cast SDK Developer Console'da size verilen Alıcı Uygulama Kimliği'ni girin ve Ayarla'yı tıklayın.
Web Alıcı Yayın Uygulama Çerçevesi'ne (CAF), oynatılacak içeriğin bir 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. Bunu receiver.js ürününde yük önleyicinin ana gövdesine 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. Web Receiver SDK, otomatik olarak yayının canlı kenarına atlar. Canlı program rehberi verileri henüz eklenmediğinden ileri geri oynatma çubuğu, akışın aranabilir aralığının tam uzunluğunu temsil eder.
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örüntülenmesi için destek sağlıyor. İçerik sağlayıcıları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 eklemeleri önemle tavsiye edilir.
CAF, tek bir akışta birden fazla program için meta veri ayarlanmasını destekler. MediaMetadata nesnelerinde başlangıç zaman damgaları ve süreler ayarlandığında alıcı, gönderenlerde ve yer paylaşımında gösterilen meta verileri oynatıcının akıştaki mevcut konumuna göre otomatik olarak günceller. Aşağıda API'lere ve genel kullanımlarına dair bir örnek 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 container 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. Video yer imleci 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ük önleyiciye yükleme işlevine bir çağrı ekleyin:
loadGuideData();
receiver.js dosyasını kaydedin ve yayınlama oturumu başlatın. Programın başlangıç zamanı, bitiş zamanı ve başlığı ekranda gösterilir.
Video yer imleci, kapsayıcıda yeni bir bölüme geçtiğinde alıcıdan tüm gönderenlere yeni bir medya durum mesajı gönderilir. Böylece gönderen uygulamaları kullanıcı arayüzünü güncelleyebilir. Alıcı uygulamaların, program bilgilerini gönderen uygulamalarına aktarmaya devam etmek için bir medya durumu müdahalecisinde kapsayıcı meta verilerini güncellemesi önerilir. Örnek hizmetimizde mevcut program meta verilerini ve sonraki iki programın meta verilerini döndürürüz. Bir akışın meta verilerini güncellemek için yeni bir kapsayıcı oluşturun ve önceki örnekte olduğu gibi setContainerMetadata öğesini çağırın.
7. Sarmalama devre dışı bırakılıyor
Ç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ük önleyicide, SEEK tarafından desteklenen medya komutunu kaldırın. Bu ayar, tüm mobil gönderen ve dokunma arayüzlerinde sarma özelliğini 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 önleyici kullanılmalıdır. Her arama isteği gönderildiğinde bu müdahale aracı çağrılır. SEEK tarafından desteklenen medya komutu devre dışı bırakılırsa müdahale aracı arama isteğini reddeder. receiver.js dosyasına aşağıdaki kod snippet'ini 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 yayınlama oturumu başlatın. Artık canlı yayında arama yapamazsınız.
8. Tebrikler
Artık en yeni Cast Alıcı SDK'sını kullanarak özel alıcı uygulaması oluşturmayı biliyorsunuz.
Daha ayrıntılı bilgi için Canlı Yayın Geliştirici Kılavuzu'na bakın.