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

1. Genel Bakış

Google Cast logosu

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

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?

Yalnızca okuma Okuyun ve alıştırmaları tamamlayın

Web uygulamaları geliştirme deneyiminizi nasıl değerlendirirsiniz?

Acemi Orta Yeterli

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" seçeneğinin gösterildiği Google Cast SDK Developer Console'un resmi düğme vurgulanmış

"Yeni uygulama ekle"yi tıklayın

'Yeni Alıcı Uygulaması'nın resmi 'Özel Alıcı' ekranıyla seçenek vurgulanmış

"Özel Alıcı"yı seçin, oluşturduğumuz şey bu.

"Yeni Özel Alıcı"nın resmi 'Alıcı Uygulama URL'si' alanına bir kişinin yazdığı URL'yi gösteren ekran alan

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" seçeneğinin gösterildiği Google Cast SDK'sı Developer Console'un resmi düğme vurgulanmış

"Yeni Cihaz ekle"yi tıklayın

'Yayın Alıcı Cihazı Ekle'nin resmi iletişim kutusu

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

Video oynatan bir Android telefonun resmi; "Salona Yayınlanıyor" mesajı en altta, bir dizi video oynatıcı kontrolünün hemen üzerinde görünür.Aynı videoyu oynatan tam boyutlu ekran resmi

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.