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

1. Genel bakış

Google Cast logosu

Bu codelab'de, Yayın özellikli cihazlarda içerik oynatmak için Özel Web Alıcısı uygulamasının nasıl oluşturulacağı açıklanmaktadır.

Google Cast nedir?

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

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

Google Cast Tasarım Listesi, Cast kullanıcı deneyimini desteklenen tüm platformlarda basit ve tahmin edilebilir hale getirmek amacıyla hazırlanmıştır. Daha fazla bilgi edinin.

Ne tür bir kampanya oluşturacağız?

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

Neler öğreneceksiniz?

  • Alıcı geliştirme için hazırlık nasıl yapılır?
  • Yayın Uygulaması Çerçevesi'ne dayalı olarak Cast özellikli bir alıcıyla ilgili temel bilgiler.
  • Yayınlanan videolar nasıl alınır?
  • Hata Ayıklama Günlük Kaydı nasıl entegre edilir?
  • Alıcınızı akıllı ekranlar için nasıl optimize edebilirsiniz?

Gerekenler

Deneyim

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

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

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

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

Acemi Orta Yeterli

TV izleme deneyiminizi nasıl değerlendirirsiniz?

Acemi Orta Yeterli

2. Örnek kodu alın

Tüm örnek kodu 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ın Yayın cihazıyla kullanılabilmesi için yayın cihazınızın yayın cihazına ulaşabileceği bir yerde barındırılması gerekir. https'yi destekleyen bir sunucunuz zaten varsa aşağıdaki talimatları atlayın ve sonraki bölümde ihtiyaç duyacağınız 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 bölümüne gidip sunucunuzu başlatın.

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

4. Cast Developer Console'da uygulama kaydetme

Bu codelab'de açıklandığı şekilde Chromecast cihazlarda özel bir 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 için kullanması gereken bir uygulama kimliği (ör. bir alıcı uygulama başlatmak) alırsınız.

"Yeni Uygulama Ekle" düğmesinin vurgulandığı Google Cast SDK Console

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

"Özel Alıcı" seçeneğinin vurgulandığı "Yeni Alıcı Uygulaması" ekranının resmi

"Özel Alıcı"yı seçin. Oluşturduğumuz öğe budur.

Bir kullanıcının "Alıcı Uygulama URL'si" alanına yazdığı URL'yi gösteren "Yeni Özel Alıcı" ekranının resmi

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

belirleyebilirsiniz. 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 amaçları doğrultusunda, yayınlanmamış bir alıcı uygulamayla çalışmanızı öneririz.

"Yeni Cihaz Ekle" düğmesinin vurgulandığı Google Cast SDK'sı Geliştirici Konsolu'nun resmi

"Yeni Cihaz Ekle"yi tıklayın.

"Yayın Alıcısı Cihazı Ekle" iletişim kutusunun resmi

Yayın cihazınızın arkasında yazılı olan seri numarasını girin ve açıklayıcı bir ad verin. Google Cast SDK Developer Console'a erişirken ekranınızı Chrome'da yayınlayarak da seri numaranızı 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. Örnek uygulamayı çalıştırın

Google Chrome logosu

Yeni alıcı uygulamamızın test için hazır olmasını beklerken, örnek bir alıcı uygulamasının nasıl göründüğünü inceleyelim. Oluşturacağımız alıcı, uyarlamalı bit hızı akışını kullanarak medyayı oynatabilecek (HTTP üzerinden Dinamik Uyarlanabilir Yayın (DASH) için kodlanmış örnek içeriği kullanacağız).

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

Komut ve Kontrol (CaC) Aracının "Yayın Bağlantısı ve Günlük Kaydı Denetimleri" sekmesinin resmi

  1. CaC Aracımızı görmeniz gerekir.
  2. Varsayılan "CC1AD845" örnek alıcı kimliğini kullanın ve "Set App ID" (Uygulama Kimliğini Ayarla) düğmesini tıklayın.
  3. Sol üstteki Yayın düğmesini tıklayıp Google Cast cihazınızı seçin.

Komut ve Kontrol (CaC) Aracı 'nın, bir Alıcı Uygulaması'na bağlı olduğunu gösteren "Yayın Bağlantı ve Günlük Kaydı Denetimleri" sekmesinin resmi

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

