Özel Web Alıcısı Oluşturma

1. Genel Bakış

Bu codelab'de, Cast özellikli cihazlarda içerik oynatmak için nasıl Özel Web Alıcısı uygulaması oluşturacağınızı öğreneceksiniz.

Google Cast nedir?

Google Cast, kullanıcıların mobil cihazdan TV'ye içerik yayınlamasına olanak tanır. Kullanıcılar, mobil cihazlarını veya masaüstü Chrome Tarayıcı'larını TV'de medya oynatmak için uzaktan kumanda olarak kullanabilir.

Google Cast SDK'sı, uygulamanızın Google Cast özellikli cihazları (ör. TV veya ses sistemi) kontrol etmesine olanak tanır. Cast SDK'sı, Google Cast Tasarım Kontrol Listesi'ne göre gerekli kullanıcı arayüzü bileşenlerini sağlar.

Google Cast Tasarım Kontrol Listesi, desteklenen tüm platformlarda Cast kullanıcı deneyimini basit ve öngörülebilir hale getirmek için sağlanmıştır. Daha fazla bilgi için bu sayfayı inceleyin.

Ne oluşturacağız?

Bu kod laboratuvarını tamamladığınızda, Cast özellikli cihazlarda video içeriği görüntüleyebilen kendi özel alıcınız olarak işlev görecek bir HTML5 uygulamanız olur.

Neler öğreneceksiniz?

• Alıcı geliştirme için nasıl hazırlanılır?
• Cast Uygulama Çerçevesi'ne dayalı Cast özellikli alıcıyla ilgili temel bilgiler.
• Yayınlanan videoyu alma.
• Hata Ayıklama Günlüğün'ü entegre etme.
• Alıcınızı akıllı ekranlar için optimize etme.

İ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.

Deneyim

• Web geliştirme konusunda bilgi sahibi olmanız gerekir.
• Ayrıca TV izleme konusunda bilgi sahibi olmanız gerekir.

2. Örnek kodu alın

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

file_downloadKaynağı İndir

ve indirilen ZIP dosyasını 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

Tercih ettiğiniz hizmeti ayarladıktan sonra app-start bölümüne gidin ve sunucunuzu başlatın.

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

4. Cast Developer Console'a bir uygulama kaydetme

Bu codelab'de oluşturulan özel bir alıcıyı Chromecast cihazlarda çalıştırabilmek için uygulamanızı kaydetmeniz gerekir. Uygulamanızı kaydettikten sonra, gönderen uygulamanızın API çağrıları yapmak (ör. alıcı uygulamasını 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. Şu anda bunu oluşturuyoruz.

Yeni alıcınızın ayrıntılarını girin. Elde ettiğiniz 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ınladıktan sonra tüm Google Cast cihazlarda kullanılabilir. Bu kod laboratuvarının 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ı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ızın ve cihazınızın teste hazır olması 5-15 dakika sürer. 5-15 dakika bekledikten sonra Cast cihazınızı yeniden başlatmanız gerekir.

5. Örnek uygulamayı çalıştırma

Yeni alıcı uygulamamızın teste hazır olmasını beklerken, tamamlanmış örnek bir alıcı uygulamasının nasıl göründüğüne göz atalım. Oluşturacağımız alıcı, medyayı uyarlanabilir bit hızı akışını kullanarak oynatabilecek (HTTP üzerinden Dinamik Uyarlanabilir Akış için kodlanmış örnek içerik kullanacağız).

Tarayıcınızda Command and Control (CaC) aracını açın.

1. CaC aracımızı görürsünüz.
2. Varsayılan "CC1AD845" örnek alıcı kimliğini kullanın ve "Uygulama Kimliğini Ayarla" düğmesini tıklayın.
3. Sol üstteki Cast düğmesini tıklayın ve Google Cast cihazınızı seçin.

4. En üstteki "Medya Yükle" sekmesine gidin.

