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

1. Genel bakış

Google Cast logosu

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

Google Cast nedir?

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

Google Cast SDK'sı, uygulamanızın Google Cast uyumlu cihazları (örneğin, TV veya ses sistemi) kontrol etmesine olanak tanır. Cast SDK'sı, Google Cast Tasarım Kontrol Listesi'ne uygun olarak 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ğlanmıştır. Daha fazla bilgi edinin.

Neyi inşa edeceğiz?

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

Neler öğreneceksiniz?

  • Alıcı geliştirme için gerekli ayarları yapma.
  • Cast Uygulama Çerçevesi'ne dayalı, Cast uyumlu bir alıcıyla ilgili temel bilgiler.
  • Yayınlanan video nasıl alınır?
  • Hata Ayıklama Kaydedici'yi entegre etme.
  • Alıcınızı akıllı ekranlar için optimize etme.

Gerekenler

Deneyim

  • Web geliştirme konusunda önceden bilgi sahibi olmanız gerekir.
  • Ayrıca TV izleme konusunda da önceden bilgi sahibi olmanız gerekir :)

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

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

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

Acemi Orta Düzey Yeterli

TV izleme deneyiminizi nasıl değerlendirirsiniz?

Acemi Orta Düzey Yeterli

2. Örnek kodu alın

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

indirilen zip dosyasını açın.

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

Web alıcınızı bir Yayın cihazıyla kullanabilmek için yayın cihazınızın, yayın cihazınızın erişebileceği bir yerde barındırılması gerekir. https'yi destekleyen bir sunucunuz zaten varsa aşağıdaki talimatları atlayın ve bir sonraki bölümde ihtiyaç duyacağınızdan URL'yi not edin.

Kullanabileceğiniz bir sunucunuz yoksa Firebase Hosting veya ngrok'u kullanabilirsiniz.

Sunucuyu çalıştırma

İstediğiniz hizmeti ayarladıktan sonra app-start adresine gidip sunucunuzu başlatın.

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

4. Cast Developer Console'da bir uygulamayı kaydetme

Chromecast cihazlarda bu codelab'de yerleşik olarak bulunan özel bir alıcıyı çalıştırabilmek için uygulamanızı kaydetmeniz gerekir. Uygulamanızı kaydettikten sonra, gönderen uygulamanızın API çağrıları gerçekleştirmek (ör. bir alıcı uygulamayı başlatmak) için kullanması gereken bir uygulama kimliği alırsınız.

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

"Yeni uygulama ekle"yi tıklayın

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

"Özel Alıcı"yı seçin. Geliştiriyoruz.

"Yeni Özel Alıcı" ekranının "Alıcı Uygulaması URL'si" alanına yazmakta olduğu bir URL'yi gösteren resim

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

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

Yayınlamadan önce alıcı uygulamanıza erişebilmesi için Google Cast cihazınızı da kaydettirmeniz gerekir. Alıcı uygulamanız yayınlandıktan sonra tüm Google Cast cihazlarında kullanılabilir hale gelir. Bu codelab'in amacı doğrultusunda, yayınlanmamış bir alıcı uygulamayla çalışmanız önerilir.

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

"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 basılı olan seri numarasını girin ve açıklayıcı bir ad verin. Seri numaranızı, Google Cast SDK Developer Console'a erişirken ekranınızı Chrome'da yayınlayarak da bulabilirsiniz.

Alıcınızın ve cihazınızın test için hazır olması 5-15 dakika sürer. 5-15 dakika bekledikten sonra Cast cihazınızı yeniden başlatmanız gerekir.

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

Google Chrome logosu

Yeni alıcı uygulamamızın test için hazır olmasını beklerken örnek bir tamamlanmış 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ı oynatabilecektir (HTTP üzerinden Dinamik Uyarlanabilir Akış için kodlanmış örnek içerik kullanacağız).

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

Komut ve Denetim (CaC) Aracı'nın "Cast Connect & Logger Denetimleri" sekmesinin resmi

  1. CaC Aracımızı görmeniz gerekir.
  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.

Komut ve Denetim (CaC) Aracı'nın "Yayın Bağlantısı ve Günlükçü Denetimleri" sekmesinin bir alıcı uygulamasına bağlı olduğunu gösteren resim

  1. Üstteki "Medya Yükle" sekmesine gidin.

Komut ve Denetim (CaC) Aracı'nın "Medya Yükleme" 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ılırken temel alıcı işlevinin 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 desteği eklememiz gerekiyor. Bu codelab'de kullanacağımız bazı Google Cast terminolojisi şöyledir:

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

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

  1. Örnek kod indirdiğinizden klasör simgesiapp-start dizinini seçin.
  2. js/receiver.js ve index.html uygulamasını açın.

