Temel bir Yayın Alıcısı oluşturun

googlecastnew500.png

Bu kod laboratuvarı, bir Google Cast cihazında içerik oynatmak için Cast uyumlu bir Alıcı uygulamasının nasıl oluşturulacağını size öğretecektir.

Google Cast nedir?

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

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

Google Cast Tasarım Kontrol Listesi, desteklenen tüm platformlarda Cast kullanıcı deneyimini basit ve öngörülebilir hale getirmek için sağlanmıştır. Daha fazlasını burada görün.

Ne inşa edeceğiz?

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

Ne öğreneceksin

  • Alıcı geliştirme için nasıl kurulur?
  • Cast Uygulama Çerçevesine dayalı Cast özellikli bir alıcının temelleri.
  • Yayınlanmış bir video nasıl alınır.
  • Debug Logger nasıl entegre edilir.
  • Alıcınızı akıllı ekranlar için optimize etme.

Neye ihtiyacın olacak

  • En son Google Chrome tarayıcısı.
  • node.js , npm, http-server ve ngrok modülü.
  • İnternet erişimi ile yapılandırılmış bir Chromecast veya Android TV gibi bir Google Cast cihazı.
  • HDMI girişli bir TV veya monitör.

Deneyim

  • Önceden web geliştirme bilgisine sahip olmanız gerekecektir.
  • Ayrıca önceden TV izleme bilgisine de ihtiyacınız olacak :)

Bu öğreticiyi nasıl kullanacaksınız?

Sadece baştan sona okuyun Okuyun ve alıştırmaları tamamlayın

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

Acemi Orta düzey Yetkin

TV izleme deneyiminizi nasıl değerlendirirsiniz?

Acemi Orta düzey Yetkin

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

Kaynağı İndir

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

Alıcınızı bir Cast cihazıyla kullanabilmek için, Cast cihazınızın ona ulaşabileceği bir yerde barındırılması gerekir. Halihazırda https'yi destekleyen bir sunucunuz varsa, sonraki bölümde ihtiyaç duyacağınız için aşağıdaki talimatları atlayın ve URL'yi not edin .

Kullanabileceğiniz bir sunucunuz yoksa endişelenmeyin. Node.js , http-server ve ngrok node modülünü ngrok .

npm install -g http-server
npm install -g ngrok

Sunucuyu çalıştırın

http-server kullanıyorsanız, konsolunuza gidin ve aşağıdakileri yapın:

cd app-start
http-server

Daha sonra aşağıdaki gibi bir şey görmelisiniz:

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://172.19.17.192:8080
Hit CTRL-C to stop the server

Yerel alıcınızı ngrok kullanarak HTTPS üzerinden göstermek için yeni bir terminalde kullanılan yerel bağlantı noktasına dikkat edin ve aşağıdakileri ngrok :

ngrok http 8080