5. Sana Özel bölümündeki bir videoyu oynatmak için "İçeriğe göre yükle" düğmesini tıklayın.
6. Varsayılan alıcı kullanılarak temel alıcı işlevinin nasıl göründüğünü göstermek için video Google Cast cihazınızda oynatılmaya başlar.

6. Başlangıç projesini hazırlama

İndirdiğiniz başlangıç uygulamasına Google Cast desteği eklememiz gerekiyor. Bu kod laboratuvarında kullanacağımız bazı Google Cast terimleri şunlardır:

• Mobil cihazda veya dizüstü bilgisayarda bir gönderen uygulaması çalışır,
• Google Cast cihazında bir alıcı uygulaması çalışır.

Artık favori metin düzenleyicinizi kullanarak bir başlangıç projesi oluşturmaya hazırsınız:

1. İndirilen örnek koddan app-start dizinini seçin.
2. js/receiver.js ve index.html uygulamalarını açın

Bu kod laboratuvarını çalıştırırken http-server'ün yaptığınız değişiklikleri algıladığını unutmayın. Başlamazsa http-server cihazını sonlandırıp yeniden başlatmayı deneyin.

Uygulama Tasarımı

Alıcı uygulama, Cast oturumunu başlatır ve bir gönderenden LOAD isteği (yani bir medya parçasının oynatılmasıyla ilgili komut) gelene kadar beklemede kalır.

Uygulama, index.html içinde tanımlanmış bir ana görünüm ve alıcımızın çalışmasını sağlayacak tüm mantığı içeren js/receiver.js adlı bir JavaScript dosyasından oluşur.

index.html

Bu HTML dosyası, alıcı uygulamamızın kullanıcı arayüzünü içerecek. Şu anda boş olan bu dosyaya kod laboratuvarının ilerleyen aşamalarında içerik ekleyeceğiz.

receiver.js

Bu komut dosyası, alıcı uygulamamızın tüm mantığını yönetecektir. Şu anda boş bir dosyadır ancak sonraki bölümde birkaç kod satırı ekleyerek tamamen işlevsel bir Cast alıcısına dönüştüreceğiz.

7. Temel bir Cast alıcısı

Temel bir Cast alıcı, başlangıçta Cast oturumunu başlatır. Bu, bağlı tüm gönderen uygulamalarına alıcının başarıyla açıldığını bildirmek için gereklidir. Ayrıca yeni SDK, uyarlanabilir bit hızı akış medyasını (DASH, HLS ve Smooth Streaming kullanılarak) ve düz MP4 dosyalarını kutudan çıktığı anda işlemek için önceden yapılandırılmıştır. Bunu deneyelim.

İlk kullanıma hazırlama

Üstbilgideki index.html alanına aşağıdaki kodu ekleyin:

<head>
  ...

  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
</head>

Alıcı SDK'ya, yeni eklediğiniz komut dosyasıyla birlikte gönderilen varsayılan alıcı kullanıcı arayüzünü getirmek için alan sağlamak amacıyla <footer> yükleniyor receiver.js, öncesinde index.html <body> öğesine aşağıdaki kodu ekleyin.

<cast-media-player></cast-media-player>

Şimdi, SDK'yı js/receiver.js içinde başlatmamız gerekiyor. Bu işlem için şunları yapmamız gerekir:

• Alıcı SDK'sının tamamına yönelik birincil giriş noktanız olan CastReceiverContext referansını edinme
• Oynatma işlemini yöneten PlayerManager nesnesine referans depolama ve kendi özel mantığınızı takmak için ihtiyaç duyduğunuz tüm bağlantı noktalarını sağlama
• CastReceiverContext üzerinde start() çağrısı yaparak SDK'yı başlatma

Aşağıdakileri js/receiver.js alanına ekleyin.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

context.start();

8. "Temel" video içeriğini yayınlama

Bu Codelab'de, yeni alıcınızı denemek için CaC aracını kullanın.

