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

1. Genel bakış

Bu codelab'de, mevcut Özel Web Alıcısı uygulamanıza Cast Hata Ayıklama Kaydedici'yi 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 dayalı olarak 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.

Neyi inşa edeceğiz?

Bu codelab'i tamamladığınızda, Cast Hata Ayıklama Kaydedici ile entegre edilmiş bir Özel Web Alıcınız olacaktır.

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

Neler öğreneceksiniz?

• Web Alıcısı geliştirme için ortamınızı ayarlama.
• Hata Ayıklama Kaydedici'yi yayın alıcınıza nasıl entegre edersiniz?

Gerekenler

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

Deneyim

• Daha önce Cast deneyiminizin olması ve bir Cast Web Alıcısı'nın nasıl çalıştığını anlamanız gerekir.
• Web geliştirme konusunda önceden bilgi sahibi olmanız gerekir.
• Ayrıca TV izleme konusunda da önceden bilgi sahibi olmanız gerekir :)

2. Örnek kodu alın

Örnek kodun tamamını bilgisayarınıza indirebilirsiniz...

file_downloadKaynağı İndirin

indirilen zip dosyasını açın.

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

Web alıcınızı bir Yayın cihazıyla kullanabilmek için yayın cihazınızın, yayın cihazınızın erişebileceği bir yerde barındırılması gerekir. https'yi destekleyen bir sunucunuz zaten varsa aşağıdaki talimatları atlayın ve bir sonraki bölümde ihtiyaç duyacağınızdan 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 adresine gidip sunucunuzu başlatın.

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

4. Cast Developer Console'da bir uygulamayı kaydetme

Chromecast cihazlarda bu codelab'de yerleşik olarak bulunan özel bir Web Alıcısı'nı çalıştırabilmek için uygulamanızı kaydetmeniz gerekir. Uygulamanızı kaydettikten sonra, gönderen uygulamanızın API çağrıları gerçekleştirmek (ör. bir alıcı uygulamayı başlatmak) 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. Geliştiriyoruz.

Yeni alıcınızın bilgilerini girin. Son bölümdeki URL'yi kullandığınızdan emin olun. Yeni alıcınıza atanan Uygulama Kimliğini not edin.

Yayınlamadan önce alıcı uygulamanıza erişebilmesi için Google Cast cihazınızı da kaydettirmeniz gerekir. Alıcı uygulamanız yayınlandıktan sonra tüm Google Cast cihazlarında kullanılabilir hale gelir. 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 Developer Console'a erişirken ekranınızı Chrome'da yayınlayarak da bulabilirsiniz.

Alıcınızın ve cihazınızın test için hazır olması 5-15 dakika sürer. 5-15 dakika bekledikten sonra Cast cihazınızı yeniden başlatmanız gerekir.

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

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ı oynatabilecektir.

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

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

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

5. İstek türü radyo düğmesini LOAD olarak değiştirin.
6. Örnek video oynatmak için SEND REQUEST düğmesini tıklayın.
7. Video, Varsayılan Alıcı kullanılırken 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 desteği eklememiz gerekiyor. Bu codelab'de kullanacağımız bazı Google Cast terminolojisi şöyledir:

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

Artık favori metin düzenleyicinizi kullanarak başlangıç projesinin temellerini oluşturmaya hazırsınız:

1. Örnek kod indirdiğinizden app-start dizinini seçin.
2. js/receiver.js ve index.html uygulamasını açın.

Bu codelab'de çalışırken http-server uygulamasının yaptığınız değişiklikleri alması gerektiğini unutmayın. Görünmüyorsa 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 (bir medya parçasını oynatma komutu gibi) 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ğlamak için gereken 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

• Google Cast nedir?
• Nasıl Google Cast Geliştiricisi olurum?

7. CastDebugLogger API ile entegrasyon

Yayın Alıcı SDK'sı, 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 Yayın Hata Ayıklama Kaydedici kılavuzuna bakın.

Başlatma

Aşağıdaki komut dosyasını, index.html içindeki Web Alıcı SDK'sı komut dosyasından hemen sonra alıcı uygulamanızın <head> etiketine 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>

js/receiver.js bölümünde, dosyanın üst kısmında ve playerManager altında, CastDebugLogger örneğini alın ve günlük kaydediciyi bir 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 kaydedici etkinleştirildiğinde, alıcıda DEBUG MODE bilgi paylaşımı gösterilir.

Günlük Oynatıcı Etkinlikleri

CastDebugLogger ile Cast Web Receiver SDK'sı tarafından tetiklenen oynatıcı etkinliklerini kolayca günlüğe kaydedebilir ve farklı günlük kaydedici seviyeleri kullanarak etkinlik verilerini kaydedebilirsiniz. loggerLevelByEvents yapılandırması, günlüğe kaydedilecek etkinlikleri belirtmek için cast.framework.events.EventType ve cast.framework.events.category gerektirir.

CORE oynatıcısı etkinlikleri tetiklendiğinde veya bir mediaStatus değişikliği yayınlandığında günlüğe kaydetmek için aşağıdaki READY etkinlik işleyicinin altına 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ının hata ayıklama yer paylaşımında farklı renklerle görünen günlük mesajları oluşturmanızı sağlar. En yüksek öncelikli olandan 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 günlük mesajı olmalıdır. Etiket, faydalı bulduğunuz herhangi bir dize olabilir.

Günlükleri çalışırken görmek için günlükleri LOAD müdahale aracınıza 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 bölümünde 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 etiket etkinleştirildiğinde yalnızca hata ve uyarı günlüğü mesajlarının görüntülenmesidir.

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

loggerLevelByEvents araması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

Yayın Hata Ayıklama Kaydedici, özel günlük mesajlarınızın gösterilmesi 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şımındaki günlük mesajlarını temizlemek için clearDebugLogs kullanın.

Hata ayıklama yer paylaşımını alıcınızda önizlemek için READY etkinlik işleyiciye aşağıdaki kodu 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();
  }
});

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

Genel bakış

Command and Control (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 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ınla düğmesini tıklayın.
2. Aynı cihaza, aynı alıcı uygulama kimliğine sahip ayrı bir gönderen uygulaması yayınlayın.
3. Gönderen uygulamasından medya yükleyin. Günlük mesajları araçta 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 Cast oturum kimliğini alın. Alıcı tarafında, Chrome Remote Debugger konsolunda oturum kimliğini almak için aşağıdaki bilgileri girin:

cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

Oturum kimliğini bağlı bir web göndereninden almak için aşağıdaki yöntemi de kullanabilirsiniz:

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

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

Deneyebileceğiniz Öneriler

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.

2. Örnek uygulamanızın alıcı uygulama kimliğini girin ve SET APP ID düğmesini tıklayın.
3. 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.

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

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

7. Şu anda cihazınızda örnek bir video oynatılıyor olmalıdır. Önceki adımlardan sonraki günlüklerinizi aracın alt kısmındaki "Log Messages" (İletileri Günlük) sekmesinde görmeye başlarsınız.

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ı uygulamayı yeniden yüklemek ve tekrar yayınlamak için CLEAR CACHE AND STOP düğmesini kullanın.

10. Tebrikler

Artık en son Cast Alıcı SDK'sını kullanarak Yayın Hata Ayıklama Kaydedici'yi Cast uyumlu Web Alıcısı uygulamanıza nasıl ekleyeceğinizi biliyorsunuz.

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