Bu codelab'de çalışırken http-server uygulamasının yaptığınız değişiklikleri alması gerektiğini unutmayın. Sorun çıkmadığını fark ederseniz http-server aracını sonlandırıp yeniden başlatmayı deneyin.

Uygulama Tasarımı

Alıcı uygulama, Yayın oturumunu başlatır ve bir gönderenden YÜKLE isteği (diğer bir deyişle, bir medya parçasını oynatma komutu) gelene kadar bekleme modunda 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ğlamak için gereken 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ı boyunca bu dosyaya eklenecek.

receiver.js

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

7. Temel bir Yayın alıcı

Temel bir Yayın alıcısı başlangıçta Yayın oturumunu başlatır. Bu, tüm bağlı gönderen uygulamalarına, alıcının başarıyla ulaştığını bildirmek için gereklidir. Ek olarak, yeni SDK, uyarlanabilir bit hızı akış medyalarını (DASH, HLS ve Smooth Streaming kullanarak) ve kullanıma hazır olarak düz MP4 dosyalarını işleyecek şekilde önceden yapılandırılmış olarak sunulur. Şimdi bunu deneyelim.

Başlatma

Başlıktaki index.html öğesine şu 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 gönderilen varsayılan alıcı kullanıcı arayüzünü açması için alan sağlamak amacıyla aşağıdaki kodu index.html adlı <footer> yüklemesinden <body> önce receiver.js, ekleyin.

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

Şimdi SDK'yı js/receiver.js dilinde başlatmamız gerekiyor. Bu işlemler şunlardır:

  • CastReceiverContext için referans alırken tüm Alıcı SDK'nız için birincil giriş noktanız olur.
  • PlayerManager için referans saklayarak, oynatmayı işlemeyi sağlayan ve kendi özel mantığınızı eklemek için ihtiyacınız olan tüm kancaları sunan nesnedir.
  • CastReceiverContext üzerinde start() çağrısıyla SDK'yı başlatma

Aşağıdakileri js/receiver.js reklam grubuna 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ızda Komut ve Denetim (CaC) Aracı'na gidin.

Komut ve Denetim (CaC) Aracı&#39;nın &quot;Cast Connect & Logger Denetimleri&quot; sekmesinin resmi

Kendi Uygulama Kimliğinizi, alanda daha önce kayıtlı olduğu şekliyle değiştirdiğinizden emin olun ve "Uygulama Kimliğini Ayarla"yı tıklayın. Bu, araca Yayın oturumunu başlatırken alıcınızı kullanması için talimat verir.

Medya yayınlanıyor

Yüksek bir düzeyde, bir yayın cihazında medya oynatmak için aşağıdakilerin gerçekleşmesi gerekir:

  1. Gönderen, Cast SDK'dan bir medya öğesini modelleyen 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 üzerinden yükler.
  4. Alıcı, medya durumunu izler ve izler.
  5. Gönderen, kullanıcının gönderen uygulamayla etkileşimlerine göre oynatmayı kontrol etmek için alıcıya oynatma komutları gönderir.

Bu ilk temel denemede MediaInfo alanını bir oynatılabilir öğe URL'si (MediaInfo.contentUrl içinde kayıtlı) ile dolduracağız.

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

Bir sonraki bölümde alıcınızın süresini aynı işlemi yapması için uzatacağız. Şimdilik, Yayınla simgesini tıklayıp alıcınızı açmak için cihazınızı seçin.

Komut ve Denetim (CaC) Aracı&#39;nın &quot;Yayın Bağlantısı ve Günlükçü Denetimleri&quot; sekmesinin bir alıcı uygulamasına bağlı olduğunu gösteren resim

"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 Denetim (CaC) Aracı&#39;nın &quot;Medya Yükleme&quot; sekmesinin resmi

Alıcı SDK'sı kullanıma hazır olarak şunları işler:

  • Yayınlama oturumu başlatılıyor
  • Oynatılabilir öğeler içeren gönderenlerden gelen LOAD isteklerini yerine getirin
  • Büyük ekranda görüntülenmeye hazır temel bir oynatıcı kullanıcı arayüzü sağlayın.

Gönderenlerden gelen LOAD isteklerini yerine getirmek için alıcımızı basit bir örnek API ile konuşacak ş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ünyadaki uygulamalarda Yayın Alıcıları ile etkileşimde bulunma şekline uygun olarak, hedeflenen medya içeriğine, oynatılabilir öğe URL'si göndermek yerine API anahtarıyla referans veren LOAD isteklerini işleyecek şekilde alıcımızı değiştireceğiz.

Uygulamalar bunu genellikle şu 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ıda işleyecek şekilde tasarlanmıştır.