Web tarayıcınızı Komuta ve Kontrol (CaC) Aracı'na yönlendirin.

Alanda daha önce kaydettiğiniz kendi uygulama kimliğinizi eklediğinizden emin olun ve "Uygulama Kimliği Ayarla"yı tıklayın. Bu işlem, alıcınızı Cast oturumunu başlatırken kullanması için araca talimat verir.

Medya yayınlanıyor

Genel olarak, Cast cihazında medya oynatmak için aşağıdakilerin gerçekleşmesi gerekir:

1. Gönderen, Cast SDK'sından bir medya öğesini modelleyen bir MediaInfo JSON nesnesi oluşturur.
2. Gönderen, alıcı uygulamayı başlatmak için yayın cihazına bağlanır.
3. Alıcı, içeriği oynatmak için LOAD isteği aracılığıyla MediaInfo nesnesini yükler.
4. Alıcı, medya durumunu izler ve takip eder.
5. Gönderen, oynatmayı kullanıcının gönderen uygulamasıyla etkileşimlerine göre kontrol etmek için alıcıya oynatma komutları gönderir.

Bu ilk temel denemede MediaInfo'ü oynatılabilir bir öğe URL'siyle (MediaInfo.contentUrl içinde depolanır) dolduracağız.

Gerçek bir gönderen, MediaInfo.contentId alanında uygulamaya özel bir medya tanımlayıcısı kullanır. Alıcı, gerçek öğe URL'sini çözmek ve MediaInfo.contentUrl. olarak ayarlamak için uygun arka uç API çağrıları yapmak üzere contentId'yi tanımlayıcı olarak kullanır. Alıcı, DRM lisansı edinme veya reklam araları hakkında bilgi ekleme gibi görevleri de üstlenir.

Bir sonraki bölümde, alıcınızı tam olarak bu şekilde bir işlem yapması için genişleteceğiz. Şimdilik Cast simgesini tıklayıp alıcınızı açmak için cihazınızı seçin.

"Medya Yükle" sekmesine gidin ve "İçeriğe göre yükle" düğmesini tıklayın. Alıcınız, örnek içeriği oynatmaya başlar.

Bu nedenle, Receiver SDK'sı kutudan çıktığı anda şunları yönetir:

• Yayınlama oturumunu başlatma
• Oynatılabilecek öğeler içeren gönderenlerden gelen LOAD isteklerini işleme
• Büyük ekranda gösterilmeye hazır temel bir oynatıcı kullanıcı arayüzü sağlayın.

Bir sonraki bölüme geçmeden önce CaC aracını ve kodunu keşfedebilirsiniz. Bu bölümde, alıcımızı, gönderenlerden gelen LOAD isteklerini yerine getirmek için basit bir örnek API ile konuşacak şekilde genişleteceğiz.

9. Harici bir API ile entegrasyon

Çoğu geliştiricinin gerçek uygulamalarda Cast alıcılarıyla etkileşim şekline uygun olarak, alıcımızı oynatılabilir öğe URL'si göndermek yerine istenen medya içeriğine API anahtarıyla atıfta bulunan LOAD isteklerini işleyecek şekilde değiştireceğiz.

Uygulamalar genellikle şu nedenlerle bu işlemi yapar:

• Gönderen, içerik URL'sini bilmiyor olabilir.
• Cast uygulaması, kimlik doğrulama, diğer iş mantığı veya API çağrılarını doğrudan alıcıda işlemek için tasarlanmıştır.

Bu işlev, birincil olarak PlayerManager setMessageInterceptor() yönteminde uygulanır. Bu sayede, gelen iletileri türe göre durdurabilir ve SDK'nın dahili mesaj işleyicisine ulaşmadan önce değiştirebilirsiniz. Bu bölümde, aşağıdakileri yapacağımız LOAD istekleriyle ilgileniyoruz:

• Gelen LOAD isteğini ve özel contentId değerini okuyun.
• Aktarılabilir öğeyi contentId değerine göre aramak için API'mize GET çağrısı gönderin.
• LOAD isteğini, yayının URL'siyle değiştirin.
• Akış türü parametrelerini ayarlamak için MediaInformation nesnesini değiştirin.
• İsteği oynatma için SDK'ya iletin veya istenen medyayı bulamıyorsak komutu reddedin.

Sağlanan örnek API, SDK'nın genel alıcı görevlerini özelleştirmek için kullandığı kancaları gösterirken çoğunlukla kullanıma hazır bir deneyim sunar.

Örnek API

Tarayıcınızı https://storage.googleapis.com/cpe-sample-media/content.json adresine yönlendirip örnek video kataloğumuza göz atın. İçerik, hem DASH hem HLS akışlarının yanı sıra png biçimindeki poster resimlerinin URL'lerini içerir. DASH ve HLS akışları, parçalara ayrılmış MP4 kapsayıcılarında depolanan, birleştirilmemiş video ve ses kaynaklarını gösterir.

{
  "bbb": {
    "author": "The Blender Project",
    "description": "Grumpy Bunny is grumpy",
    "poster": "https://[...]/[...]/BigBuckBunny/images/screenshot1.png",
    "stream": {
      "dash": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.mpd",
      "hls": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.m3u8",
    "title": "Big Buck Bunny"
  },
  "fbb_ad": {
    "author": "Google Inc.",
    "description": "Introducing Chromecast. The easiest way to enjoy [...]",
    "poster": "https://[...]/[...]/ForBiggerBlazes/images/screenshot8.png",
    "stream": {
      "dash": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.mpd",
      "hls": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.m3u8",
    "title": "For Bigger Blazes"
  },

  [...]

}

Sonraki adımda, alıcı bir LOAD isteğiyle çağrıldıktan sonra her girişin anahtarını (örneğin, bbb, fbb_ad) aktarımın URL'siyle eşleştiririz.

LOAD isteğine müdahale etme

Bu adımda, barındırılan JSON dosyasına XHR isteği gönderen bir işleve sahip bir yük önleyici oluşturacağız. JSON dosyası alındıktan sonra içeriği ayrıştırır ve meta verileri ayarlarız. Aşağıdaki bölümlerde, içerik türünü belirtmek için MediaInformation parametrelerini özelleştireceğiz.

Aşağıdaki kodu js/receiver.js dosyanıza, context.start() çağrısından hemen önce ekleyin.

function makeRequest (method, url) {
  return new Promise(function (resolve, reject) {
    let xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(JSON.parse(xhr.response));
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
        // Fetch content repository by requested contentId
        makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json').then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            reject();
          } else {
            // Add metadata
            let metadata = new
               cast.framework.messages.GenericMediaMetadata();
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
        });
      });
    });

Sonraki bölümde, DASH içeriği için yükleme isteğinin media mülkünün nasıl yapılandırılacağı açıklanmaktadır.

Örnek API DASH İçeriği'ni kullanma

Yükleyiciyi hazırladığımıza göre, alıcıya içerik türünü belirteceğiz. Bu bilgiler, alıcıya ana oynatma listesi URL'sini ve akış MIME türünü sağlar. LOAD engelleyicinin Promise() klasöründeki js/receiver.js dosyasına aşağıdaki kodu ekleyin:

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            ...
          }
        });
      });
    });

Bu adımı tamamladıktan sonra DASH içeriğiyle yüklemeyi denemek için Test Etme'ye geçebilirsiniz. Bunun yerine, HLS içeriğiyle yüklemeyi test etmek istiyorsanız sonraki adıma göz atın.

Örnek API HLS İçeriğini Kullanma