Komut ve Kontrol (CaC) Aracının "Medya Yükle" sekmesinin resmi

  1. Örnek video oynatmak için "İçeriğe göre yükle" düğmesini tıklayın.
  2. Video, Varsayılan Alıcı işlevini kullanarak temel alıcı işlevlerinin nasıl göründüğünü göstermek için Google Cast cihazınızda oynatılmaya başlar.

6. Başlangıç projesini hazırlama

İndirdiğiniz başlangıç uygulamasına, Google Cast için destek eklememiz gerekiyor. Bu codelab'de kullanacağımız bazı Google Cast terimleri şunlardır:

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

Artık favori metin düzenleyicinizi kullanarak başlangıç projesini temel alabilirsiniz:

  1. Örnek kod indirme işleminizden klasör simgesiapp-start dizinini seçin.
  2. js/receiver.js ve index.html dosyalarını aç

Bu codelab'de çalışırken http-server adlı kullanıcının yaptığınız değişiklikleri kabul etmesi gerektiğini unutmayın. Olmadığını fark ederseniz http-server uygulamasını sonlandırıp yeniden başlatmayı deneyin.

Uygulama Tasarımı

Alıcı uygulama, Yayın oturumunu başlatır ve bir gönderenden gelen YÜKLE isteği (diğer bir deyişle, bir medya parçasını oynatma komutu) gelene kadar beklemede kalır.

Uygulama, index.html dilinde tanımlanan bir ana görünüm ve alıcımızın çalışması için 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ş. Kod laboratuvarına bu bölümü ekleyeceğiz.

alıcı.js

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

7. Temel Yayın alıcısı

Temel bir Yayın alıcısı başlangıçta Yayın oturumunu başlatır. Bu ayar, bağlı tüm gönderen uygulamalarına alıcının algılanmasının başarılı olduğunu bildirmek için gereklidir. Ayrıca yeni SDK, uyarlanabilir bit hızı akış medyasını (DASH, HLS ve Smooth Streaming kullanarak) ve düz MP4 dosyalarını kullanıma hazır olarak yönetmek için önceden yapılandırılmış olarak gelir. Bunu deneyelim.

Başlatma

Başlıkta index.html koduna şu kodu ekleyin:

<head>
  ...

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

Az önce eklediğiniz komut dosyasıyla birlikte gönderilen, varsayılan alıcı kullanıcı arayüzünü bulması için alıcı SDK'sına alan sağlamak üzere receiver.js, <footer> yüklemeden önce aşağıdaki kodu index.html <body> bölümüne ekleyin.

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

Şimdi, SDK'yı js/receiver.js dilinde başlatmamız gerekiyor. Şunlardan oluşur:

  • Alıcı SDK'sının tamamına yönelik birincil giriş noktanız olan CastReceiverContext için referans alma
  • PlayerManager referansını depolayarak oynatma işlemini işleyen nesne; kendi özel mantığınızı bağlamak için ihtiyacınız olan tüm kancaları sunar
  • CastReceiverContext itibarıyla start() çağrılıp SDK başlatılıyor

Aşağıdakileri js/receiver.js koleksiyonuna ekleyin.

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

context.start();

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

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

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

Komut ve Kontrol (CaC) Aracının &quot;Yayın Bağlantısı ve Günlük Kaydı Denetimleri&quot; sekmesinin resmi

Alanda daha önce kaydettirildiği şekilde kendi uygulama kimliğinizi değiştirmeyi unutmayın ve "Uygulama Kimliğini Ayarla"yı tıklayın. Bu işlem, araca, Yayın oturumunu başlatırken alıcınızı kullanmasını bildirir.

Medya yayınlanıyor

Genel olarak, Yayın cihazında medya oynatmak için aşağıdakilerin yapılması gerekir:

  1. Gönderen, Cast SDK'sından bir medya öğesi 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 MediaInfo nesnesini LOAD isteği aracılığıyla yükler.
  4. Alıcı, medya durumunu izler ve izler.
  5. Gönderen, gönderen uygulamayla ilgili kullanıcı etkileşimlerine göre oynatmayı kontrol etmek için alıcıya oynatma komutları gönderir.

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