Bu işlev temel olarak PlayerManager setMessageInterceptor() yönteminde uygulanır. Bu sayede gelen mesajları türe göre müdahale edebilir ve SDK'nın dahili mesaj işleyicisine ulaşmadan önce değiştirebilirsiniz. Bu bölümde LOAD istekleriyle ilgileniyoruz. Bunlarla ilgili aşağıdaki işlemler gerçekleştirilir:

  • Gelen LOAD isteğini ve özel contentId isteğini okuyun.
  • Akışlı öğeyi contentId özelliğine göre 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 isteğini SDK'ya iletin veya istenen medyayı arayamazsak komutu reddedin.

Sağlanan örnek API'de, SDK'nın genel alıcı görevlerini özelleştirirken yararlanabileceği özellikler gösterilmektedir.

Ö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. İçerikte, poster resimlerinin png biçimindeki URL'lerinin yanı sıra DASH ve HLS akışları da bulunmaktadır. DASH ve HLS akışları, parçalanmış mp4 kapsayıcılarında depolanan bağımsız 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, LOAD isteğiyle alıcı çağrıldıktan sonra her girişin anahtarını (ör. 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ği gönderen bir işlevle yük önleyici oluşturacağız. JSON dosyası alındıktan sonra içeriği ayrıştırır ve meta verileri ayarlayacağız. İlerleyen 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ğı özetlenmektedir.

Örnek API DASH İçeriğini Kullanma

Artık yük önleyiciyi hazırladığımıza göre, içerik türünü alıcıya ileteceğiz. Bu bilgiler, alıcıya ana oynatma listesi URL'sini ve akış MIME türünü sağlar. LOAD önleyicinin Promise() öğesindeki 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 bölümüne geçebilirsiniz. Bunun yerine, yüklemeyi HLS içeriği ile test etmek istiyorsanız sonraki adıma göz atın.

Örnek API HLS İçeriğini Kullanma

Örnek API, HLS içeriğinin yanı sıra DASH'i içerir. Yükleme isteğinde, önceki adımda yaptığımız gibi contentType özelliğinin ayarlanmasına ek olarak örnek API'nin HLS URL'lerini kullanmak için bazı ek özellikler gerekir. Alıcı, HLS akışlarını oynatacak şekilde yapılandırıldığında, beklenen varsayılan kapsayıcı türü taşıma 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. contentUrl ve contentType özelliklerini değiştirmek için yük önleyicide js/receiver.js dosyanıza aşağıdaki kodu ekleyin. Buna ek olarak, HlsSegmentFormat ve HlsVideoSegmentFormat özelliklerini de 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ği olarak ayarlayın. Yayınla 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ı medya öğelerimize yalnızca contentId referansı içeren bir LOAD isteği göndermeye zorlar.

Komut ve Denetim (CaC) Aracı&#39;nın &quot;Medya Yükleme&quot; sekmesinin resmi

Alıcıda yaptığınız değişikliklerde herhangi bir sorun olmadığını varsayarsak önleyicinin MediaInfo nesnesini, ekranda oynatabileceği bir şeye dönüştürme işlemini halletmesi gerekir.

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 ID'yi content.json dosyasında başka bir kimlikle değiştirebilirsiniz.

10. Akıllı ekranlar için optimize etme

Akıllı ekranlar, alıcı uygulamaların dokunmatik kontrolleri desteklemesini sağlayan dokunma işlevine sahip cihazlardır.

Bu bölümde, akıllı ekranlarda açı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ın Kullanıcı Arayüzü Kontrolleri nesnesine cast.framework.ui.Controls.GetInstance() kullanılarak erişilebilir. js/receiver.js dosyanızda context.start() etiketinin üzerine şu kodu ekleyin:

...

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

context.start();

<cast-media-player> öğesini kullanmazsanız CastReceiverOptions içinde touchScreenOptimizedApp öğesini 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 kodlarına göre her yuvaya atanır.

Video Denetimleri

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

Üzerinde kullanıcı arayüzü kontrolleri bulunan video oynatma 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 için Kullanıcı Arayüzü Kontrolleri nesnesi aşağıdaki gibi görüntülenir:

Üzerinde kullanıcı arayüzü kontrolleri bulunan müzik çalan 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ü Kontrolleri nesnesi, MediaStatus.supportedMediaCommands öğesine göre bir ControlsButton öğesinin gösterilip gösterilmeyeceğini de belirler.

supportedMediaCommands değeri ALL_BASIC_MEDIA 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 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;Öncekini sıraya ekle&quot; ve &quot;Sonrakini sıraya ekle&quot; düğmeleri etkin

supportedMediaCommands değeri PAUSE | 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;Öncekini sıraya ekle&quot; ve &quot;Sonrakini 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 atla&quot; ve &quot;Geri atla&quot; düğmeleri, &quot;Öncekini sıraya ekle&quot; ve &quot;Sonrakini sıraya ekle&quot; düğmeleri ile &quot;Altyazı&quot; düğmeleri etkin