Örnek API, DASH'ın yanı sıra HLS içeriği de içerir. Önceki adımda yaptığımız gibi contentType değerini ayarlamanın yanı sıra, örnek API'nin HLS URL'lerini kullanmak için yükleme isteğinin bazı ek özelliklere ihtiyacı vardır. Alıcı, HLS akışlarını oynatacak şekilde yapılandırıldığında, beklenen varsayılan container türü aktarım akışıdır (TS). Sonuç olarak alıcı, yalnızca contentUrl mülkü değiştirilirse örnek MP4 akışlarını TS biçiminde açmaya çalışır. Yükleme isteğinde, MediaInformation nesnesi ek özelliklerle değiştirilmelidir. Böylece alıcı, içeriğin TS değil MP4 türü olduğunu bilir. contentUrl ve contentType özelliklerini değiştirmek için yükleme önleyicide js/receiver.js dosyanıza aşağıdaki kodu ekleyin. Ayrıca HlsSegmentFormat ve HlsVideoSegmentFormat özelliklerini ekleyin.

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.hls;
            request.media.contentType = 'application/x-mpegurl';
            request.media.hlsSegmentFormat = cast.framework.messages.HlsSegmentFormat.FMP4;
            request.media.hlsVideoSegmentFormat = cast.framework.messages.HlsVideoSegmentFormat.FMP4;
            ...
          }
        });
      });
    });

Test Etme

Tekrar Komut ve Kontrol (CaC) Aracı'nı açın ve uygulama kimliğinizi alıcınızın uygulama kimliğine ayarlayın. Cast düğmesini kullanarak cihazınızı seçin.

"Medya Yükle" sekmesine gidin. Bu kez, "İçeriğe göre yükle" düğmesinin yanındaki "İçerik URL'si" alanındaki metni silin. Bu işlem, uygulamamızın yalnızca medyamıza ait contentId referansını içeren bir LOAD isteği göndermesini zorunlu kılar.

Alıcıda yaptığınız değişikliklerin sorunsuz çalıştığını varsayarsak MediaInfo nesnesini SDK'nın ekranda oynatabileceği bir şeye dönüştürme işlemini engelleyici üstlenir.

Medyanızın düzgün oynatılıp oynatılmadığını görmek için "İçeriğe göre yükle" düğmesini tıklayın. content.json dosyasında Content ID'yi başka bir kimlikle değiştirebilirsiniz.

10. Akıllı ekranlar için optimizasyon

Akıllı ekranlar, alıcı uygulamaların dokunmatik kontrolleri desteklemesine olanak tanıyan dokunma işlevine sahip cihazlardır.

Bu bölümde, alıcı uygulamanızı akıllı ekranlarda başlatırken nasıl optimize edeceğiniz ve oynatıcı kontrollerini nasıl özelleştireceğiniz açıklanmaktadır.

Kullanıcı arayüzü denetimlerine erişme

Akıllı Ekranlar için kullanıcı arayüzü denetimleri nesnesine cast.framework.ui.Controls.GetInstance() kullanılarak erişilebilir. js/receiver.js dosyanıza context.start()'un üstüne aşağıdaki kodu ekleyin:

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();

context.start();

<cast-media-player> öğesini kullanmıyorsanız CastReceiverOptions içinde touchScreenOptimizedApp değerini ayarlamanız gerekir. Bu codelab'de <cast-media-player> öğesini kullanıyoruz.

context.start({ touchScreenOptimizedApp: true });

Varsayılan kontrol düğmeleri, MetadataType ve MediaStatus.supportedMediaCommands'a göre her yuvaya atanır.

Video Kontrolleri

MetadataType.MOVIE, MetadataType.TV_SHOW ve MetadataType.GENERIC için Akıllı Ekranlar'a yönelik kullanıcı arayüzü denetimleri nesnesi aşağıdaki örnekte gösterildiği gibi görüntülenir.

1. --playback-logo-image
2. MediaMetadata.subtitle
3. MediaMetadata.title
4. MediaStatus.currentTime
5. MediaInformation.duration
6. ControlsSlot.SLOT_SECONDARY_1: ControlsButton.QUEUE_PREV
7. ControlsSlot.SLOT_PRIMARY_1: ControlsButton.SEEK_BACKWARD_30
8. PLAY/PAUSE
9. ControlsSlot.SLOT_PRIMARY_2: ControlsButton.SEEK_FORWARD_30
10. ControlsSlot.SLOT_SECONDARY_2: ControlsButton.QUEUE_NEXT