Gerçek dünyadaki bir gönderen, MediaInfo.contentId uygulamasında uygulamaya özel bir medya tanımlayıcısı kullanıyor. Alıcı, gerçek öğe URL'sini çözümlemek ve MediaInfo.contentUrl. olarak ayarlamak için uygun arka uç API çağrılarını yapmak üzere contentId tanımlayıcısını da kullanır. Alıcı, DRM lisans edinme veya reklam araları hakkında bilgi ekleme gibi görevleri de gerçekleştirir.

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

Komut ve Kontrol (CaC) Aracı &#39;nın, bir Alıcı Uygulaması&#39;na bağlı olduğunu gösteren &quot;Yayın Bağlantı ve Günlük Kaydı Denetimleri&quot; sekmesinin 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.

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

Böylece, Alıcı SDK'sı kullanıma hazır olarak şunları 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örüntülenmeye hazır olan 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şfetmekten çekinmeyin. 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 dünyadaki uygulamalarda Yayın Alıcıları ile etkileşim kurma şekline uygun olarak alıcımızı, oynanabilir bir öğe URL'si göndermek yerine API anahtarıyla amaçlanan medya içeriğine referans veren LOAD isteklerini işleyecek şekilde değiştireceğiz.

Uygulamalar bunu genellikle aşağıdaki nedenlerle 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ı üzerinde işleyecek şekilde tasarlanmıştır.

Bu işlev birincil olarak PlayerManager setMessageInterceptor() yönteminde uygulanır. Bu sayede gelen mesajlara türe müdahale edip SDK'nın dahili mesaj işleyicisine ulaşmadan önce değişiklik yapabilirsiniz. Bu bölümde, aşağıdaki işlemleri gerçekleştireceğimiz LOAD isteği ele alacağız:

  • Gelen LOAD isteğini ve özel contentId isteğini okuyun.
  • Akışa açık öğeyi contentId tarihine kadar aramak için API'mize GET çağrısı yapın.
  • LOAD isteğini akışın URL'siyle değiştirin.
  • Akış türü parametrelerini ayarlamak için MediaInformation nesnesini değiştirin.
  • Oynatma için isteği SDK'ya iletin veya istenen medyayı bulamazsak komutu reddedin.

Sağlanan örnek API, sık kullanılan alıcı görevlerini özelleştirmek için SDK'nın kancalarını gösterirken, neredeyse kullanıma hazır bir deneyimden yararlanmaya devam eder.

Örnek API

Tarayıcınızı https://storage.googleapis.com/cpe-sample-media/content.json adresine yönlendirin ve örnek video kataloğumuza göz atın. İçerik, png biçiminde poster resimlerinin URL'lerinin yanı sıra hem DASH hem de HLS akışlarını içerir. DASH ve HLS akışları, parçalara ayrılmış mp4 kapsayıcılarında depolanan mumsuz video ve ses kaynaklarını işaret eder.