Bu, yerel HTTP sunucunuza bir ngrok tüneli oluşturacak ve size bir sonraki adımda kullanabileceğiniz küresel olarak mevcut HTTPS güvenli bir uç nokta ngrok (https://116ec943.eu.ngrok.io):

ngrok by @inconshreveable                                                                                                                                                                                                                                     (Ctrl+C to quit)

Session Status         online
Version                2.2.4
Web Interface          http://127.0.0.1:8080
Forwarding             http://116ec943.eu.ngrok.io -> localhost:8080
Forwarding             https://116ec943.eu.ngrok.io -> localhost:8080

ngrok hem ngrok hem de http-server çalışır durumda tutmalısınız. Yerel olarak yaptığınız tüm değişiklikler anında kullanılabilir olacaktır.

Bu kod laboratuarında yerleşik olarak bulunan özel bir alıcıyı Chromecast cihazlarında çalıştırabilmek için uygulamanızı kaydettirmeniz gerekir. Uygulamanızı kaydettikten sonra, gönderen uygulamanızın bir alıcı uygulamasını başlatmak gibi API çağrılarını gerçekleştirmek için kullanması gereken bir uygulama kimliği alacaksınız.

d8b39f5d33d33db4.png

"Yeni uygulama ekle" yi tıklayın

e8c19e57b85c7d.png

"Özel Alıcı" yı seçin, oluşturduğumuz şey budur.

bf364a7d382e3c58.png

Yeni alıcınızın ayrıntılarını girin, ulaştığınız URL'yi kullandığınızdan emin olun.

son bölümde. 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ı kaydettirmelisiniz . Alıcı uygulamanızı yayınladığınızda, tüm Google Cast cihazlarında kullanılabilir olacaktır. Bu kod laboratuarının amacı için, yayınlanmamış bir alıcı uygulamasıyla çalışılması tavsiye edilir.

a446325da6ebd627.png

"Yeni Cihaz Ekle" yi tıklayın

a21355793a3f4cd5.png

Cast cihazınızın arkasında yazılı olan seri numarasını girin ve ona 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 teste hazır hale gelmesi 5-15 dakika sürecektir. 5-15 dakika bekledikten sonra Cast cihazınızı yeniden başlatmalısınız.

Google_Chrome_logo_icon.png

Yeni alıcı uygulamamızın teste hazır olmasını beklerken, örnek tamamlanmış bir alıcı uygulamasının neye benzediğini görelim. Oluşturacağımız alıcı, uyarlanabilir bit hızı akışını kullanarak medyayı oynatma yeteneğine sahip olacak (HTTP üzerinden Dinamik Uyarlamalı Akış (DASH) için kodlanmış örnek içerik kullanacağız).

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

7dbd91a75140c46f.png

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

a02db8244a963fd6.png

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

acd63df355a0493.png

  1. Örnek bir videoyu oynatmak için "İçeriğe Göre Yükle" düğmesini tıklayın.
  2. Video, Varsayılan Alıcı kullanıldığında temel alıcı işlevinin nasıl göründüğünü göstermek için Google Cast cihazınızda oynatılmaya başlayacaktır.

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

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

Artık favori metin düzenleyicinizi kullanarak başlangıç ​​projesinin üzerine inşa etmeye hazırsınız:

  1. Seçin android_studio_folder.png örnek kod indirmenizden app-start dizini.
  2. js/receiver.js ve index.html

Bu kod laboratuarında çalışırken, http-server yaptığınız değişiklikleri alması gerektiğini unutmayın. Eğer olmadığını fark ederseniz, http-server öldürmeyi ve yeniden başlatmayı deneyin.

Uygulama Tasarımı

Alıcı uygulaması, Yayın oturumunu başlatır ve bir gönderenden bir LOAD isteği (yani, bir medya parçasını oynatma komutu) gelene kadar beklemede kalır.

Uygulama, index.html tanımlanan bir ana görünümden ve js/receiver.js çalışmasını sağlamak 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 için kullanıcı arayüzünü içerecektir. Şimdilik boş ve kod laboratuvarı boyunca ona ekleme yapacağız.

Receiver.js

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

Temel bir Yayın alıcısı, başlangıçta Yayın oturumunu başlatır. Bu, bağlı tüm gönderen uygulamalarına alıcının başarılı olduğunu bildirmek için gereklidir. Ek olarak, yeni SDK, uyarlanabilir bit hızı akış ortamını (DASH, HLS ve Sorunsuz Akış kullanarak) ve düz MP4 dosyalarını kutudan çıkaracak şekilde önceden yapılandırılmış olarak gelir. Bunu deneyelim.

Başlatma

Aşağıdaki kodu başlıktaki index.html ekleyin:

<head>
  ...

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

Alıcı SDK'sına, eklediğiniz komut dosyasıyla gönderilen varsayılan alıcı kullanıcı arayüzünü açmak için alan sağlamak için receiver.js, < footer> önce index.html <body> ye aşağıdaki kodu ekleyin.

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

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

  • Tüm Alıcı SDK'sına birincil giriş noktanız olan CastReceiverContext bir referans edinme
  • PlayerManager bir referans depolamak, nesneyi PlayerManager ve kendi özel mantığınızı takmanız için ihtiyacınız olan tüm kancaları size sağlamak
  • CastReceiverContext üzerinde start() çağırarak SDK'yı start()

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

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

context.start();

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

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

72039b93a476e35e.png

Bu alanda daha önce kaydedildiği gibi kendi Uygulama Kimliğinizi 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ı talimatını verir.

Medya döküm

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

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

Bu ilk temel denemede, MediaInfo oynatılabilir bir varlık URL'si ( MediaInfo.contentUrl saklanan) ile MediaInfo.contentUrl .

Gerçek dünyadaki bir gönderen, MediaInfo.contentId uygulamaya özgü bir ortam tanımlayıcı kullanır. Alıcı, gerçek varlık URL'sini çözümlemek ve bunu MediaInfo.contentUrl. ayarlamak üzere uygun arka uç API çağrılarını yapmak için bir tanımlayıcı olarak contentId kullanır MediaInfo.contentUrl. Alıcı, DRM lisansı edinme veya reklam araları hakkında bilgi ekleme gibi görevleri de yerine getirecektir.

Bir sonraki bölümde bunun gibi bir şey yapmak için alıcınızı genişleteceğiz. Şimdilik, Yayın simgesine tıklayın ve alıcınızı açmak için cihazınızı seçin.

4954e949c3d3b232.png

"Ortam 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.

ccd8cc258d0c1522.png

Bu nedenle, Alıcı SDK'sı kutudan çıktığı gibi şu işlemleri gerçekleştirir:

  • Yayın oturumunu başlatma
  • Oynatılabilir varlıklar içeren gönderenlerden gelen LOAD isteklerini işleyin
  • Büyük ekranda görüntülenmeye hazır temel bir oyuncu arayüzü sağlayın.

Gönderenlerden gelen LOAD isteklerini yerine getirmek için alıcımızı basit bir örnek API ile konuşmak üzere genişleteceğimiz bir sonraki bölüme geçmeden önce CaC Aracını ve kodunu keşfetmekten çekinmeyin.

Çoğu geliştiricinin gerçek dünyadaki uygulamalarda Cast Alıcıları ile nasıl etkileşim kurduğuna paralel olarak, alıcımızı, oynatılabilir bir varlık URL'si üzerinden göndermek yerine API anahtarıyla istenen medya içeriğine referans veren LOAD isteklerini işleyecek şekilde değiştireceğiz.

Uygulamalar bunu genellikle şu nedenlerle yapar:

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

Bu işlevsellik esas olarak PlayerManager setMessageInterceptor() yönteminde uygulanır. Bu, gelen mesajları türe göre engellemenizi ve SDK'nın dahili mesaj işleyicisine ulaşmadan önce değiştirmenizi sağlar. Bu bölümde, aşağıdakileri yapacağımız LOAD istekleriyle ilgileniyoruz:

  • Gelen LOAD isteğini ve özel contentId .
  • Akışlı varlığı contentId göre aramak için API'mize bir GET çağrısı yapın.
  • LOAD isteğini akışın URL'si ile 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ı arayamazsak komutu reddedin.

Sağlanan örnek API, SDK'nın genel alıcı görevlerini özelleştirmek için kancalarını sergilerken, yine de çoğunlukla kullanıma hazır bir deneyime güveniyor.

Örnek API

Tarayıcınızı https://storage.googleapis.com/cpe-sample-media/content.json adresine yönlendirin ve örnek video kataloğumuza bir göz atın. İçerik, png formatındaki poster resimlerinin yanı sıra hem DASH hem de HLS akışlarının URL'lerini içerir. DASH ve HLS akışları, parçalanmış mp4 kaplarında depolanan demuxed video ve ses kaynaklarına 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ı bir LOAD isteğiyle çağrıldıktan sonra her bir girişin anahtarını (örn. bbb, fbb_ad ) akışın bbb, fbb_ad .

LOAD isteğini engelleyin

Bu adımda, barındırılan JSON dosyasına bir XHR isteği yapan bir işleve sahip bir yük durdurucu oluşturacağız. JSON dosyası elde edildikten 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çıklanacaktır.

Örnek API DASH İçeriğini Kullanma

Artık yük kesiciyi hazırladığımıza göre, alıcıya içerik türünü belirleyeceğiz. Bu bilgi, alıcıya ana oynatma listesi URL'sini ve akış MIME türünü sağlayacaktır. LOAD interceptor's Promise() içindeki 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. HLS içeriğiyle yüklemeyi test etmek istiyorsanız, bunun yerine sonraki adıma bakın.

Örnek API HLS İçeriğini Kullanma

Örnek API, DASH'in yanı sıra HLS içeriğini de içerir. Önceki adımda yaptığımız gibi contentType ayarlamaya ek olarak, örnek API'nin HLS url'lerini kullanmak için yükleme isteğinin bazı ek özelliklere ihtiyacı olacaktır. Alıcı, HLS akışlarını oynatmak üzere 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 talebinde, MediaInformation nesnesi, alıcının içeriğin TS değil, MP4 türünde olduğunu bilmesi için ek özelliklerle değiştirilmelidir. contentUrl ve contentType özelliklerini değiştirmek için yükleme engelleyicisindeki js / alıcı.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 Etmek

Yine, Komut ve Kontrol (CaC) Aracını açın ve Uygulama Kimliğinizi alıcınızın Uygulama Kimliğine ayarlayın. Yayın 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, uygulamamızı contentId yalnızca contentId referansını içeren bir LOAD isteği göndermeye zorlayacaktır.

3e830710c562189f.png

Alıcıda yaptığınız değişikliklerle her şeyin yolunda gittiğini varsayarsak, durdurucu MediaInfo nesnesini SDK'nın ekranda oynatabileceği bir şeye biçimlendirmeye özen göstermelidir.

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

Akıllı ekranlar, alıcı uygulamaların dokunmatik kontrolleri desteklemesine izin veren dokunmatik işlevselliğe sahip cihazlardır.

Bu bölüm, akıllı ekranlarda başlatıldığında alıcı uygulamanızı nasıl optimize edeceğinizi ve oynatıcı kontrollerini nasıl özelleştireceğinizi açıklamaktadır.

UI Kontrollerine Erişim

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

...

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

context.start();

<cast-media-player> öğesini kullanmazsanız, touchScreenOptimizedApp CastReceiverOptions ayarlamanız gerekir. Bu kod laboratuvarında <cast-media-player> öğesini kullanıyoruz.

context.start({ touchScreenOptimizedApp: true });

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

Video Kontrolleri

MetadataType.MOVIE , MetadataType.TV_SHOW ve MetadataType.GENERIC için Akıllı Ekranlar için UI Controls nesnesi aşağıdaki örnekte olduğu gibi görüntülenecektir.

5f5a3d567813cf10.png

  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 , Akıllı Ekranlar için Kullanıcı Arabirimi Kontrolleri nesnesi aşağıdaki gibi görüntülenecektir:

e93d4557f324e8c0.png

  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

UI Controls nesnesi, MediaStatus.supportedMediaCommands göre bir ControlsButton öğesinin gösterilip gösterilmeyeceğini de belirler.

supportedMediaCommands değeri ALL_BASIC_MEDIA eşit olduğunda, varsayılan kontrol düzeni aşağıdaki gibi görüntülenecektir:

5b97ada8d239239c.png

supportedMediaCommands değeri ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT , varsayılan kontrol düzeni aşağıdaki gibi görüntülenecektir:

2d8267d4d8b68e87.png

SupportedMediaCommands değerinin PAUSE | QUEUE_PREV | QUEUE_NEXT , varsayılan kontrol düzeni aşağıdaki gibi görüntülenecektir:

39c9afe44c4fa8dc.png

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

771952ab29e2eb21.png

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

Kontrol Düğmelerini Özelleştirme

PlayerDataBinder kullanarak denetimleri özelleştirebilirsiniz. Denetimlerinizin ilk yuvasını ayarlamak için touchControls 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();

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

BrowseContent

Aşağıda, BrowseContent UI ve özelliklerinin bir örneği bulunmaktadır:

e40623e1907d983a.png

  1. BrowseContent.title
  2. BrowseContent.items

En Boy Oranı

Görüntü varlıklarınız için en iyi en boy oranını seçmek için targetAspectRatio property 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 .

BrowseItem

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

838a0db6c9224710.png

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

Medyaya Göz Atma verilerini ayarlama

setBrowseContent çağırarak göz atmak için bir medya içeriği listesi sağlayabilirsiniz. Göz atma öğelerini "Sıradaki" başlığıyla ayarlamak için MEDIA_CHANGED playerDataBinder ve MEDIA_CHANGED olay dinleyicinize js/receiver.js playerDataBinder 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);