Ses Kontrolleri

MetadataType.MUSIC_TRACK için Akıllı Ekranlar'a yönelik kullanıcı arayüzü denetimleri nesnesi aşağıdaki gibi gösterilir:

1. --playback-logo-image
2. MusicTrackMediaMetadata.albumName
3. MusicTrackMediaMetadata.title
4. MusicTrackMediaMetadata.albumArtist
5. MusicTrackMediaMetadata.images[0]
6. MediaStatus.currentTime
7. MediaInformation.duration
8. ControlsSlot.SLOT_SECONDARY_1: ControlsButton.NO_BUTTON
9. ControlsSlot.SLOT_PRIMARY_1: ControlsButton.QUEUE_PREV
10. PLAY/PAUSE
11. ControlsSlot.SLOT_PRIMARY_2: ControlsButton.QUEUE_NEXT
12. ControlsSlot.SLOT_SECONDARY_2: ControlsButton.NO_BUTTON

Desteklenen medya komutlarını güncelleme

Kullanıcı arayüzü kontrolleri nesnesi, MediaStatus.supportedMediaCommands'a bağlı olarak ControlsButton'ün gösterilip gösterilmeyeceğini de belirler.

supportedMediaCommands değeri ALL_BASIC_MEDIA'a eşit olduğunda varsayılan kontrol düzeni aşağıdaki gibi gösterilir:

supportedMediaCommands değeri ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT'a eşit olduğunda varsayılan kontrol düzeni aşağıdaki gibi gösterilir:

supportedMediaCommands değerinin PAUSE | QUEUE_PREV | QUEUE_NEXT olduğu durumlarda varsayılan kontrol düzeni aşağıdaki gibi görünür:

Metin parçaları mevcut olduğunda altyazı düğmesi her zaman SLOT_1 konumunda gösterilir.

Alıcı bağlamı başlattıktan sonra supportedMediaCommands değerini dinamik olarak değiştirmek için değeri geçersiz kılmak üzere PlayerManager.setSupportedMediaCommands işlevini çağırabilirsiniz. Ayrıca addSupportedMediaCommands kullanarak yeni bir komut ekleyebilir veya removeSupportedMediaCommands kullanarak mevcut bir komutu kaldırabilirsiniz.

Kontrol Düğmelerini Özelleştirme

PlayerDataBinder simgesini kullanarak kontrolleri özelleştirebilirsiniz. Kontrollerinizin ilk alanını ayarlamak için dokunmatik Kontroller’in altındaki js/receiver.js dosyanıza aşağıdaki kodu ekleyin:

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    // Clear default buttons and re-assign
    touchControls.clearDefaultSlotAssignments();
    touchControls.assignButton(
      cast.framework.ui.ControlsSlot.SLOT_PRIMARY_1,
      cast.framework.ui.ControlsButton.SEEK_BACKWARD_30
    );
  });

context.start();

11. Akıllı ekranlarda medyaya göz atma özelliğini uygulama

Medya Göz Atma, kullanıcıların dokunmatik cihazlarda ek içerikleri keşfetmesine olanak tanıyan bir CAF alıcı özelliğidir. Bunu uygulamak için BrowseContent kullanıcı arayüzünü ayarlamak üzere PlayerDataBinder öğesini kullanırsınız. Ardından, görüntülemek istediğiniz içeriğe göre BrowseItems ile doldurabilirsiniz.

BrowseContent

Aşağıda BrowseContent kullanıcı arayüzü ve özellikleri gösterilmektedir:

1. BrowseContent.title
2. BrowseContent.items

En Boy Oranı

