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

1. Genel Bakış

Google Cast logosu

Bu codelab'de, Cast uyumlu cihazlarda içerik oynatmak için ö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ı veya masaüstü Chrome Tarayıcı'yı TV'de medya oynatma 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, 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 tahmin edilebilir hale getirmek için sağlanır. Daha fazla bilgi edinin.

Ne geliştireceğiz?

Bu codelab'i tamamladığınızda, Cast uyumlu cihazlarda video içeriği gösterebilen kendi özel alıcınız olarak işlev gören bir HTML5 uygulamanız olacak.

Neler öğreneceksiniz?

  • Alıcı geliştirme için kurulum yapma
  • Cast Uygulama Çerçevesi'ne dayalı, Cast özellikli bir alıcının temel özellikleri.
  • Yayınlanan videoları alma
  • Hata Ayıklama Günlükçüsü'nü entegre etme
  • Alıcınızı akıllı ekranlar için optimize etme

İhtiyacınız olanlar

Deneyim

  • Daha önce web geliştirme bilgisine sahip olmanız gerekir.
  • Ayrıca TV izleme konusunda önceden bilgi sahibi olmanız gerekir :)

Bu eğitimi nasıl kullanacaksınız?

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

Web uygulamaları oluşturma deneyiminizi nasıl değerlendirirsiniz?

Yeni başlayan Orta düzey Uzman

TV izleme deneyiminizi nasıl değerlendirirsiniz?

Başlangıç Orta İleri

2. Örnek kodu alın

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

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" düğmesinin vurgulandığı Google Cast SDK Geliştirici Konsolu'nun resmi

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

"Yeni alıcı uygulaması" ekranının, "Özel alıcı" seçeneği vurgulanmış haldeki resmi

"Özel alıcı"yı seçin. Oluşturacağımız alıcı budur.

"Alıcı Uygulaması URL'si" alanına bir URL yazan kişinin gösterildiği "Yeni Özel Alıcı" ekranının resmi

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.

Google Cast SDK Geliştirici Konsolu'nun "Yeni Cihaz Ekle" düğmesi vurgulanmış görüntüsü

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

"Yayın alıcı cihaz ekle" iletişim kutusunun resmi

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 test için hazır olması 5-15 dakika sürer. 5-15 dakika bekledikten sonra yayın cihazınızı yeniden başlatmanız gerekir.

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

Google Chrome logosu

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

Tarayıcınızda Komuta ve Kontrol (CaC) Aracı'nı açın.

Komuta ve Kontrol (CaC) aracının "Cast Connect ve Logger Denetimleri" sekmesinin resmi

  1. Müşteri edinme maliyeti 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 Yayınla düğmesini tıklayın ve Google Cast cihazınızı seçin.

Komuta ve Kontrol (CaC) aracının "Cast Connect ve Logger Kontrolleri" sekmesinin, alıcı uygulamasına bağlı olduğunu gösteren resmi

  1. Üst kısımdaki "Medya Yükle" sekmesine gidin.

Komuta ve Kontrol (CaC) aracının "Medya Yükle" sekmesinin resmi

  1. Örnek bir video oynatmak için "İçeriğe Göre Yükle" düğmesini tıklayın.
  2. Video, varsayılan alıcı kullanılarak temel alıcı işlevinin nasıl göründüğünü göstermek için Google Cast yayın 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 codelab'de kullanacağımız bazı Google Cast terimleri şunlardır:

  • Bir gönderen uygulaması mobil cihazda veya dizüstü bilgisayarda çalışıyorsa,
  • Google Cast cihazında bir alıcı uygulaması çalışıyor olmalıdır.

Artık en sevdiğiniz metin düzenleyiciyi kullanarak başlangıç projesinin üzerine yeni özellikler eklemeye hazırsınız:

  1. Örnek kod indirme işleminizden klasör simgesiapp-start dizinini seçin.
  2. js/receiver.js ve index.html özelliklerini etkinleştirin

