Yayın Alıcısı Uygulamalarında Hata Ayıklama

1. Genel Bakış

Google Cast logosu

Bu codelab'de, Yayın Hata Ayıklama Günlüğü'nü mevcut Özel Web Alıcı uygulamanıza nasıl ekleyeceğinizi öğreneceksiniz.

Google Cast nedir?

Google Cast SDK'sı, uygulamanızın Google Cast uyumlu cihazlarda içerik oynatmasına ve oynatmayı kontrol etmesine olanak tanır. 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.

Ne oluşturacağız?

Bu codelab'i tamamladığınızda Cast Hata Ayıklama Günlüğü ile entegre bir Özel Web Alıcınız olacaktır.

Ayrıntılar ve daha fazla bilgi için Cast Hata Ayıklama Kaydedici kılavuzuna bakın.

Neler öğreneceksiniz?

  • Web Alıcısı geliştirme için ortamınızı nasıl ayarlayabilirsiniz?
  • Hata Ayıklama Günlüğü'nü Yayın Alıcınıza entegre etme.

İhtiyacınız olanlar

Deneyim

  • Daha önce Cast deneyiminiz olmalı ve Yayın Web Alıcısı'nın işleyişini anlamış olmalısınız.
  • Daha önce web geliştirme konusunda bilgi sahibi olmanız gerekir.
  • TV izleme konusunda önceden bilgiye de sahip olmanız gerekir :)

Bu eğiticiden nasıl yararlanacaksınız?

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

Web uygulamaları geliştirme deneyiminizi nasıl değerlendirirsiniz?

Acemi Orta Yeterli

TV izleme deneyiminizi nasıl değerlendirirsiniz?

Acemi Orta Yeterli

2. Örnek kodu alın

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

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

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

Web alıcınızı 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 sunulan özel bir Web Alıcısı ç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" seçeneğinin gösterildiği Cast Developer Console'un resmi düğme vurgulanmış

"Yeni uygulama ekle"yi tıklayın

'Yeni Alıcı Uygulaması'nın resmi 'Özel Alıcı' ekranıyla seçenek vurgulanmış

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

'Alıcı Uygulama URL'si' resmi “New Custom Buyer” (Yeni Özel Alıcı) iletişim kutusu dolduruluyor

Yeni alıcınızın ayrıntılarını girin. Son bölümdeki URL'yi kullandığınızdan emin olun. 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" seçeneğinin gösterildiği Google Cast SDK'sı Developer Console'un resmi düğme vurgulanmış

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

'Yayın Alıcı Cihazı Ekle'nin resmi iletişim kutusu

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

Google Chrome logosu

Yeni Web Alıcımızın teste hazır olmasını beklerken, tamamlanmış bir Web Receiver uygulaması örneğinin nasıl göründüğüne bakalım. Oluşturacağımız alıcı, medyayı uyarlanabilir bit hızı akışını kullanarak oynatabilecek.

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

'Cast Connect & Günlük Kaydedici Denetimleri Komut ve Kontrol (CaC) Aracı sekmesinde

  1. Varsayılan CC1AD845 alıcı kimliğini kullanın ve SET APP ID düğmesini tıklayın.
  2. Sol üstteki Yayınla düğmesini tıklayıp Google Cast uyumlu cihazınızı seçin.

'Cast Connect & Günlük Kaydedici Denetimleri Komut ve Kontrol (CaC) Aracının bir Alıcı uygulamasına bağlı olduğunu gösteren sekmesi

  1. En üstteki LOAD MEDIA sekmesine gidin.

'Load Media' (Medya Yükleme) resmi Komut ve Kontrol (CaC) Aracı sekmesinde

  1. İstek türü radyo düğmesini LOAD olarak değiştirin.
  2. Örnek video oynatmak için SEND REQUEST düğmesini tıklayın.
  3. Video, Google Cast uyumlu cihazınızda oynatılmaya başlar. Böylece, Varsayılan Alıcı'yı kullanarak temel alıcı işlevlerinin nasıl görüneceğini görebilirsiniz.

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 veya Android TV 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 klasör simgesiapp-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 uygulamasını durdurup yeniden başlatmayı deneyin.

Uygulama Tasarımı

Alıcı uygulama, Yayın oturumunu başlatır ve gönderenden gelen bir YÜKLE isteği (ör. medya parçası 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ğ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 tüm kullanıcı arayüzünü içerir.

receiver.js

Bu komut dosyası, alıcı uygulamamızın tüm mantığını yönetir.

Sık Sorulan Sorular

7. CastDebugLogger API ile entegrasyon

Cast Receiver SDK, geliştiricilerin CastDebugLogger API'yi kullanarak alıcı uygulamanızda kolayca hata ayıklaması için başka bir seçenek sunar.

Ayrıntılar ve daha fazla bilgi için Cast Hata Ayıklama Kaydedici kılavuzuna bakın.

Başlatma

Aşağıdaki komut dosyasını, alıcı uygulamanızda Web Alıcı SDK'sı komut dosyasından hemen sonra bulunan <head> etiketine index.html içinde ekleyin:

<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 js/receiver.js bölümünde ve playerManager öğesinin altında, CastDebugLogger örneğini alın ve bir READY etkinlik işleyicide günlük kaydediciyi etkinleştirin:

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 yer paylaşımı gösterilir.

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

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

CastDebugLogger kullanarak, Cast Web 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ının günlüğe kaydedilecek etkinlikleri belirtmek için cast.framework.events.EventType ve cast.framework.events.category kullanması gerekir.

CORE adlı oynatıcı etkinlikleri tetiklendiğinde veya bir mediaStatus değişikliği yayınlandığında günlüğe kaydetmek için READY etkinlik işleyicisinin altına aşağıdakileri 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
};

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. En yüksek öncelikliden en az öncelikliye doğru sıralanmış aşağıdaki günlük yöntemlerini kullanın:

  • 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 etiket, ikinci parametre ise log Message (günlük mesajı) olmalıdır. Etiket, yararlı bulduğunuz herhangi bir dize olabilir.