Resim öğeleriniz için en iyi en boy oranını seçmek üzere targetAspectRatio property simgesini kullanın. CAF Receiver SDK'sı üç en boy oranını destekler: SQUARE_1_TO_1, PORTRAIT_2_TO_3, LANDSCAPE_16_TO_9.

BrowseItem

Her öğenin başlığını, alt başlığını, süresini ve resmini görüntülemek için BrowseItem simgesini kullanın:

1. BrowseItem.image
2. BrowseItem.duration
3. BrowseItem.title
4. BrowseItem.subtitle

Medya Göz Atma verilerini ayarlama

setBrowseContent numaralı telefonu arayarak göz atabileceğiniz medya içeriklerinin listesini sağlayabilirsiniz. Göz atma öğelerini "Sonraki" başlıklı bir şekilde ayarlamak için aşağıdaki kodu playerDataBinder dosyanızdaki playerDataBinder öğesinin altına ve MEDIA_CHANGED etkinlik dinleyicinize ekleyin.js/receiver.js

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

...

let browseItems = getBrowseItems();

function getBrowseItems() {
  let browseItems = [];
  makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
  .then(function (data) {
    for (let key in data) {
      let item = new cast.framework.ui.BrowseItem();
      item.entity = key;
      item.title = data[key].title;
      item.subtitle = data[key].description;
      item.image = new cast.framework.messages.Image(data[key].poster);
      item.imageType = cast.framework.ui.BrowseImageType.MOVIE;
      browseItems.push(item);
    }
  });
  return browseItems;
}

let browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = browseItems;
browseContent.targetAspectRatio = cast.framework.ui.BrowseImageAspectRatio.LANDSCAPE_16_TO_9;

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    ....

    // Media browse
    touchControls.setBrowseContent(browseContent);
  });

Bir medya göz atma öğesini tıkladığınızda LOAD müdahaleci tetiklenir. Medya göz atma öğesinden request.media.contentId öğesini request.media.entity ile eşlemek için LOAD aracınıza aşağıdaki kodu ekleyin:

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      ...

      // Map contentId to entity
      if (request.media && request.media.entity) {
        request.media.contentId = request.media.entity;
      }

      return new Promise((resolve, reject) => {
            ...
        });
    });

Medya Göz Atma kullanıcı arayüzünü kaldırmak için BrowseContent nesnesini null olarak da ayarlayabilirsiniz.

12. Alıcı uygulamalarında hata ayıklama

Cast Receiver SDK'sı, geliştiricilerin CastDebugLogger API'yi ve günlükleri yakalamak için tamamlayıcı bir Komut ve Kontrol (CaC) Aracı kullanarak alıcı uygulamalarında kolayca hata ayıklama yapmalarına olanak tanır.

Başlatma

API'yi dahil etmek için index.html dosyanıza CastDebugLogger kaynak komut dosyasını ekleyin. Kaynak, Cast Receiver SDK beyanının ardından <head> etiketinde belirtilmelidir.

<head>
  ...
  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <!-- Cast Debug Logger -->
  <script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>

Dosyanın en üstündeki js/receiver.js içinde ve playerManager'un altına CastDebugLogger örneğini almak ve günlüğe kaydediciyi etkinleştirmek için aşağıdaki kodu ekleyin:

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

Hata ayıklayıcı günlük kaydı etkinleştirildiğinde alıcıda DEBUG MODE görüntüleyen bir yer paylaşımı gösterilir.

Oynatıcı etkinliklerini günlüğe kaydetme

CastDebugLogger'ü kullanarak CAF Receiver SDK'sı tarafından tetiklenen oynatıcı etkinliklerini kolayca günlüğe kaydedebilir ve etkinlik verilerini günlüğe kaydetmek için farklı günlük kaydı düzeyleri kullanabilirsiniz. loggerLevelByEvents yapılandırması, hangi etkinliklerin günlüğe kaydedileceğini belirtmek için cast.framework.events.EventType ve cast.framework.events.category öğelerini kullanır.