Bu codelab'i uygularken http-server, yaptığınız değişiklikleri algılamalıdır. Çalışmadığını fark ederseniz http-server uygulamasını kapatıp yeniden başlatmayı deneyin.

Uygulama Tasarımı

Alıcı uygulaması, Cast oturumunu başlatır ve gönderenden bir LOAD isteği (diğer bir deyişle, bir medya içeriğini oynatma komutu) gelene kadar beklemede kalır.

Uygulama, index.html içinde tanımlanan bir ana görünümden 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çerir. Şimdilik boş olan bu dosyaya, kod laboratuvarı boyunca içerik ekleyeceğiz.

receiver.js

Bu komut dosyası, alıcı uygulamamızın tüm mantığını yönetir. Şu anda boş bir dosya olsa da bir sonraki bölümde yalnızca birkaç satır kodla tam işlevli bir Cast alıcısına dönüştüreceğiz.

7. Temel bir Cast alıcısı

Temel bir Cast alıcısı, başlangıçta Cast oturumunu başlatır. Bu, bağlı tüm gönderen uygulamalarına alıcının başlatılmasının başarılı olduğunu bildirmek için gereklidir. Ayrıca yeni SDK, uyarlanabilir bit hızlı akışlı medyayı (DASH, HLS ve Smooth Streaming kullanarak) ve düz MP4 dosyalarını kutudan çıkarıldığı gibi işlemek üzere önceden yapılandırılmış olarak gelir. Bunu deneyelim.

İlk kullanıma hazırlama

Üstbilgideki index.html bölümüne 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'sına, yeni eklediğiniz komut dosyasıyla birlikte gelen varsayılan alıcı kullanıcı arayüzünü başlatması için alan sağlamak üzere aşağıdaki kodu index.html <body> öğesine <footer> loading receiver.js, öğesinden önce ekleyin.

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

Şimdi, aşağıdakilerden oluşan js/receiver.js içinde SDK'yı başlatmamız gerekiyor:

  • Tüm alıcı SDK'sına birincil giriş noktanız olan CastReceiverContext için referans edinme
  • PlayerManager öğesine referans depolama (oynatmayı işleyen ve kendi özel mantığınızı eklemek için ihtiyacınız olan tüm kancaları sağlayan nesne)
  • start() işlevini CastReceiverContext üzerinde çağırarak 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'in amacı doğrultusunda, yepyeni 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.

Komuta ve Kontrol (CaC) aracının &quot;Cast Connect ve Logger Denetimleri&quot; sekmesinin resmi

Alana daha önce kaydettiğiniz kendi uygulama kimliğinizi girdiğinizden emin olun ve "Uygulama Kimliğini Ayarla"yı tıklayın. Bu seçenek, Cast oturumu başlatılırken alıcınızın kullanılmasını sağlar.

Medya yayınlama

Özet olarak, bir Cast cihazda medya oynatmak için aşağıdakilerin gerçekleşmesi gerekir:

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

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

Gerçek bir gönderen, MediaInfo.contentId içinde 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 öğesini tanımlayıcı olarak kullanır. Alıcı, DRM lisansı edinme veya reklam aralarıyla ilgili bilgileri yerleştirme gibi görevleri de yönetir.

Alıcınızı, bir sonraki bölümde benzer bir işlem yapacak şekilde genişleteceğiz. Şimdilik alıcınızı açmak için Yayınla simgesini tıklayıp cihazınızı seçin.

Komuta ve Kontrol (CaC) aracının &quot;Cast Connect ve Logger Kontrolleri&quot; sekmesinin, alıcı uygulamasına bağlı olduğunu gösteren resmi

"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şlamalıdır.

Komuta ve Kontrol (CaC) aracının &quot;Medya Yükle&quot; sekmesinin resmi

Bu nedenle, Receiver SDK aşağıdaki işlemleri kutudan çıktığı haliyle gerçekleştirir:

  • Yayınlama oturumu başlatılıyor
  • Oynatılabilir öğ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.

