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ısı uygulamasının nasıl oluşturulacağını öğreneceksiniz.

Google Cast nedir?

Google Cast, kullanıcıların bir mobil cihazdan TV'ye içerik yayınlamasına olanak tanır. Kullanıcılar daha sonra mobil cihazlarını TV'de medya oynatmak için uzaktan kumanda olarak kullanabilir.

Google Cast SDK'sı, uygulamanızı bir TV veya ses sistemini kontrol edecek şekilde genişletmenize olanak tanır. Cast SDK'sı, Google Cast Tasarım Kontrol Listesi'ne göre gerekli kullanıcı arayüzü bileşenlerini ekleyebilmenizi 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ğlanmıştır.

Neyi inşa edeceğiz?

Bu codelab'i tamamladığınızda, Canlı API'lardan yararlanan bir Yayın Alıcısı oluşturmuş olursunuz.

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 verilerini ekleme

Gerekenler

• En son Google Chrome tarayıcı.
• Firebase Hosting veya ngrok gibi HTTPS barındırma hizmetleri.
• İnternet erişimi olan, Chromecast veya Android TV gibi bir Google Cast cihazı.
• HDMI girişli TV veya monitör ya da Google Home Hub

Deneyim

• Web geliştirme konusunda önceden bilgi sahibi olmanız gerekir.
• Yayın gönderen ve alıcı uygulamaları oluşturma konusunda önceki deneyim.

2. Örnek kodu alın

Örnek kodun tamamını bilgisayarınıza indirebilirsiniz...

file_downloadKaynak Kodunu İndir

indirilen zip dosyasını açın.

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

Web alıcınızı bir Yayın cihazıyla kullanabilmek için yayın cihazınızın, yayın cihazınızın erişebileceği bir yerde barındırılması gerekir. https'yi destekleyen bir sunucunuz zaten varsa aşağıdaki talimatları atlayın ve bir sonraki bölümde ihtiyaç duyacağınızdan 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 adresine gidip sunucunuzu başlatın.

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

4. Cast Developer Console'da bir uygulamayı kaydetme

Chromecast cihazlarda bu codelab'in yerleşik olarak bulunduğu özel bir alıcıyı çalıştırabilmek için uygulamanızı kaydetmeniz gerekir. Uygulamanızı kaydettikten sonra, gönderen uygulamanızın API çağrıları gerçekleştirmek (ör. bir alıcı uygulamayı 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. Geliştiriyoruz.

Yeni alıcınızın bilgilerini girin. Son aldığınız URL'yi kullandığınızdan emin olun

ele alacağız. Yeni alıcınıza atanan Uygulama Kimliğini not edin.

Yayınlamadan önce alıcı uygulamanıza erişebilmesi için Google Cast cihazınızı da kaydettirmeniz gerekir. Alıcı uygulamanız yayınlandıktan sonra tüm Google Cast cihazlarında kullanılabilir hale gelir. 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 Developer Console'a erişirken ekranınızı Chrome'da yayınlayarak da bulabilirsiniz.

Alıcınızın ve cihazınızın test için 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 yayındaki geliştirici kılavuzunu incelemeniz faydalı olabilir.

Gönderen için bir Yayın oturumu başlatmak üzere Cactool öğesini kullanacağız. Alıcı, canlı yayını otomatik olarak oynatmaya başlayacak şekilde tasarlanmıştır.

Alıcı üç dosyadan oluşur. receiver.html adında, ana uygulama yapısını içeren temel bir HTML dosyası. Bu dosyada değişiklik yapmanız gerekmez. Ayrıca, alıcının tüm mantığını içeren receiver.js adlı bir dosya da vardır. Son olarak, codelab'in ilerleyen bölümlerinde program rehberi verilerinin elde edilmesini simüle etmek için kullanılacak bir metadata_service.js de bulunmaktadır.

Başlamak için Chrome'da Cactool'u açın. Cast SDK Developer Console'da size verilen Alıcı Uygulaması Kimliği'ni girin ve Ayarla'yı tıklayın.

Web Receiver Cast Uygulama Çerçevesi'ne (CAF), oynatılacak içeriğin canlı yayın olduğu şeklinde talimat verilmelidir. Bunu yapmak için aşağıdaki kod satırını kullanarak uygulamayı değiştirin. Bunu receiver.js içindeki yük önleyicinin ana gövdesine ekleyin:

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

Yayın türü LIVE olarak ayarlanırsa CAF'nin canlı kullanıcı arayüzü etkinleştirilir. Web Alıcı SDK'sı, otomatik olarak akışın canlı kenarına atlar. Canlı program rehberi verileri henüz eklenmemiştir. Bu nedenle, ileri geri çubuğu, yayının aranabilir aralığını tam olarak temsil eder.

receiver.js üzerinde yaptığınız değişiklikleri kaydedin ve yayın düğmesini tıklayıp hedef yayın cihazı seçerek Cactool'da bir 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örüntüleme desteğini 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 için alıcı uygulamalarına programlama meta verileri eklemeleri önemle tavsiye edilir.

CAF, tek bir akışta birden fazla program için meta veri ayarlamayı destekler. Alıcı, MediaMetadata nesnelerinde başlangıç zaman damgalarını ve sürelerini ayarlayarak, 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'ler ve genel kullanımlarına dair örnekler 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 nesne içeren bir liste barındırır. 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 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, yük önleyicide kılavuz verilerini yüklemek için işleve bir çağrı ekleyin:

loadGuideData();

receiver.js dosyasını kaydedin ve bir Yayınlama oturumu başlatın. Ekranda programın başlangıç zamanı, bitiş zamanı ve başlığı gösterilir.

Video yer imleci kapsayıcıda yeni bir bölüme geçtiğinde, gönderen uygulamalarının kullanıcı arayüzünü güncelleyebilmesi için alıcıdan tüm gönderenlere yeni bir medya durumu mesajı gönderilir. Alıcı uygulamaların, gönderen uygulamalara program bilgilerini beslemeye devam etmek için medya durumu engelleyicide 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 yöntemini çağırın.

7. Sarma modu devre dışı bırakılıyor

Çoğu video akışı, bir dizi video karesini içeren segmentlerden oluşur. Aksi belirtilmedikçe, CAF kullanıcıların bu segmentler içinde arama yapmasına izin verir. Web Alıcısı, mevcut 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 sarmayı devre dışı bırakır. Aşağıdaki kodu, receiver.js içindeki 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 atla gibi bir asistan tarafından desteklenen sesli arama komutlarını devre dışı bırakmak için arama önleyici kullanılmalıdır. Her arama isteği yapıldığında 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 bir Yayınlama oturumu başlatın. Artık canlı akış içinde arama yapamazsınız.

8. Tebrikler

Artık en son Cast Alıcı SDK'sını kullanarak nasıl özel alıcı uygulama oluşturacağınızı biliyorsunuz.

Daha fazla bilgi için Canlı Yayın Geliştirici Kılavuzu'na göz atın.