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

1. Genel Bakış

Bu codelab'de, Cast Hata Ayıklama Günlüğünün mevcut Özel Web Alıcısı uygulamanıza nasıl ekleneceği 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 Listesi, Cast kullanıcı deneyimini desteklenen tüm platformlarda 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 Günlüğü 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ü Cast alıcınıza entegre etme.

İhtiyacınız olanlar

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

Deneyim

• Daha önce Cast deneyiminiz olmalı ve Cast web alıcısının işleyiş şeklini anlamanız gerekir.
• Web geliştirme konusunda bilgi sahibi olmanız gerekir.
• Ayrıca TV izleme konusunda bilgi sahibi olmanız gerekir.

Ağ bağlantısıyla ilgili sorun mu yaşıyorsunuz?

Kablosuz ağın güvenilir olmadığı bir yerdeyseniz Chromecast cihazı, Chromecast veya Google TV Yüklü Chromecast için bir Ethernet adaptörü kullanılarak kablolu olarak bağlanabilir.

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

Yalnızca okuyun Okuyup alıştırmaları tamamlayın

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

Acemi Orta Uzman

TV izleme deneyiminizi nasıl değerlendirirsiniz?

Acemi Orta Uzman

2. Örnek kodu alın

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

Kaynağı İndir

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

Cast Hata Ayıklama Günlükçüsü codelab deposu iki örnek proje içerir:

• app-start: Bu codelab'de temel alacağınız başlangıç kodu.
• app-done: Tamamlanmış örnek video uygulamasının tam kodu.

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

Web alıcınızı bir Cast cihazıyla kullanabilmek için Cast 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ıp bir 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. Bir sonraki bölümde bu kodu kullanacaksınız.

4. Cast Geliştirici Konsolu'na uygulama kaydetme

Cast Geliştirici hesabınız yok mu?

Google Cast SDK Geliştirici Konsolu'nda bir hesaba kaydolun ve kayıt ücretini ödeyin.

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 (ör. alıcı uygulamasını 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, oluşturduğumuz şey bu.

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ınladıktan sonra tüm Google Cast cihazlarda kullanılabilir. Bu kod laboratuvarının amacı doğrultusunda, yayınlanmamış bir alıcı uygulamasıyla ç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 Geliştirici Konsolu'na erişirken Chrome'da ekranınızı yayınlayarak da bulabilirsiniz

Alıcının ve cihazınızın teste 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 teste hazır olmasını beklerken, tamamlanmış bir örnek Web Alıcı uygulamasına göz atalım. Oluşturacağımız alıcı, uyarlanabilir bit hızı aktarımı kullanarak medya oynatabilir.

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

2. Varsayılan CC1AD845 alıcı kimliğini kullanın ve SET APP ID düğmesini tıklayın.
3. Sol üstteki Cast 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. Sana Özel bölümündeki bir videoyu oynatmak için SEND REQUEST düğmesini tıklayın.
7. Varsayılan alıcı kullanılarak temel alıcı işlevinin nasıl göründüğünü göstermek için video, Google Cast özellikli 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 kod laboratuvarında kullanacağımız bazı Google Cast terimleri ş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ı.

Artık favori metin düzenleyicinizi kullanarak başlangıç projesinin üzerine kod yazmaya hazırsınız:

1. Örnek kod indirmenizden app-start dizinini seçin.
2. js/receiver.js ve index.html'u açın

Bu codelab üzerinde çalıştığınız için http-server uygulamasının yaptığınız değişiklikleri alması gerektiğini unutmayın. Bu işlem işe yaramazsa http-server'ü durdurup yeniden başlatmayı deneyin.

Uygulama Tasarımı

Alıcı uygulama, Cast oturumunu başlatır ve bir gönderenden 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ğlayan 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 kullanıcı arayüzünün tamamını içerir.

receiver.js

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

Yayınlama dokümanları?

Alıcı, iOS, Android ve Chrome gönderenler için kapsamlı dokümanlarımız mevcuttur.

Sık Sorulan Sorular

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

7. CastDebugLogger API ile entegrasyon

Cast Receiver SDK, geliştiricilerin CastDebugLogger API'yi kullanarak alıcı uygulamanızda kolayca hata ayıklama yapmasına olanak tanır.

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

★ Not:

CastDebugLogger API'yi kullanmak için Google Cast SDK Geliştirici Konsolu'nda Cast cihazınızı kaydettirmeniz ve 1.44 veya daha yeni bir cihaz donanım yazılımı sürümü kullanmanız gerekir.

Başlatma

Alıcısı uygulamanızın <head> etiketine, Web Alıcısı SDK'sı komut dosyasının hemen arkasına şu komut dosyasını ekleyin:index.html

<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 içinde ve playerManager altında CastDebugLogger örneğini alın ve günlüğe kaydediciyi bir READY etkinlik işleyicisinde 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);
  }
});

Uyarı: Üretim alıcı için setEnabled değerini false olarak değiştirdiğinizden emin olun.

Hata ayıklama günlüğü etkinleştirildiğinde alıcıda DEBUG MODE yer paylaşımı gösterilir.

Oynatıcı etkinliklerini günlüğe kaydetme

CastDebugLogger'ü kullanarak Cast Web Receiver SDK'sı tarafından tetiklenen oynatıcı etkinliklerini kolayca günlüğe kaydedebilir ve etkinlik verilerini günlüğe kaydetmek için farklı günlükleyici 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.

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ı renklerle görünen günlük mesajları oluşturmanıza olanak tanır. En yüksek öncelikten en düşük önceliğe 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 bir özel etiket, ikinci parametre ise log Message (günlük mesajı) olmalıdır. Etiket, faydalı olduğunu düşündüğünüz herhangi bir dize olabilir.

Günlükleri çalışırken göstermek için LOAD arayüz yakalama 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 özel etiket için loggerLevelByTags'te günlük düzeyini ayarlayarak hata ayıklama yer paylaşımında hangi mesajların gösterileceğini kontrol edebilirsiniz. Örneğin, cast.framework.LoggerLevel.DEBUG günlük düzeyine sahip bir özel 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 olarak, WARNING düzeyinde bir özel etiket etkinleştirildiğinde yalnızca hata ve uyarı günlük mesajları gösterilir.

loggerLevelByTags yapılandırması isteğe bağlıdır. Bir özel etiket, günlük kaydı 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 ç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. Yer paylaşımlı hata ayıklama ekranını kullanma

Cast Hata Ayıklama Günlüğü, ö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çmak için showDebugLogs, yer paylaşımındaki günlük mesajlarını silmek için clearDebugLogs simgesini kullanın.

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

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 Cast bağlantısı başlatma:

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ğine sahip ayrı bir gönderen uygulamasını aynı cihaza yayınlayın.
3. Gönderen uygulamasından medya yüklediğinizde, 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ıklama Aracı konsolunda oturum kimliğini almak için aşağıdakileri 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();

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

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.

2. Örnek uygulamanızın alıcı uygulama kimliğini girin ve SET APP ID düğmesini tıklayın.
3. Alıcınızı açmak için sol üstteki Cast 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. Sana Özel bölümündeki bir videoyu oynatmak için SEND REQUEST düğmesini tıklayın.

7. Cihazınızda örnek bir video oynatılmaya başlar. Önceki adımlardaki günlüklerinizin aracın alt kısmındaki "Günlük Mesajları" sekmesinde gösterilmeye başlaması gerekir.

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

10. Tebrikler

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

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

Daha fazla Cast almak ister misiniz?

Diğer Cast kod laboratuvarlarına ve GitHub'daki örnek uygulamalarımıza göz atın.