Gönderenlerden gelen LOAD isteklerini karşılamak için alıcımızı basit bir örnek API ile iletişim kuracak şekilde genişleteceğimiz bir sonraki bölüme geçmeden önce CaC aracını ve kodunu inceleyebilirsiniz.

9. Harici bir API ile entegrasyon

Çoğu geliştiricinin gerçek dünya uygulamalarında Cast alıcılarıyla etkileşim kurma şekline uygun olarak, oynatılabilir bir öğe URL'si göndermek yerine amaçlanan medya içeriğine API anahtarıyla referans veren LOAD isteklerini işlemek için alıcımızı değiştireceğiz.

Uygulamalar genellikle şu nedenlerle bunu 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 üzere tasarlanmıştır.

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

  • Gelen LOAD isteği ve özel contentId'i okuyun.
  • Yayınlanabilir öğeyi contentId ile aramak için API'mize GET çağrısı yapın.
  • Akışın URL'siyle LOAD isteğini değiştirin.
  • Yayın türü parametrelerini ayarlamak için MediaInformation nesnesini değiştirin.
  • İsteği oynatma için SDK'ya iletin veya istenen medya aranamıyorsa komutu reddedin.

Sağlanan örnek API, SDK'nın yaygın alıcı görevlerini özelleştirmeye yönelik kancalarını gösterirken büyük ölçüde kullanıma hazır bir deneyime dayanmaya devam eder.

Örnek API

Tarayıcınızı https://storage.googleapis.com/cpe-sample-media/content.json adresine yönlendirerek örnek video kataloğumuza göz atın. İçerik, png biçimindeki poster resimlerinin URL'lerinin yanı sıra hem DASH hem de HLS yayınlarını içerir. DASH ve HLS akışları, parçalanmış MP4 kapsayıcılarında depolanan demukse edilmiş 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"
  },

  [...]

}

Bir sonraki adımda, alıcı LOAD isteğiyle çağrıldıktan sonra her girişin anahtarını (örneğin, bbb, fbb_ad) akışın URL'siyle eşleyeceğiz.

LOAD isteğine müdahale gerçekleştirin

Bu adımda, barındırılan JSON dosyasına XHR isteği gönderen bir işlevle yükleme ö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 özelliğinin nasıl yapılandırılacağı açıklanmaktadır.

Örnek API DASH İçeriğini Kullanma

Yükleme önleyiciyi 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. Aşağıdaki kodu LOAD interceptor'daki Promise() js/receiver.js dosyasına 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 bölümüne geçebilirsiniz. Yüklemeyi HLS içeriğiyle test etmek istiyorsanız sonraki adıma göz atın.

Örnek API HLS İçeriğini Kullanma

Örnek API, DASH'in yanı sıra HLS içeriğini de içerir. Önceki adımda yaptığımız gibi contentType ayarını yapmanın yanı sıra, örnek API'nin HLS URL'lerini kullanmak için yükleme isteğinin bazı ek özelliklere ihtiyacı olacaktır. Alıcı, HLS akışlarını oynatacak şekilde yapılandırıldığında beklenen varsayılan kapsayıcı türü aktarım akışıdır (TS). Sonuç olarak, yalnızca contentUrl özelliği değiştirilirse alıcı, örnek MP4 akışlarını TS biçiminde açmaya çalışır. Yükleme isteğinde, alıcının içeriğin TS değil MP4 türünde olduğunu bilmesi için MediaInformation nesnesi ek özelliklerle değiştirilmelidir. Yükleme önleyici bölümündeki js/receiver.js dosyanıza aşağıdaki kodu ekleyerek contentUrl ve contentType özelliklerini değiştirin. 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

Komuta ve Kontrol (CaC) Aracı'nı tekrar açın ve uygulama kimliğinizi alıcınızın uygulama kimliği olarak ayarlayın. Yayınla düğmesini kullanarak cihazınızı seçin.

