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

1. Genel Bakış

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 cihazdan TV'ye içerik yayınlamasına olanak tanır. Kullanıcılar, TV'de medya oynatmak için uzaktan kumanda olarak mobil cihazlarını veya masaüstü Chrome Tarayıcı'yı 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 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ğlanmıştır. Daha fazla bilgi edinin.

Ne oluşturacağız?

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

Neler öğreneceksiniz?

• Alıcı geliştirme için nasıl hazırlanılır?
• Cast Uygulama Çerçevesi'ne dayalı Cast uyumlu bir alıcının temelleri.
• Yayınlanan bir videoyu nasıl alınır?
• 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

• En son Google Chrome tarayıcı.
• Firebase Hosting veya ngrok gibi HTTPS barındırma hizmeti.
• Chromecast veya Android TV gibi internet erişimi olan bir Google Cast cihazı.
• HDMI girişli bir TV veya monitör.

Deneyim

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

2. Örnek kodu alın

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

file_downloadKaynağı İndir

ve indirilen zip dosyasının paketini açın.

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

Web alıcınızı bir yayın cihazıyla kullanabilmeniz için yayın cihazınızın, yayın cihazınızın erişebileceği bir yerde barındırılması gerekir. Halihazırda https'yi destekleyen bir sunucunuz varsa aşağıdaki talimatları atlayın ve URL'yi not edin. Sonraki bölümde bu URL'ye ihtiyacınız olacaktır.

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

Sunucuyu çalıştırma

İstediğiniz hizmeti ayarladıktan sonra app-start bölümüne gidip sunucunuzu başlatın.

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

4. Cast Developer Console'a bir uygulama kaydetme

Chromecast cihazlarda bu codelab'de yerleşik olarak bulunan özel 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ı yapmak (örneğin, bir alıcı uygulamayı başlatmak için) için kullanması gereken bir uygulama kimliği alırsınız.

"Yeni uygulama ekle"yi tıklayın

"Özel Alıcı"yı seçin. inşa ettiğimiz şey bu.

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

ele alacağız. Yeni alıcınıza atanan uygulama kimliğini not edin.

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

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

Yayın cihazınızın arkasında basılı olan seri numarasını girin ve açıklayıcı bir ad verin. Seri numaranızı, Google Cast SDK Geliştirici Konsolu'na erişirken Chrome'da ekranınızı yayınlayarak da bulabilirsiniz

Alıcınızın ve cihazınızın teste hazır olması 5-15 dakika sürer. 5-15 dakika bekledikten sonra yayın cihazınızı yeniden başlatmanız gerekir.

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

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

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

1. CaC Aracımıza bakmalısınız.
2. Varsayılan "CC1AD845"i kullanın örnek alıcı kimliğini seçin ve "Uygulama kimliğini ayarla"yı tıklayın düğmesini tıklayın.
3. Sol üstteki Yayınla düğmesini tıklayıp Google Cast cihazınızı seçin.

4. "Medya Yükle"ye gidin sekmesini tıklayın.

5. "İçeriğe göre yükle"yi tıklayın düğmesini kullanabilirsiniz.
6. Video, Google Cast cihazınızda oynatılmaya başlayarak Varsayılan Alıcı'yı kullanarak temel alıcı işlevlerinin nasıl görüneceğini gösterir.

6. Başlangıç projesini hazırlama

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

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

Favori metin düzenleyicinizi kullanarak başlangıç projesinin temelini oluşturmaya artık hazırsınız:

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

Bu codelab üzerinde çalıştığınız sırada http-server uygulamasının yaptığınız değişiklikleri alması gerektiğini unutmayın. Başlamazsa http-server cihazını sonlandırıp yeniden başlatmayı deneyin.

Uygulama Tasarımı

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

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

index.html

Bu html dosyası, alıcı uygulamamızın kullanıcı arayüzünü içerir. Şimdilik boş. Kod laboratuvarı boyunca bu alana ekleyeceğiz.

receiver.js

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

7. Temel bir Cast alıcı

Temel bir Cast alıcı, başlangıçta yayın oturumunu başlatır. Bu işlem, alıcıyı açan tüm bağlı gönderen uygulamalarına işlemin 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 basit MP4 dosyalarını işleyecek şekilde önceden yapılandırılmıştır. Şimdi bunu deneyelim.

Başlatma

Üstbilgideki index.html öğesine aşağıdaki kodu ekleyin:

<head>
  ...

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

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

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

Şimdi şunlardan oluşan SDK'yı js/receiver.js uygulamasında başlatmamız gerekiyor:

• CastReceiverContext, Alıcı SDK'sının tamamındaki birincil giriş noktanız olan
• PlayerManager öğesine bir referans kaydetme, oynatma işlemini gerçekleştirme ve kendi özel mantığınızı eklemeniz için ihtiyacınız olan tüm kancaları sağlama
• CastReceiverContext üzerinde start() çağırarak SDK başlatılıyor

Şunları ekleyin: js/receiver.js.

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

context.start();

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

Bu Codelab için CaC aracını kullanarak yepyeni alıcınızı deneyin.

