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ı uygulamanıza nasıl ekleyeceğiniz açıklanmaktadır.

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ğlanır.

Ne geliştireceğiz?

Bu codelab'i tamamladığınızda Cast Debug Logger ile entegre edilmiş bir özel web alıcınız olur.

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

Neler öğreneceksiniz?

  • Web alıcı geliştirme için ortamınızı nasıl ayarlayacağınız açıklanmaktadır.
  • Hata Ayıklama Günlükçüsü'nü Cast alıcınıza entegre etme

İhtiyacınız olanlar

Deneyim

  • Daha önce Cast deneyiminiz olmalı ve Cast Web Alıcısı'nın nasıl çalıştığını anlamış olmalısınız.
  • Daha önce web geliştirme bilgisine sahip olmanız gerekir.
  • Ayrıca TV izleme konusunda önceden bilgi sahibi olmanız gerekir :)

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

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

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

Yeni başlayan Orta düzey Uzman

TV izleme deneyiminizi nasıl değerlendirirsiniz?

Başlangıç Orta İleri

2. Örnek kodu alın

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

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

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

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

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

Sunucuyu çalıştırma

Seçtiğiniz hizmeti kurduktan sonra app-start simgesine gidin ve sunucunuzu başlatın.

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

4. Cast Geliştirici Konsolu'nda uygulama kaydetme

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

"Yeni Uygulama Ekle" düğmesinin vurgulandığı Cast Play Console'un resmi

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

"Yeni alıcı uygulaması" ekranının, "Özel alıcı" seçeneği vurgulanmış haldeki resmi

"Özel alıcı"yı seçin. Oluşturacağımız öğe budur.

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

Yeni alıcınızın ayrıntılarını girin. Son bölümdeki URL'yi kullandığınızdan emin olun. Yepyeni alıcınıza atanan Uygulama Kimliği'ni 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ınladıktan sonra tüm Google Cast cihazlarında kullanılabilir. Bu codelab'in amacı doğrultusunda, yayınlanmamış bir alıcı uygulamasıyla çalışmanız önerilir.

Google Cast SDK Geliştirici Konsolu'nun "Yeni Cihaz Ekle" düğmesi vurgulanmış görüntüsü

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

"Yayın alıcı cihaz ekle" iletişim kutusunun resmi

Yayın cihazınızın arkasında yazan seri numarasını girin ve cihaza açıklayıcı bir ad verin. Seri numaranızı, Google Cast SDK Geliştirici Konsolu'na erişirken ekranınızı Chrome'da 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 test için hazır olmasını beklerken örnek bir tamamlanmış Web Alıcı uygulamasının nasıl göründüğüne bakalım. Oluşturacağımız alıcı, uyarlanabilir bit hızı akışını kullanarak medyayı oynatabilecek.

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

Komuta ve Kontrol (CaC) aracının "Cast Connect ve Logger Denetimleri" sekmesinin resmi

  1. Varsayılan CC1AD845 alıcı kimliğini kullanın 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.

Komuta ve Kontrol (CaC) aracının "Cast Connect ve Logger Kontrolleri" sekmesinin, alıcı uygulamasına bağlı olduğunu gösteren resmi

  1. Üst kısımdaki LOAD MEDIA sekmesine gidin.

Komuta 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 videoyu oynatmak için SEND REQUEST düğmesini tıklayın.
  3. Video, varsayılan alıcı kullanılarak temel alıcı işlevselliğinin 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 desteği eklememiz gerekiyor. Bu codelab'de kullanacağımız bazı Google Cast terimleri şunlardır:

  • Bir gönderen uygulaması mobil cihazda veya dizüstü bilgisayarda çalışıyorsa,
  • Google Cast veya Android TV cihazında bir alıcı uygulaması çalışıyor olmalıdır.

Artık en sevdiğiniz metin düzenleyiciyi kullanarak başlangıç projesinin üzerine yeni özellikler eklemeye hazırsınız:

  1. Örnek kod indirme işleminizden klasör simgesiapp-start dizinini seçin.
  2. js/receiver.js ve index.html özelliklerini etkinleştirin

Bu codelab'i uygularken http-server, yaptığınız değişiklikleri algılamalıdır. Açılmazsa http-server hizmetini durdurup yeniden başlatmayı deneyin.

Uygulama Tasarımı

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

Uygulama, index.html içinde tanımlanan bir ana görünümden 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ştiricilere CastDebugLogger API'yi kullanarak alıcı uygulamanızda kolayca hata ayıklama yapma konusunda başka bir seçenek sunar.

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

Başlatma

Aşağıdaki komut dosyasını, <head> etiketinde Web Receiver SDK komut dosyasının hemen ardından, index.html içine 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'nin altında, CastDebugLogger örneğini alın ve READY etkinlik işleyicisinde 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ıklama kaydedicisi etkinleştirildiğinde alıcıda DEBUG MODE yer paylaşımı gösterilir.