Bir oynatıcı CORE etkinliği tetiklendiğinde veya mediaStatus değişikliği yayınlandığında günlüğe kaydetmek için castDebugLogger beyanının altına aşağıdaki kodu ekleyin:

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}

Günlük Mesajları ve Özel Etiketler

CastDebugLogger API, alıcı hata ayıklama yer paylaşımında farklı renklerle görünen günlük mesajları oluşturmanıza olanak tanır. Aşağıdaki günlük yöntemleri kullanılabilir. Öncelik sırasına göre en yüksekten en düşüğe doğru listelenmiştir:

• castDebugLogger.error(custom_tag, message);
• castDebugLogger.warn(custom_tag, message);
• castDebugLogger.info(custom_tag, message);
• castDebugLogger.debug(custom_tag, message);

Her günlük kaydı yönteminde ilk parametre bir özel etikettir. Bu, anlamlı bulduğunuz herhangi bir tanımlayıcı dize olabilir. CastDebugLogger, günlükleri filtrelemek için etiketler kullanır. Etiketlerin kullanımı aşağıda ayrıntılı olarak açıklanmıştır. İkinci parametre günlük mesajıdır.

Günlükleri çalışırken göstermek için LOAD arayıcınıza günlük ekleyin.

playerManager.setMessageInterceptor(
  cast.framework.messages.MessageType.LOAD,
  request => {
    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request');

    // Map contentId to entity
    if (request.media && request.media.entity) {
      request.media.contentId = request.media.entity;
    }

    return new Promise((resolve, reject) => {
      // Fetch content repository by requested contentId
      makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
        .then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            castDebugLogger.error(LOG_TAG, 'Content not found');
            reject();
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            castDebugLogger.warn(LOG_TAG, 'Playable URL:', request.media.contentUrl);

            // Add metadata
            let metadata = new cast.framework.messages.MovieMediaMetadata();
            metadata.metadataType = cast.framework.messages.MetadataType.MOVIE;
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
      });
    });
  });

Her özel etiket için loggerLevelByTags'te günlük düzeyini ayarlayarak hata ayıklama yer paylaşımında hangi mesajların gösterileceğini kontrol edebilirsiniz. Örneğin, cast.framework.LoggerLevel.DEBUG günlük düzeyine sahip bir özel etiket etkinleştirildiğinde hata, uyarı, bilgi ve hata ayıklama günlük mesajlarıyla eklenen tüm mesajlar gösterilir. WARNING düzeyinde bir özel etiket etkinleştirildiğinde yalnızca hata ve uyarı günlük mesajları gösterilir.

loggerLevelByTags yapılandırması isteğe bağlıdır. Bir özel etiket, günlük kaydı düzeyi için yapılandırılmamışsa tüm günlük mesajları hata ayıklama yer paylaşımında gösterilir.

CORE olay günlüğü kaydedicisinin altına aşağıdaki kodu ekleyin:

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}

// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
    [LOG_TAG]: cast.framework.LoggerLevel.DEBUG,
};

Hata Ayıklama Yer Paylaşımlı Reklamı

Yayın Hata Ayıklama Günlükçüsü, özel günlük mesajlarınızı yayın cihazında görüntülemek için alıcıda bir hata ayıklama yer paylaşımı sağlar. Hata ayıklama yer paylaşımını açmak için showDebugLogs, yer paylaşımındaki günlük mesajlarını silmek için clearDebugLogs simgesini kullanın.

Hata ayıklama yer paylaşımını alıcınızda önizlemek için aşağıdaki kodu ekleyin.

context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      // Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
      castDebugLogger.setEnabled(true);

      // Show debug overlay
      castDebugLogger.showDebugLogs(true);

      // Clear log messages on debug overlay
      castDebugLogger.clearDebugLogs();
  }
});

13. Tebrikler

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

Daha fazla bilgi için Web Alıcısı geliştirici kılavuzuna bakın.