Web tarayıcınızda Komut ve Denetim (CaC) Aracı'na gidin.

Alanda daha önce kaydettiğiniz kendi uygulama kimliğinizi değiştirdiğinizden emin olun ve "Uygulama kimliğini ayarla"yı tıklayın. Bu şekilde, araca Yayın oturumunu başlatırken alıcınızı kullanması için talimat verilir.

Medya yayınlanıyor

Yayın cihazında genel olarak medya oynatmak için aşağıdaki koşulların olması gerekir:

1. Gönderen, Cast SDK'sından 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 LOAD isteği aracılığıyla MediaInfo nesnesini yükler.
4. Alıcı, medya durumunu izler ve takip eder.
5. Gönderen, kullanıcının gönderen uygulamasıyla kurduğu etkileşimlere göre oynatmayı kontrol etmesi için alıcıya oynatma komutları gönderir.

Bu ilk temel denemede MediaInfo öğesini bir oynanabilir öğe URL'si ile (MediaInfo.contentUrl içinde depolanır) 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 MediaInfo.contentUrl. olarak ayarlamak için uygun arka uç API çağrılarını yapmak üzere tanımlayıcı olarak contentId öğesini kullanır ve alıcı, DRM lisansı edinme veya reklam araları hakkında bilgi ekleme gibi görevleri de gerçekleştirir.

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

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

Bu nedenle, Alıcı SDK'sı kullanıma hazır bir şekilde şunları yapar:

• Yayın 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 temel bir oynatıcı kullanıcı arayüzü sağlayın.

Bir sonraki bölüme geçmeden önce CaC Aracı'nı ve kodunu inceleyebilirsiniz. Bu bölümde, gönderenlerden gelen LOAD isteklerini yerine getirmek için alıcımızı 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şimine uygun olarak, oynatılabilir bir öğe URL'si üzerinden göndermek yerine, amaçlanan medya içeriğine API anahtarıyla referans veren LOAD isteklerini ele alacak şekilde alıcımızı değiştireceğiz.

Uygulamalar bunu genellikle şu nedenlerden dolayı yapar:

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

Bu işlev temel olarak PlayerManager setMessageInterceptor() yönteminde uygulanır. Böylece gelen mesajlara türe göre müdahale edebilir ve bu mesajları SDK'nın dahili mesaj işleyicisine ulaşmadan önce değiştirebilirsiniz. Bu bölümde, aşağıdaki işlemleri gerçekleştireceğimiz LOAD talepleriyle ilgileniyoruz:

• Gelen LOAD isteğini ve özel contentId isteğini okuyun.
• Akışlı öğeyi contentId tarihine kadar aramak için API'mize bir 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.
• İsteği, oynatma için SDK'ya iletin veya istenen medyayı bulamazsak komutu reddedin.

Sağlanan örnek API, SDK'nın genel alıcı görevlerini özelleştirmek için kancalarını gösterirken çoğunlukla kullanıma hazır bir deneyimi kullanmaya 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, hem DASH hem HLS akışlarının yanı sıra png biçimindeki poster resimlerinin URL'lerini içerir. DASH ve HLS akışları, parçalara ayrılmış mp4 kapsayıcılarında depolanan sesi kaldırılmış 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"
  },

  [...]

}

Sonraki adımda, alıcı LOAD isteğiyle çağrıldıktan sonra her bir 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ği gönderen bir işleve sahip bir yük önleyici oluşturacağız. JSON dosyası alındıktan sonra içeriği ayrıştırıp meta verileri ayarlayacağı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çıklanır.

Örnek API DASH İçeriğini Kullanma

Artık yük engelleyiciyi hazırladığımıza göre alıcı için içerik türünü belirteceğiz. Bu bilgilerle alıcıya ana oynatma listesi URL'si ve akış MIME türü sağlanır. Aşağıdaki kodu, LOAD aparatının Promise() öğesindeki 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'ye geçebilirsiniz. Bunun yerine, HLS içeriğiyle yüklemeyi test etmek istiyorsanız sonraki adıma göz atın.

Örnek API HLS İçeriğini Kullanma

Örnek API, DASH'in yanı sıra HLS içeriğini de içerir. Yükleme isteğinin, önceki adımda yaptığımız gibi contentType değerini ayarlamanın yanı sıra örnek API'nin HLS URL'lerinin kullanılabilmesi için bazı ek özelliklere ihtiyacı vardı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 alıcı, yalnızca contentUrl özelliği değiştirilirse örnek MP4 akışlarını TS biçiminde açmaya çalışır. Alıcının içeriğin TS değil MP4 türünde olduğunu bilmesi için, MediaInformation nesnesinin ek özelliklerle değiştirilmesi gerekir. contentUrl ve contentType özelliklerini değiştirmek için yükleme önleyicide js/receiver.js dosyanıza aşağıdaki kodu ekleyin. Ayrıca, HlsSegmentFormat ve HlsVideoSegmentFormat özelliklerini ekleyin.

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

Test Etme

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