{
  "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ı bir LOAD isteği ile ç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 et

Bu adımda, barındırılan JSON dosyasına XHR isteğinde bulunan bir işleve sahip bir yük müdahalecisi oluşturacağız. JSON dosyası alındıktan sonra, içeriği ayrıştırır ve meta verileri belirleriz. Aşağıdaki bölümlerde MediaInformation parametrelerini, içerik türünü belirtecek şekilde ö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ük müdahalesi için hazırlık yaptığımıza göre şimdi içerik türünü alıcıya belirteceğiz. Bu bilgiler, alıcıya ana oynatma listesi URL'sini ve akış MIME türünü sağlayacaktır. Aşağıdaki kodu LOAD müdahalesinin Promise() alanındaki js/recipientr.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 Etmeye geçebilirsiniz. Bunun yerine HLS içeriğiyle yüklemeyi test etmek istiyorsanız bir sonraki adıma göz atın.

Örnek API HLS İçeriğini Kullanma

Örnek API'de HLS içeriğinin yanı sıra DASH içeriği de bulunur. Önceki adımda yaptığımız gibi contentType'i ayarlamanın yanı sıra, yükleme isteğinin örnek API'nin HLS URL'lerini kullanmak için bazı ek özelliklere ihtiyacı vardır. Alıcı, HLS akışlarını oynatacak şekilde yapılandırıldığında, varsayılan kapsayıcı türü taşıma akışıdır (TS). Bu nedenle, 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 MediaInformation nesnesinin ek özelliklerle değiştirilmesi gerekir. Böylece alıcı, içeriğin TS değil MP4 türünde olduğunu bilir. contentUrl ve contentType özelliklerini değiştirmek için aşağıdaki kodu yükleme engelleyicideki js/recipientr.js dosyanıza 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

Komut ve Kontrol (CaC) Aracı'nı tekrar açıp Uygulama Kimliğinizi alıcının Uygulama Kimliğine ayarlayın. Yayınla düğmesini kullanarak cihazınızı seçin.

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

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

Alıcıda yaptığınız değişikliklerde her şeyin düzgün çalıştığını varsayarsak, aracı müdahale eden tarafın MediaInfo nesnesini SDK'nın ekranda oynayabileceği şekilde şekillendirmesi gerekir.

Medyalarını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ında Content ID'yi istediğiniz şekilde değiştirebilirsiniz.

10. Akıllı ekranlar için optimizasyon

Akıllı ekranlar, alıcı uygulamalarının dokunmatik denetimleri desteklemesini sağlayan, dokunmatik işlevlere 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. Aşağıdaki kodu context.start() dosyanızın üzerindeki js/receiver.js dosyanıza ekleyin:

...

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

context.start();

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

context.start({ touchScreenOptimizedApp: true });

Varsayılan kontrol düğmeleri, her alana MetadataType ve MediaStatus.supportedMediaCommands temel alınarak atanır.

Video Denetimleri

MetadataType.MOVIE, MetadataType.TV_SHOW ve MetadataType.GENERIC ile ilgili olarak Akıllı Ekranlar için Kullanıcı Arayüzü Kontrolleri nesnesi aşağıdaki örnekte olduğu gibi gösterilecektir.

Ü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 Kontrolleri

MetadataType.MUSIC_TRACK için, Akıllı Ekranların kullanıcı arayüzü Kontrolleri nesnesi şu şekilde görüntülenecektir:

Üzerinde kullanıcı arayüzü kontrollerinin bulunduğu bir müziğin resmi

  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ü denetimleri nesnesi, ControlsButton öğesinin gösterilip gösterilmeyeceğini MediaStatus.supportedMediaCommands üzerinden belirler.

supportedMediaCommands değeri ALL_BASIC_MEDIA olduğunda, varsayılan denetim düzeni aşağıdaki gibi görünür:

Medya oynatıcı kontrollerinin resmi: İlerleme ç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 olduğunda, varsayılan denetim düzeni aşağıdaki gibi görünür:

Medya oynatıcı kontrollerinin resmi: ilerleme çubuğu, &quot;Oynat&quot; düğmesi, &quot;İleri atla&quot; ve &quot;Geri atla&quot; düğmeleri, &quot;Öncekini sırala&quot; ve &quot;Sonraki sıraya&quot; düğmeleri etkinleştirildi

DesteklenenMediaCommands değeri PAUSE | QUEUE_PREV | QUEUE_NEXT olduğunda, varsayılan kontrol düzeni aşağıdaki gibi görünür:

Medya oynatıcı kontrollerinin resmi: İlerleme çubuğu, &quot;Oynat&quot; düğmesi ve &quot;Sıraya git&quot; ve &quot;Sonraki sıraya&quot; düğmeleri etkinleştirildi

Metin parçaları mevcut olduğunda altyazı düğmesi her zaman SLOT_1 adresinde 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, &quot;Öncekini sırala&quot; ve &quot;Sonraki sıraya&quot; düğmeleri ve &quot;Altyazı&quot; düğmeleri etkinleştirildi

Bir alıcı bağlamı başlattıktan sonra supportedMediaCommands değerini dinamik olarak değiştirmek için PlayerManager.setSupportedMediaCommands işlevini çağırarak 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 denetimleri özelleştirebilirsiniz. Kontrollerinizin ilk alanını ayarlamak için dokunmatik kontrollerin 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

Medyaya Göz Atma, kullanıcıların dokunmatik cihazlarda ek içerikleri keşfetmesini sağlayan bir CAF Alıcı özelliğidir. Bunu uygulamak için BrowseContent kullanıcı arayüzünü ayarlamak üzere PlayerDataBinder kullanmanız gerekir. Daha sonra, görüntülemek istediğiniz içeriğe bağlı olarak bu alanı BrowseItems ile doldurabilirsiniz.

İçeriğe Göz At

Aşağıda, BrowseContent kullanıcı arayüzü ve özelliklerinin bir örneği verilmiştir:

İki video küçük resmi ve üçte birlik kısmının bir kısmını gösteren Göz Atma İçeriği kullanıcı arayüzünün 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 özelliğini kullanın. CAF Alıcı SDK'sı tarafından üç en boy oranı desteklenir: SQUARE_1_TO_1, PORTRAIT_2_TO_3, LANDSCAPE_16_TO_9.

Öğeye Göz At

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

İki video küçük resmi ve üçte birlik kısmının bir kısmını gösteren Göz Atma İçeriği kullanıcı arayüzünün resmi

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

Medyaya Göz Atma verilerini ayarlama

setBrowseContent hizmetini arayarak göz atmak için medya içeriğinin listesini sağlayabilirsiniz. Aşağıdaki kodu playerDataBinder dosyanızın altındaki js/receiver.js dosyanıza ve MEDIA_CHANGED etkinlik dinleyicinize, göz atma öğelerini "Sonraki" başlığına sahip olarak ayarlamak için 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);
  });