Çerçevenin sol üst köşesinde kırmızı arka plan üzerinde &quot;DEBUG MODE&quot; (Hata Ayıklama Modu) mesajının göründüğü bir videonun oynatıldığına dair resim

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

CastDebugLogger kullanarak Cast Web Receiver SDK tarafından tetiklenen oynatıcı etkinliklerini kolayca günlüğe kaydedebilir ve etkinlik verilerini günlüğe kaydetmek için farklı günlükçü düzeyleri kullanabilirsiniz. loggerLevelByEvents config komutu, kaydedilecek etkinlikleri belirtmek için cast.framework.events.EventType ve cast.framework.events.category parametrelerini alır.

Oynatıcı CORE etkinlikleri tetiklendiğinde veya 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ı renklerde görünen günlük mesajları oluşturmanıza olanak tanır. En yüksekten en düşüğe doğru öncelik sırasına göre listelenen 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 özel etiket, ikinci parametre ise günlük mesajı olmalıdır. Etiket, faydalı bulduğunuz herhangi bir dize olabilir.

Günlükleri işlem sırasında göstermek için LOAD önleyiciye 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 özel etiket için loggerLevelByTags içinde günlük düzeyini ayarlayarak hata ayıklama yer paylaşımında hangi mesajların görüneceğini kontrol edebilirsiniz. Örneğin, günlük düzeyi cast.framework.LoggerLevel.DEBUG olan özel bir etiketin etkinleştirilmesi, hata, uyarı, bilgi ve hata ayıklama günlük iletileriyle eklenen tüm iletileri gösterir. Diğer bir örnek olarak, WARNING düzeyinde özel bir etiketin etkinleştirilmesi yalnızca hata ve uyarı günlük mesajlarını gösterir.

loggerLevelByTags yapılandırması isteğe bağlıdır. Günlükçü düzeyi için özel bir etiket yapılandırılmamışsa 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 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ı etkinleştirmek/devre dışı bırakmak için showDebugLogs, yer paylaşımındaki günlük iletilerini temizlemek için clearDebugLogs tuşunu kullanın.

Alıcınızda hata ayıklama yer paylaşımının önizlemesini yapmak için READY etkinlik işleyicisine 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();
  }
});

Hata ayıklama yer paylaşımını gösteren resim. Video karesinin üzerinde yarı saydam arka plan üzerinde hata ayıklama günlüğü mesajlarının listesi.

9. Komuta ve Kontrol (CaC) aracını kullanma

Genel Bakış

Komuta ve Kontrol (CaC) Aracı, günlüklerinizi yakalar ve hata ayıklama katmanı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şlatma:

  1. CaC aracını açın, alıcı 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ğine sahip aynı cihaza ayrı bir gönderen uygulaması yayınlayın.
  3. Gönderen uygulamasından medya yüklenir ve araçta günlük mesajları gösterilir.

Mevcut bir Cast oturumuna katılma:

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

Alternatif olarak, oturum kimliğini bağlı bir web göndereninden de alabilirsiniz. Bunun için aşağıdaki yöntemi kullanın:

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

Oturuma devam etmek için Komuta ve Kontrol (CaC) aracının &quot;Cast Connect ve Logger Kontrolleri&quot; sekmesinin resmi

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

Deneyebileceğiniz şeyler

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.

Komuta ve Kontrol (CaC) aracının &quot;Cast Connect ve Logger Denetimleri&quot; sekmesinin resmi

  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.

Komuta ve Kontrol (CaC) aracının &quot;Cast Connect ve Logger Kontrolleri&quot; sekmesinin, alıcı uygulamasına bağlı olduğunu gösteren resmi

  1. Üst kısımdaki LOAD MEDIA sekmesine gidin.

Komuta 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 videoyu oynatmak için SEND REQUEST düğmesini tıklayın.

Komut ve Kontrol (CaC) Aracı &#39;nın &quot;Cast Connect ve Logger Kontrolleri&quot; sekmesinin, alt bölmeyi dolduran günlük mesajlarıyla birlikte görüntüsü

  1. Cihazınızda örnek bir video oynatılıyor olmalıdır. Önceki adımlardaki günlüklerinizin, aracın alt kısmındaki "Günlük Mesajları" sekmesinde gösterilmeye başladığını görmelisiniz.

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

  • Medya bilgilerini ve medya durumunu görmek için MEDIA INFO veya MEDIA STATUS sekmesini tıklayın.
  • Alıcıda 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ın yapmak için CLEAR CACHE AND STOP düğmesini kullanın.

10. Tebrikler

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

Daha fazla bilgi için Cast Debug Logger ve Command and Control (CaC) Tool geliştirici kılavuzlarına bakın.