"Medya Yükle"ye gidin sekmesinden erişebilirsiniz. Bu kez "İçerik URL'si"ndeki metni silin "İçeriğine Göre Yükle"nin yanındaki alan Bu düğme, uygulamamızı medyalarımıza yalnızca contentId referansını içeren bir LOAD isteği göndermeye zorlar.

Alıcıda yaptığınız değişikliklerle her şeyin düzgün çalıştığını varsayarsak müdahale aracının, MediaInfo nesnesini SDK'nın ekranda oynatabileceği bir biçime dönüştürmesi gerekir.

"İçeriğe göre yükle"yi tıklayın düğmesini tıklayın. content.json dosyasında Content ID'yi başka bir kimlikle değiştirebilirsiniz.

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

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

Bu bölümde, akıllı ekranlarda kullanıma sunulduğunda 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. Şu kodu js/receiver.js dosyanızda context.start() öğesinin üstüne ekleyin:

...

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

context.start();

<cast-media-player> kullanmıyorsanız öğesi için CastReceiverOptions içinde touchScreenOptimizedApp değerini ayarlamanız gerekir. Bu codelab'de <cast-media-player> öğesine dokunun.

context.start({ touchScreenOptimizedApp: true });

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

Video Kontrolleri

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

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 aşağıdaki gibi gösterilir:

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

Desteklenen Medya Komutlarını Güncelleme

Kullanıcı Arayüzü Denetimleri nesnesi, MediaStatus.supportedMediaCommands öğesine bağlı olarak bir ControlsButton öğesinin 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örünür:

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örünür:

supportedMediaCommands değeri PAUSE | QUEUE_PREV | QUEUE_NEXT değerine eşit olduğunda, varsayılan kontrol düzeni aşağıdaki gibi görüntülenir:

Metin parçaları kullanılabildiğinde altyazı düğmesi SLOT_1 konumunda her zaman gösterilir.

Alıcı bağlamı 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 ile mevcut bir komutu kaldırabilirsiniz.

Kontrol Düğmelerini Özelleştirme

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

...

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

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

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

context.start();

11. Medyaya göz atma özelliğini akıllı ekranlarda kullanma

Medyaya Göz Atma, kullanıcıların dokunmatik cihazlarda ek içerikleri keşfetmelerine olanak tanıyan 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östermek istediğiniz içeriğe göre bu sütunu BrowseItems ile doldurabilirsiniz.

BrowseContent

Aşağıda BrowseContent kullanıcı arayüzünün bir örneğini ve özelliklerini görebilirsiniz:

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ı üç en boy oranı destekler: SQUARE_1_TO_1, PORTRAIT_2_TO_3, LANDSCAPE_16_TO_9.

BrowseItem

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

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

Medya Göz Atma verilerini ayarla

setBrowseContent arayarak göz atabileceğiniz bir medya içeriği listesi sağlayabilirsiniz. Göz atma öğelerini "Sıradaki" başlığıyla ayarlamak için, playerDataBinder altındaki js/receiver.js dosyanıza 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 müdahalesini tetikler. request.media.contentId öğesini medya göz atma öğesindeki request.media.entity ile eşlemek için LOAD müdahale aracınıza aşağıdaki kodu ekleyin:

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

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

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

Ayrıca, Medyalara Göz Atma kullanıcı arayüzünü kaldırmak için BrowseContent nesnesini null olarak ayarlayabilirsiniz.

12. Alıcı Uygulamalarında Hata Ayıklama

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

Başlatma

API'yi dahil etmek için index.html dosyanıza CastDebugLogger kaynak komut dosyasını ekleyin. Kaynak, <head> bölümünde belirtilmelidir. etiketinden sonra gelir.

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

CastDebugLogger örneğini almak ve günlük kaydediciyi etkinleştirmek için dosyanın üst kısmındaki js/receiver.js alanında ve playerManager öğesinin altına aşağıdaki kodu ekleyin:

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

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

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

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

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

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ı logger düzeyleri kullanabilirsiniz. loggerLevelByEvents yapılandırması, hangi etkinliklerin günlüğe kaydedileceğini belirtmek için cast.framework.events.EventType ve cast.framework.events.category öğelerini kullanır.

Bir CORE oynatıcısı 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ı hata ayıklama yer paylaşımında farklı renklerle gösterilen günlük mesajları oluşturmanızı sağlar. Aşağıdaki günlük yöntemleri, en öncelikliden en az öncelikliye 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ı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 log Message'dır.

Günlükleri çalışırken göstermek için LOAD müdahalecinize günlükleri 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);
          }
      });
    });
  });

loggerLevelByTags içinde her bir özel etiket için 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 özel bir etiket etkinleştirildiğinde hata, uyarı, bilgi ve hata ayıklama günlük mesajlarıyla eklenen tüm mesajlar gösterilir. WARNING düzeyinde bir özel etiket etkinleştirildiğinde yalnızca hata ve günlük mesajları görüntülenir.

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

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

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

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

Hata Ayıklama Yer Paylaşımı

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

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

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

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

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

13. Tebrikler

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

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