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

1. Genel bakış

Google Cast logosu

Bu codelab'de, Cast Debug Logger'ı mevcut Özel Web Alıcısı uygulamanıza nasıl ekleyeceğinizi öğrenebilirsiniz.

Google Cast nedir?

Google Cast SDK'sı, uygulamanızın Google Cast uyumlu cihazlarda içerik oynatabilmesini ve oynatmayı kontrol edebilmesini sağlar. Google Cast Tasarım Listesi'ne göre gerekli kullanıcı arayüzü bileşenlerini sağlar.

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

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

Bu codelab'i tamamladığınızda Cast Debug Logger ile entegre edilmiş bir Custom Web Buyer (Özel Web Alıcısı) alırsınız.

Ayrıntılar ve daha fazla bilgi için Cast Debug Logger rehberine bakın.

Neler öğreneceksiniz?

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

Gerekenler

Deneyim

  • Önceki Yayın deneyiminiz olmalı ve Yayın Web Alıcısı'nın işleyiş şeklini anlamanız gerekir.
  • Bunun için önce web geliştirme bilgisine sahip olmanız gerekir.
  • Ayrıca, TV izleme konusunda önceden bilgi sahibi olmanız gerekir :)

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

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

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

Acemi Orta Yeterli

TV izleme deneyiminizi nasıl değerlendirirsiniz?

Acemi Orta Yeterli

2. Örnek kodu alın

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

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

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

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

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

Sunucuyu çalıştırma

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

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

4. Cast Developer Console'da uygulama kaydetme

Bu codelab'de açıklandığı şekilde Chromecast cihazlarda özel bir Web Alıcısı çalıştırmak için uygulamanızı kaydetmeniz gerekir. Uygulamanızı kaydettikten sonra, gönderen uygulamanızın API çağrıları yapmak için kullanması gereken bir uygulama kimliği (ör. bir alıcı uygulama başlatmak) alırsınız.

"Yeni Uygulama Ekle" düğmesinin vurgulandığı Cast Geliştirici Konsolu resmi

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

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

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

"Yeni Özel Alıcı" iletişim kutusundaki "Alıcı Uygulaması URL'si" alanının doldurulması

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

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

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

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

Yayın cihazınızın arkasında yazılı olan seri numarasını girin ve açıklayıcı bir ad verin. Google Cast SDK Developer Console'a erişirken ekranınızı Chrome'da yayınlayarak da seri numaranızı bulabilirsiniz

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

5. Örnek uygulamayı çalıştırın

Google Chrome logosu

Yeni Web Alıcımızın test için hazır olmasını beklerken, tamamlanmış bir Web Alıcısı 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ı oynatabilecek.

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

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

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

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

  1. En üstteki LOAD MEDIA sekmesine gidin.

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

  1. İstek türü radyo düğmesini LOAD olarak değiştirin.
  2. Örnek bir video oynatmak için SEND REQUEST düğmesini tıklayın.
  3. Video, Varsayılan Alıcı kullanılarak temel alıcı işlevinin nasıl göründüğünü göstermek için Google Cast uyumlu cihazınızda oynatılmaya başlar.

6. Başlangıç projesini hazırlama

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

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

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

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

Bu codelab'de çalışırken http-server adlı kullanıcının yaptığınız değişiklikleri kabul etmesi gerektiğini unutmayın. Başlamazsa http-server uygulamasını durdurup yeniden başlatmayı deneyin.

Uygulama Tasarımı

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

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

index.html

Bu html dosyası, alıcı uygulamamızın tüm kullanıcı arayüzünü içerir.

alıcı.js

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

Sık Sorulan Sorular

7. CastDebugLogger API ile entegrasyon

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

Ayrıntılar ve daha fazla bilgi için Cast Debug Logger rehberine bakın.

Başlatma

Aşağıdaki komut dosyasını, alıcı uygulamanızın Web Alıcı SDK komut dosyasından hemen sonra <head> etiketine, index.html ile birlikte 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, playerManager örneğinde CastDebugLogger örneğini alın ve günlük kaydını READY etkinlik işleyicide 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ıklama günlük kaydı etkinleştirildiğinde, alıcıda DEBUG MODE yer paylaşımı gösterilir.

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

Günlük Oynatıcı Etkinlikleri

CastDebugLogger kullanarak, Yayın Web Alıcısı SDK'sı tarafından tetiklenen oynatıcı etkinliklerini kolayca kaydedebilir ve etkinlik verilerini günlüğe kaydetmek için farklı günlük kaydı düzeyleri kullanabilirsiniz. loggerLevelByEvents yapılandırması, günlüğe kaydedilecek etkinlikleri belirtmek için cast.framework.events.EventType ve cast.framework.events.category işlemlerini gerektiriyor.

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

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