"Medya Yükle" sekmesine gidin. Bu kez, "Load by Content" (İçeriğe Göre Yükle) düğmesinin yanındaki "Content URL" (İçerik URL'si) alanındaki metni silin. Bu işlem, uygulamamızı yalnızca medyalarımıza contentId referansını içeren bir LOAD isteği göndermeye zorlar.

Komuta ve Kontrol (CaC) aracının &quot;Medya Yükle&quot; sekmesinin resmi

Alıcıda yaptığınız değişikliklerle ilgili her şeyin düzgün çalıştığını varsayarsak, araya giren, MediaInfo nesnesini SDK'nın ekranda oynatabileceği bir şekle dönüştürmelidir.

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

10. Akıllı ekranlar için optimizasyon

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

Bu bölümde, akıllı ekranlarda başlatıldığında alıcı uygulamanızı 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ü kontrolleri nesnesine cast.framework.ui.Controls.GetInstance() kullanılarak erişilebilir. js/receiver.js dosyanızda context.start() öğesinin ü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 touchScreenOptimizedApp değerini CastReceiverOptions içinde 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'ye göre her yuvaya atanır.

Video kontrolleri

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

Üzerinde kullanıcı arayüzü kontrolleri bulunan, oynatılan video resmi

  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 Denetimleri

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

Üzerinde kullanıcı arayüzü kontrolleri bulunan, çalan müzik görseli

  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, ControlsButton öğesinin MediaStatus.supportedMediaCommands temelinde gösterilip gösterilmeyeceğini de belirler.

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

Medya oynatıcı kontrollerinin resmi: ilerleme çubuğu, &quot;Oynat&quot; düğmesi, &quot;İleri atla&quot; ve &quot;Geri atla&quot; düğmeleri etkin

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

Medya oynatıcı kontrollerinin resmi: ilerleme çubuğu, &quot;Oynat&quot; düğmesi, &quot;İleri atla&quot; ve &quot;Geri atla&quot; düğmeleri ile &quot;Önceki sıraya al&quot; ve &quot;Sonraki sıraya al&quot; düğmeleri etkin

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

Medya oynatıcı kontrollerinin resmi: ilerleme çubuğu, &quot;Oynat&quot; düğmesi, &quot;Önceki öğeyi sıraya ekle&quot; ve &quot;Sonraki öğeyi sıraya ekle&quot; düğmeleri etkin

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

Medya oynatıcı kontrollerinin resmi: ilerleme çubuğu, &quot;Oynat&quot; düğmesi, &quot;İleri sar&quot; ve &quot;Geri sar&quot; düğmeleri, &quot;Önceki sıraya al&quot; ve &quot;Sonraki sıraya al&quot; düğmeleri ve &quot;Altyazı&quot; düğmeleri etkin

Alıcı bağlamı başlatıldıktan sonra supportedMediaCommands değerini dinamik olarak değiştirmek için PlayerManager.setSupportedMediaCommands çağrısı yaparak değeri geçersiz kılabilirsiniz. Ayrıca, addSupportedMediaCommands kullanarak yeni bir komut ekleyebilir veya removeSupportedMediaCommands kullanarak mevcut bir komutu kaldırabilirsiniz.

Kontrol Düğmelerini Özelleştirme

PlayerDataBinder kullanarak kontrolleri özelleştirebilirsiniz. Kontrollerinizin ilk yuvasını ayarlamak için js/receiver.js dosyanıza, touchControls'un altına 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 medya taramayı 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 kullanacaksınız. Ardından, göstermek istediğiniz içeriğe göre BrowseItems ile doldurabilirsiniz.

BrowseContent

Aşağıda, BrowseContent kullanıcı arayüzü ve özellikleriyle ilgili bir örnek verilmiştir:

BrowseContent kullanıcı arayüzünün, iki video küçük resmi ve üçüncüsünün bir bölümünü gösteren resmi

  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östermek için BrowseItem simgesini kullanın:

BrowseContent kullanıcı arayüzünün, iki video küçük resmi ve üçüncüsünün bir bölümünü gösteren resmi

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

Set Media Browse verileri

setBrowseContent numaralı telefonu arayarak göz atılacak medya içeriklerinin listesini sağlayabilirsiniz. Aşağıdaki kodu, "Sıradaki" başlıklı öğelere göz atmayı ayarlamak için js/receiver.js dosyanızda playerDataBinder öğesinin altına ve MEDIA_CHANGED etkinlik işleyicinize 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);