Günlükleri çalışırken göstermek için LOAD müdahalecinize günlükleri ekleyin.

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.LOAD,
      loadRequestData => {
    // Listed in order from highest to lowest priority.
    castDebugLogger.error(LOG_TAG, 'Test error log');

    castDebugLogger.warn(LOG_TAG, 'Test warn log');

    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request', loadRequestData);

    castDebugLogger.debug(LOG_TAG, 'Test debug log');

    return loadRequestData;
  }
);

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. Başka bir örnek de, WARNING düzeyinde özel bir etiket etkinleştirildiğinde yalnızca hata ve uyarı günlük mesajlarının gösterilmesidir.

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.

Aşağıdakileri loggerLevelByEvents çağrısının altına ekleyin:

...

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

...

8. Hata Ayıklama Yer Paylaşımını Kullanma

Cast Hata Ayıklama Günlükçüsü, özel günlük mesajlarınızı göstermek için alıcının üzerinde 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 READY etkinlik işleyiciye aşağıdakileri ekleyin:

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

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

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

Video karesinin üst kısmında yarı saydam bir arka planda hata ayıklama günlük mesajlarının listesi olan hata ayıklama yer paylaşımını gösteren resim

9. Komut ve Kontrol (CaC) Aracını Kullanma

Genel Bakış

Komut ve Denetim (CaC) Aracı, günlüklerinizi yakalar ve yer paylaşımlı hata ayıklama işlemini kontrol eder.

Alıcınızı CaC aracına bağlamanın iki yolu vardır:

Yeni bir Cast bağlantısı başlatın:

  1. CaC aracını açın, alıcının uygulama kimliğini ayarlayın ve alıcıya yayınlamak için yayın düğmesini tıklayın.
  2. Aynı alıcı uygulama kimliğiyle aynı cihaza ayrı bir gönderen uygulaması yayınlayın.
  3. Gönderen uygulamasından medya yüklediğinizde, araçta günlük mesajları gösterilir.

Mevcut bir yayınlama oturumuna katılın:

  1. Alıcı SDK'sını veya gönderen SDK'sını kullanarak çalışan yayın oturumu kimliğini alın. Chrome Remote Debugger konsolunda oturum kimliğini almak için alıcı tarafında aşağıdakini girin:
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

Aşağıdaki yöntemi kullanarak da oturum kimliğini bağlı bir web göndereninden alabilirsiniz:

cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();

&#39;Cast Connect & Günlük Kaydedici Denetimleri Komut ve Denetim (CaC) Aracı&#39;nın sekmesinde bulunan

  1. CaC aracına oturum kimliğini girin ve RESUME düğmesini tıklayın.
  2. Yayınla düğmesi bağlı olmalı ve araçta günlük mesajları gösterilmeye başlayacaktır.

Deneyebileceğiniz Yöntemler

Ardından, örnek alıcınızdaki günlükleri görmek için CaC Aracı'nı kullanacağız.

  1. CaC Aracı'nı açın.

&#39;Cast Connect & Günlük Kaydedici Denetimleri Komut ve Kontrol (CaC) Aracı sekmesinde

  1. Örnek uygulamanızın alıcı uygulama kimliğini girin ve SET APP ID düğmesini tıklayın.
  2. Sol üstteki Yayınla düğmesini tıklayın ve alıcınızı açmak için Google Cast uyumlu cihazınızı seçin.

&#39;Cast Connect & Günlük Kaydedici Denetimleri Komut ve Kontrol (CaC) Aracının bir Alıcı uygulamasına bağlı olduğunu gösteren sekmesi

  1. En üstteki LOAD MEDIA sekmesine gidin.

&#39;Load Media&#39; (Medya Yükleme) resmi Komut ve Kontrol (CaC) Aracı sekmesinde

  1. İstek türü radyo düğmesini LOAD olarak değiştirin.
  2. Örnek video oynatmak için SEND REQUEST düğmesini tıklayın.

&#39;Cast Connect & Günlük Kaydedici Denetimleri Komut ve Kontrol (CaC) Aracı&#39;nın sekmesinde yer alan günlük mesajlarının gösterildiği alt bölme

  1. Şu anda cihazınızda örnek bir video oynatılıyordur. Önceki adımlardaki günlüklerinizin, "Log Messages" (Günlük Mesajları) bölümünde gösterildiğini görürsünüz. sekmesine gidin.

Günlükleri incelemek ve alıcıyı kontrol etmek için aşağıdaki özellikleri deneyin:

  • Medya bilgilerini ve medya durumunu görmek için MEDIA INFO veya MEDIA STATUS sekmesini tıklayın.
  • Alıcıda bir hata ayıklama yer paylaşımı görmek için SHOW OVERLAY düğmesini tıklayın.
  • Alıcı uygulamayı yeniden yükleyip tekrar yayınlamak için CLEAR CACHE AND STOP düğmesini kullanın.

10. Tebrikler

Artık, en yeni Cast Alıcı SDK'sını kullanarak Yayın Hata Ayıklama Günlüğü'nü Cast uyumlu Web Alıcısı uygulamanıza nasıl ekleyeceğinizi biliyorsunuz.

Daha fazla bilgi edinmek için Yayınlama Hata Ayıklama Günlüğü ile Komut ve Kontrol (CaC) Aracı geliştirici kılavuzlarına göz atın.