...

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 medyaya göz atma öğesine tıklamak LOAD durdurucuyu tetikleyecektir. Sizin için aşağıdaki kodu ekleyin LOAD haritaya dinleyici request.media.contentId için request.media.entity öğesinin göz medyadan:

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, Medyaya Göz Atma kullanıcı arabirimini kaldırmak için BrowseContent nesnesini null BrowseContent de ayarlayabilirsiniz.

Cast Receiver SDK, geliştiricilere, günlükleri yakalamak için CastDebugLogger API ve tamamlayıcı bir Komut ve Kontrol (CaC) Aracı kullanarak alıcı uygulamalarında kolayca hata ayıklama 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, Cast Receiver SDK 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>

Dosyanın üst kısmındaki ve playerManager altındaki js/receiver.js playerManager , CastDebugLogger örneğini almak ve günlükçüyü 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.
castDebugLogger.setEnabled(true);

Hata ayıklama günlüğü etkinleştirildiğinde, alıcıda DEBUG MODE görüntüleyen bir yer paylaşımı gösterilecektir.

d9cb99e7742fc240.png

Oyuncu Olaylarını Günlüğe Kaydet

CastDebugLogger kullanarak, CAF Alıcı SDK tarafından tetiklenen oynatıcı olaylarını kolayca günlüğe kaydedebilir ve olay verilerini günlüğe kaydetmek için farklı kaydedici seviyeleri kullanabilirsiniz. loggerLevelByEvents yapılandırması, hangi olayların günlüğe kaydedileceğini belirtmek için cast.framework.events.EventType ve cast.framework.events.category kullanır.

