Yayın alıcısına canlı destek ekleme

1. Genel Bakış

Bu codelab'de, Cast Live Breaks API'yi kullanan bir özel web alıcı uygulamasının nasıl oluşturulacağı açıklanmaktadır.

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 Listesi, Cast kullanıcı deneyimini desteklenen tüm platformlarda basit ve tahmin edilebilir hale getirmek için sağlanmıştır.

Ne oluşturacağız?

Bu codelab'i tamamladığınızda, Live API'lerden yararlanan bir Cast Receiver 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ı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 ya da Google Home Hub

Deneyim

• Web geliştirme konusunda bilgi sahibi olmanız gerekir.
• Daha önce yayın göndereni oluşturma ve alıcı uygulamalardır.

2. Örnek kodu alın

Tüm örnek kodları bilgisayarınıza indirebilirsiniz...

file_downloadKaynak Kodu İndir

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

İ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 Geliştirici Konsolu'na uygulama kaydetme

Chromecast cihazlarda bu codelab'de yerleşik olarak bulunan ö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. Elde ettiğiniz URL'yi kullandığınızdan emin olun.

bölümünde bulabilirsiniz. Yepyeni 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 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 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 ise bir 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, 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 Developer Console'da 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 uygulamayı aşağıdaki kod satırıyla değiştirin. 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, 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 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 ayarlanmasını 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'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 kapsayıcı oluşturun. ContainerMetadata, tek bir medya akışı için MediaMetadata nesnelerinin 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 yayınlama oturumu başlatın. Programın 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 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. 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ı, mevcut birkaç API'yi çağırarak bunu belirtebilir.

Yük önleyicide, SEEK tarafından 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 tarafından desteklenen medya komutu devre dışı bırakılırsa müdahale aracı 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 ayrıntılı bilgi için Canlı Yayın Geliştirici Kılavuzu'na bakın.