...

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 tarama öğesini tıkladığınızda LOAD yakalayıcısı tetiklenir. Aşağıdaki kodu LOAD önleyici işlevinize ekleyerek request.media.contentId öğesini medya tarama öğesinden request.media.entity öğesine eşleyin:

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, geliştiricilere CastDebugLogger API'yi ve günlükleri yakalamak için yardımcı bir Komut ve Kontrol (CaC) Aracı'nı kullanarak alıcı uygulamalarında kolayca hata ayıklama yapma imkanı sunar.

Başlatma

API'yi dahil etmek için index.html dosyanıza CastDebugLogger kaynak komut dosyasını ekleyin. Kaynak, Cast alıcı SDK bildirimi sonrasında <head> etiketinde bildirilmelidir.

<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 bölümünde ve playerManager bölümünün altında, CastDebugLogger örneğini almak ve 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ıklama kaydedicisi etkinleştirildiğinde alıcıda DEBUG MODE simgesini gösteren bir yer paylaşımı gösterilir.

Çerçevenin sol üst köşesinde kırmızı arka plan üzerinde &quot;DEBUG MODE&quot; (Hata Ayıklama Modu) mesajının göründüğü bir videonun oynatıldığına dair resim

Oynatıcı Etkinliklerini Günlüğe Kaydetme

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

Bir CORE etkinliği tetiklendiğinde veya bir mediaStatus değişikliği yayınlandığında günlüğe kaydetmek için castDebugLogger bildiriminin 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ı renklerde görünen günlük mesajları oluşturmanıza olanak tanır. Aşağıdaki günlük yöntemleri, en yüksek öncelikten en düşük önceliğe doğru sıralanmış şekilde kullanılabilir:

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

Her günlük yöntemi için ilk parametre bir özel etikettir. Bu, anlamlı bulduğunuz herhangi bir tanımlama dizesi olabilir. CastDebugLogger, günlükleri filtrelemek için etiketleri 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 işlem sırasında göstermek için LOAD önleyiciye 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 içinde günlük düzeyini ayarlayarak hata ayıklama yer paylaşımında hangi mesajların görüneceğini kontrol edebilirsiniz. Örneğin, günlük düzeyi cast.framework.LoggerLevel.DEBUG olan bir özel etiketin etkinleştirilmesi, hata, uyarı, bilgi ve hata ayıklama günlük mesajlarıyla eklenen tüm iletileri gösterir. WARNING düzeyinde özel bir etiketin etkinleştirilmesi yalnızca hata ve uyarı günlük mesajlarını gösterir.

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

Aşağıdaki kodu CORE etkinlik kaydedicinin altına 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,
};

Yer paylaşımlı hata ayıklama ekranı

Cast Debug Logger, yayın cihazında özel günlük mesajlarınızı göstermek için alıcıda hata ayıklama yer paylaşımı sağlar. Hata ayıklama yer paylaşımını etkinleştirmek/devre dışı bırakmak için showDebugLogs, yer paylaşımındaki günlük iletilerini temizlemek için clearDebugLogs tuşunu kullanın.

Alıcınızda hata ayıklama yer paylaşımını ö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();
  }
});

Hata ayıklama yer paylaşımını gösteren resim. Video karesinin üzerinde yarı saydam arka plan üzerinde hata ayıklama günlüğü mesajlarının listesi.

13. Tebrikler

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

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