Medyaya göz atma öğesini tıkladığınızda LOAD müdahalesi tetiklenir. request.media.contentId öğesini medya tarama öğesinden request.media.entity ile eşlemek için aşağıdaki kodu LOAD aracınıza 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) => {
            ...
        });
    });

Medyalara 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 Buyer SDK'sı, geliştiricilerin günlük kayıtlarını yakalamak için CastDebugLogger API'yi ve tamamlayıcı Command and Control (CaC) Aracı'nı kullanarak alıcı uygulamalarında kolayca hata ayıklaması için başka bir seçenek sunar.

Başlatma

API'yi eklemek için index.html dosyanıza CastDebugLogger kaynak komut dosyasını ekleyin. Kaynak, Yayın Alıcı SDK bildiriminden sonra <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>

js/receiver.js örneğini, dosyanın üst kısmındaki playerManager bölümünde ve CastDebugLogger örneğini almak ve Logger'ı 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 günlük kaydı etkinleştirildiğinde, alıcıda DEBUG MODE yer paylaşımlı bir yer paylaşımı gösterilir.

Çerçevenin sol üst köşesinde kırmızı bir arka plan üzerinde &quot;HATA AYIKLAMA MODU&quot; mesajının gösterildiği videonun resmi

Günlük Oynatıcı Etkinlikleri

CastDebugLogger kullanarak, CAF Alıcı SDK'sı tarafından tetiklenen oynatıcı etkinliklerini kolayca 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 değerlerini kullanır.

Oynatıcı CORE etkinliği tetiklendiğinde veya mediaStatus değişikliği yayınlandığında günlüğe kaydetmek için castDebugLogger bildiriminin altına şu 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
}

İletileri ve Özel Etiketleri günlüğe kaydetme

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 ve en yüksek öncelikli olandan en düşük öncelikli olana doğru sıralanır:

  • 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. Anlamlı bulduğunuz herhangi bir tanımlayıcı 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 uygulamada göstermek için LOAD aracı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 bir özel etiket için loggerLevelByTags düzeyinde günlük düzeyini ayarlayarak hata ayıklama yer paylaşımında hangi iletilerin görüneceğini kontrol edebilirsiniz. Örneğin, günlük düzeyi cast.framework.LoggerLevel.DEBUG olan bir özel etiket etkinleştirildiğinde hata, uyarı, bilgi ekleme ve günlük hata ayıklama hatalarının tümünü ekler. Özel düzeyde WARNING etiketi etkinleştirildiğinde yalnızca hata gösterilir ve günlük mesajları gösterilir.

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

CORE olay günlüğünün 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şımı

Cast Debug Loger, ö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çıp kapatmak için showDebugLogs, yer paylaşımlı günlük mesajlarını temizlemek içinse clearDebugLogs kullanın.

Alıcınızdaki 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();
  }
});

Video çerçevesinin üstünde yarı saydam bir arka planda bulunan hata ayıklama günlük mesajlarının listesi olan hata ayıklama yer paylaşımının gösterildiği resim

13. Tebrikler

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

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