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

1. Genel Bakış

Bu codelab'de, Cast Live Breaks API'yi kullanan özel bir web alıcı uygulaması oluşturmayı öğreneceksiniz.

Google Cast nedir?

Google Cast, kullanıcıların mobil cihazdaki içerikleri TV'ye 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, uygulamanızı genişleterek TV'yi veya ses sistemini kontrol etmenizi sağlar. Cast SDK, Google Cast Tasarım Kontrol Listesi'ne göre gerekli kullanıcı arayüzü bileşenlerini eklemenizi 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ğlanır.

Ne geliştireceğiz?

Bu codelab'i tamamladığınızda, Live API'lerden yararlanan bir Cast alıcı oluşturmuş olacaksınız.

Neler öğreneceksiniz?

• Yayınlama özelliğinde canlı video içeriklerini kullanma
• Cast tarafından desteklenen çeşitli canlı yayın senaryolarını yapılandırma
• Canlı yayınıza program verileri ekleme

İhtiyacınız olanlar

• En yeni Google Chrome tarayıcı.
• Firebase Hosting veya ngrok gibi bir HTTPS barındırma hizmeti.
• İnternet erişimiyle yapılandırılmış bir Chromecast veya Android TV gibi Google Cast yayın cihazı.
• HDMI girişi olan bir TV veya monitör ya da Google Home Hub

Deneyim

• Daha önce web geliştirme bilgisine sahip olmanız gerekir.
• Daha önce Cast gönderen ve alıcı uygulamaları geliştirmiş olmak

2. Örnek kodu alın

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

file_downloadKaynak Kodunu İndirme

ve indirilen ZIP dosyasını açın.

3. Alıcınızı yerel olarak dağıtma

Web alıcınızı yayın cihazıyla kullanabilmek için web alıcınızın, yayın cihazınızın erişebileceği bir yerde barındırılması gerekir. HTTPS'yi destekleyen bir sunucunuz varsa aşağıdaki talimatları atlayın ve URL'yi not edin. Bu URL'ye sonraki bölümde ihtiyacınız olacaktır.

Kullanabileceğiniz bir sunucunuz yoksa Firebase Hosting veya ngrok'u kullanabilirsiniz.

Sunucuyu çalıştırma

Seçtiğiniz hizmeti kurduktan sonra app-start simgesine gidin ve sunucunuzu başlatın.

Barındırılan alıcınızın URL'sini not edin. Bu bilgiyi sonraki bölümde kullanacaksınız.

4. Cast Geliştirici Konsolu'nda uygulama kaydetme

Bu codelab'de oluşturulan özel alıcıyı Chromecast cihazlarda çalıştırabilmek için uygulamanızı kaydetmeniz gerekir. Uygulamanızı kaydettikten sonra, gönderen uygulamanızın alıcı uygulamayı başlatmak gibi API çağrıları yapmak 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şturacağımız öğe budur.

Yeni alıcınızın ayrıntılarını girin. Sonunda kullandığınız URL'yi kullandığınızdan emin olun.

son bölümde ele alacağız. Yepyeni alıcınıza atanan Uygulama Kimliği'ni 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 cihazlarında kullanılabilir. Bu codelab'in amacı doğrultusunda, yayınlanmamış bir alıcı uygulamasıyla çalışmanız önerilir.

"Yeni cihaz ekle"yi tıklayın.

Yayın cihazınızın arkasında yazan seri numarasını girin ve cihaza açıklayıcı bir ad verin. Seri numaranızı, Google Cast SDK Geliştirici Konsolu'na erişirken ekranınızı Chrome'da 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ı 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 yayın oturumu başlatmak üzere 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 verilerini elde etmeyi simüle etmek için codelab'de daha sonra 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 alıcı Cast Application Framework'e (CAF) oynatılacak içeriğin canlı yayın olduğu talimatı verilmelidir. Bunu yapmak için uygulamayı aşağıdaki kod satırıyla değiştirin. receiver.js içinde yük yakalayıcının ana gövdesine ekleyin:

request.media.streamType = cast.framework.messages.StreamType.LIVE;

Yayın türünü LIVE olarak ayarlamak, CAF'nin canlı kullanıcı arayüzünü etkinleştirir. Web Receiver SDK, otomatik olarak akışın canlı kenarına 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 yayınla düğmesini tıklayıp hedef yayın cihazını seçerek Cactool'da yayın oturumu başlatın. Canlı yayın hemen oynatılmaya başlar.

6. Program rehberi verileri ekleme

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üren canlı yayınlar için daha iyi bir son kullanıcı deneyimi sunmak amacıyla alıcı uygulamalarına programlama meta verilerini eklemeleri önemle tavsiye edilir.

CAF, tek bir akışta birden fazla program için meta veri ayarlamayı destekler. MediaMetadata nesnelerinde başlangıç zaman damgaları ve süreler ayarlayarak alıcı, gönderenlerde ve yer paylaşımında gösterilen meta verileri, oynatıcının akış içindeki mevcut konumuna göre otomatik olarak günceller. API'lerin ve genel kullanımlarının bir örneğini aşağıda bulabilirsiniz.

// 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 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 başlığı belirli bir bölümün sınırları içindeyken meta verileri, medya durumuna otomatik olarak 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üklemek için yükleme önleyiciye bir işlev çağrısı ekleyin:

loadGuideData();

receiver.js dosyasını kaydedin ve yayın oturumu başlatın. Programın başlangıç zamanı, bitiş zamanı ve başlığı ekranda gösterilir.

Oynatma başlığı 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 aktarmaya devam etmek için medya durumu yakalayıcıdaki kapsayıcı meta verilerini güncellemesi önerilir. Örnek hizmetimizde, mevcut programın meta verilerinin yanı sıra sonraki iki programa ait meta verileri de 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 işlevini çağırın.

7. Sarmayı devre dışı bırakma

Çoğu video akışı, bir dizi video karesi içeren segmentlerden oluşur. Aksi belirtilmedikçe, CAF kullanıcıların bu segmentlerde arama yapmasına izin verir. Web alıcı, kullanılabilir birkaç API'yi çağırarak bunu belirtebilir.

Yükleme engelleyicide SEEK destekli medya komutunu kaldırın. Bu işlem, tüm mobil gönderen ve dokunmatik arayüzlerde sarma özelliğini devre dışı bırakır. Aşağıdaki kodu receiver.js dosyasındaki SDK örneği değişkenlerinin tanımlarından sonra ekleyin.

// Disable seeking
playerManager.removeSupportedMediaCommands(
    cast.framework.messages.Command.SEEK, true);

Ok Google, 60 saniye geri sar gibi Asistan destekli sesli arama komutlarını devre dışı bırakmak için arama kesicinin kullanılması gerekir. Bu araya girme işlemi, her arama isteğinde çağrılır. SEEK destekli medya komutu devre dışı bırakılırsa müdahale eden, 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 yayın oturumu başlatın. Artık canlı yayında geri veya ileri sarma yapamazsınız.

8. Tebrikler

Artık en yeni Cast alıcı SDK'sını kullanarak özel bir alıcı uygulaması oluşturmayı biliyorsunuz.

Daha fazla bilgi için Canlı Yayın Geliştirici Kılavuzu'na bakın.