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 :)
Bu eğiticiyi nasıl kullanacaksınız?
Web uygulamaları oluşturma deneyiminizi nasıl değerlendirirsiniz?
TV izleme deneyiminizi nasıl değerlendirirsiniz?
2. Örnek kodu alın
Örnek kodun tamamını bilgisayarınıza indirebilirsiniz...
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.
- Tarayıcınızda Komut ve Denetim (CaC) Aracı'nı açın.
- Varsayılan
CC1AD845
alıcı kimliğini kullanıpSET APP ID
düğmesini tıklayın. - Sol üstteki Yayınla düğmesini tıklayın ve Google Cast uyumlu cihazınızı seçin.
- Üst kısımdaki
LOAD MEDIA
sekmesine gidin.
- İstek türü radyo düğmesini
LOAD
olarak değiştirin. - Örnek video oynatmak için
SEND REQUEST
düğmesini tıklayın. - 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:
- Örnek kod indirdiğinizden
app-start
dizinini seçin. js/receiver.js
veindex.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
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:
- 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.
- Aynı cihaza, aynı alıcı uygulama kimliğine sahip ayrı bir gönderen uygulaması yayınlayın.
- Gönderen uygulamasından medya yükleyin. Günlük mesajları araçta gösterilir.
Mevcut bir yayınlama oturumuna katılın:
- 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();
- CaC aracına oturum kimliğini girin ve
RESUME
düğmesini tıklayın. - 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.
- CaC aracını açın.
- Örnek uygulamanızın alıcı uygulama kimliğini girin ve
SET APP ID
düğmesini tıklayın. - 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.
- Üst kısımdaki
LOAD MEDIA
sekmesine gidin.
- İstek türü radyo düğmesini
LOAD
olarak değiştirin. - Örnek video oynatmak için
SEND REQUEST
düğmesini tıklayın.
- Ş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
veyaMEDIA 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.