CastDebugLogger API, alıcı hata ayıklama yer paylaşımında farklı renklerle görünen günlük mesajları oluşturmanıza olanak tanır. En yüksekten en düşük önceliğe doğru sıralanmış halde 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 günlük mesajı olmalıdır. Etiket, yararlı bulduğunuz herhangi bir dize olabilir.

Günlükleri uygulamada göstermek için LOAD aracınıza günlük 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;
  }
);

Her bir özel etiket için loggerLevelByTags düzeyinde günlük düzeyini ayarlayarak hata ayıklama yer paylaşımında hangi iletilerin görüneceğini kontrol edebilirsiniz. Örneğin, günlük düzeyi cast.framework.LoggerLevel.DEBUG olan bir özel etiket etkinleştirildiğinde eklenen tüm iletiler hata, uyarı, bilgi ve hata ayıklama günlüğüyle gösterilir. Bir diğer örnek ise WARNING düzeyiyle özel bir etiketin etkinleştirilmesinin yalnızca hata gösterip günlük mesajlarını uyarmasıdır.

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

loggerLevelByEvents çağrısının altına aşağıdakileri 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 Debug Logger, özel günlük mesajlarınızı göstermek için alıcıda bir hata ayıklama yer paylaşımı sağlar. Hata ayıklama yer paylaşımını açıp kapatmak için showDebugLogs, yer paylaşımlı günlük mesajlarını temizlemek içinse clearDebugLogs kullanın.

Alıcınızdaki hata ayıklama yer paylaşımını önizlemek için 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 çerçevesinin üstünde yarı saydam bir arka planda bulunan hata ayıklama günlük mesajlarının listesi olan hata ayıklama yer paylaşımının gösterildiği resim

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

Genel bakış

Komut ve Kontrol (CaC) Aracı, günlüklerinizi yakalar ve hata ayıklama yer paylaşımını kontrol eder.

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

Yeni bir Yayın 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ınla düğmesini tıklayın.
  2. Aynı alıcı Uygulama Kimliği ile aynı cihaza ayrı bir gönderen uygulaması yayınlayın.
  3. Gönderen uygulamadan medya yükleyin. Araçta günlük mesajları gösterilir.

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

  1. Alıcı SDK'sını veya gönderen SDK'sını kullanarak devam eden Yayın oturumu kimliğini edinin. Chrome Uzaktan Hata Ayıklayıcı konsolunda oturum kimliğini almak için alıcı tarafında aşağıdakileri girin:
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

Dilerseniz oturum kimliğini bağlı bir web göndericisinden almak için aşağıdaki yöntemi kullanabilirsiniz:

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

Oturumu devam ettirmek için Command and Control (CaC) aracının &quot;Cast Connect & Logger Controls&quot; (Yayın Bağlantısı ve Günlük Kaydı Kontrolleri) sekmesinin resmi

  1. CaC Aracı'da oturum kimliğini girip RESUME düğmesini tıklayın.
  2. Yayınla düğmesi bağlanmalı ve araçta günlük mesajlarını göstermeye başlamalıdır.

Deneyebileceğiniz Noktalar

Ardından, örnek alıcınızla ilgili günlükleri görmek için CAC Aracı'nı kullanırız.

  1. CaC Tool'u açın.

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

  1. Örnek uygulamanızın alıcı uygulama kimliğini girip 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.

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

  1. En üstteki LOAD MEDIA sekmesine gidin.

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

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

Komut ve Kontrol (CaC) Aracı &#39;nın, alt bölmeyi dolduran günlük mesajlarının yer aldığı &quot;Yayın Bağlantı ve Günlük Kaydı Denetimleri&quot; sekmesinin resmi

  1. Cihazınızda artık örnek bir video oynatılıyor olabilir. Önceki adımlardaki günlüklerinizi, aracın alt kısmındaki "Günlük Mesajları" sekmesinde görmeye başlarsınız.

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

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

10. Tebrikler

Artık Cast Debug Logger'ı, Cast özellikli Web Alıcı uygulamanıza en son Cast Alıcı SDK'sını kullanarak nasıl ekleyeceğinizi biliyorsunuz.

Daha fazla bilgi için Yayın Hata Ayıklama Günlüğü ve Komut ve Kontrol (CaC) Aracı geliştirici kılavuzlarına bakın.