Alıcı bağlamını başlattıktan sonra supportedMediaCommands değerini dinamik olarak değiştirmek için PlayerManager.setSupportedMediaCommands yöntemini çağırarak değeri geçersiz kılabilirsiniz. Ayrıca, addSupportedMediaCommands kullanarak yeni bir komut ekleyebilir veya removeSupportedMediaCommands kullanarak mevcut bir komutu kaldırabilirsiniz.

Denetim Düğmelerini Özelleştirme

PlayerDataBinder kullanarak denetimleri özelleştirebilirsiniz. Kontrollerinizin ilk zaman aralığını ayarlamak için touchControls'ün altına şu kodu js/receiver.js dosyanıza 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ği

Medyaya Göz Atma, kullanıcıların dokunmatik cihazlarda ek içeriği keşfetmelerine olanak tanıyan bir CAF Alıcı özelliğidir. Bu işlemi gerçekleştirmek 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 göre bu alanı BrowseItems ile doldurabilirsiniz.

BrowseContent

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

İki video küçük resmini ve videonun üçte birlik kısmının bir kısmını gösteren {7}Content 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 desteklenen üç en boy oranı: SQUARE_1_TO_1, PORTRAIT_2_TO_3, LANDSCAPE_16_TO_9.

BrowseItem

Her öğede başlık, alt başlık, süre ve resim görüntülemek için BrowseItem öğesini kullanın:

İki video küçük resmini ve videonun üçte birlik kısmının bir kısmını gösteren {7}Content 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 numaralı telefonu arayarak göz atabileceğiniz medya içeriklerinin listesini sağlayabilirsiniz. Göz atma öğelerini "Sıradaki" başlığıyla ayarlamak için js/receiver.js dosyanıza playerDataBinder öğesinin altına ve MEDIA_CHANGED etkinlik işleyicinize 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);

...

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ıklamak, LOAD önleyiciyi tetikler. Medyaya göz atma öğesinden request.media.contentId öğesini request.media.entity ile eşlemek için LOAD önleyicinize 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) => {
            ...
        });
    });

Medyaya 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

Yayın Alıcı SDK'sı, geliştiricilerin CastDebugLogger API'sini ve günlükleri kaydetmek için tamamlayıcı bir Command and Control (CaC) Tool'u kullanarak alıcı uygulamalarda kolayca hata ayıklaması için başka bir seçenek sunar.

Başlatma

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

js/receiver.js içinde, dosyanın üst ve playerManager altına, CastDebugLogger örneğini almak ve günlük 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 günlük kaydedici etkinleştirildiğinde alıcıda DEBUG MODE işaretini gösteren bir yer paylaşımı gösterilir.

Çerçevenin sol üst köşesindeki kırmızı bir arka plan üzerinde görünen &quot;HATA AYIKLAMA MODU&quot; mesajıyla oynatılan bir video resmi

Günlük Oynatıcı Etkinlikleri

CastDebugLogger ile CAF Receiver SDK tarafından tetiklenen oynatıcı etkinliklerini kolayca günlüğe kaydedebilir ve farklı günlük kaydedici seviyeleri kullanarak etkinlik verilerini kaydedebilirsiniz. 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 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ının hata ayıklama yer paylaşımında farklı renklerle görünen günlük mesajları oluşturmanızı sağlar. En yüksek öncelikli olandan en az öncelikliye doğru sıralanmış aşağıdaki günlük yöntemleri 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ımlayıcı dize 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 çalışırken görmek için günlükleri LOAD müdahale aracınıza 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 bölümünde günlük düzeyini ayarlayarak hata ayıklama yer paylaşımında hangi mesajların görüneceğini kontrol edebilirsiniz. Örneğin, cast.framework.LoggerLevel.DEBUG günlük düzeyinde 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üzeyiyle özel bir etiket etkinleştirildiğinde yalnızca hata gösterilir ve uyarı günlük mesajları gösterilir.

loggerLevelByTags yapılandırması isteğe bağlıdır. Özel etiket günlük kaydedici 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,
};

Yer Paylaşımında Hata Ayıklama

Yayın Hata Ayıklama Kaydedici, yayın cihazında özel günlük mesajlarınızın görüntülenmesi 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şımındaki günlük mesajlarını temizlemek için clearDebugLogs 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();
  }
});

Bir video karesinin üst tarafında şeffaf bir arka plan üzerinde bulunan hata ayıklama günlük mesajlarının yer aldığı bir liste olan hata ayıklama yer paylaşımını gösteren resim

13. Tebrikler

Artık Cast Web Alıcı SDK'sını kullanarak nasıl özel bir web alıcı uygulaması oluşturacağınızı biliyorsunuz.

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