Bir oynatıcı CORE olayı tetiklendiğinde veya bir mediaStatus değişikliği yayınlandığında günlüğe castDebugLogger 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.
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 katmanında farklı renklerle görünen günlük mesajları oluşturmanıza olanak tanır. En yüksekten en düşüğe doğru sıralanmış aşağıdaki günlük yöntemleri mevcuttur:

  • 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 özel bir 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çıklanmaktadır. İkinci parametre günlük mesajıdır .

Günlükleri çalışırken göstermek için LOAD engelleyicinize günlükler 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 günlük düzeyini ayarlayarak hata ayıklama katmanında hangi iletilerin görüneceğini kontrol edebilirsiniz. Örneğin, günlük seviyesi cast.framework.LoggerLevel.DEBUG ile özel bir etiketin etkinleştirilmesi, hata, uyarı, bilgi ve hata ayıklama günlük mesajlarıyla eklenen tüm mesajları görüntüler. WARNING düzeyine sahip özel bir etiketin etkinleştirilmesi, yalnızca hata ve uyarı günlük mesajlarını görüntüler.

loggerLevelByTags yapılandırması isteğe bağlıdır. Kaydedici seviyesi için özel bir etiket yapılandırılmamışsa, tüm günlük mesajları hata ayıklama katmanında görüntülenir.

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,
};

Yer Paylaşımlı Hata Ayıklama

Yayın Hata Ayıklama Kaydedici, özel günlük mesajlarınızı yayın cihazında görüntülemek için alıcıda bir hata ayıklama katmanı sağlar. Kullanım showDebugLogs ayıklama bindirme ve geçiş yapmak için clearDebugLogs panelde açık günlük mesajlarına.

Alıcınızda hata ayıklama katmanını önizlemek için aşağıdaki kodu ekleyin.

// 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();

356c6ac94318539c.png

Artık en son Cast Receiver SDK'yı kullanarak özel bir alıcı uygulamasının nasıl oluşturulacağını biliyorsunuz. GitHub'da daha fazla örnek uygulama github.com/googlecast adresinde bulunabilir .