1. Genel bakış
Bu codelab'de, Cast Ad Breaks API'yi kullanan bir Özel Web Alıcısı uygulamasının nasıl oluşturulacağı açıklanmaktadır.
Google Cast nedir?
Google Cast, kullanıcıların bir mobil cihazdan TV'ye içerik yayınlamasına olanak tanır. Kullanıcılar daha sonra mobil cihazlarını TV'de medya oynatmak için uzaktan kumanda olarak kullanabilir.
Google Cast SDK'sı, uygulamanızı bir TV veya ses sistemini kontrol edecek şekilde genişletmenize olanak tanır. Cast SDK'sı, Google Cast Tasarım Kontrol Listesi'ne göre gerekli kullanıcı arayüzü bileşenlerini ekleyebilmenizi sağlar.
Google Cast Tasarım Kontrol Listesi, kullanıcı deneyimlerini desteklenen tüm platformlarda sezgisel hale getirmek amacıyla Cast uygulamalarını standart hale getirmek için sağlanmıştır.
Neyi inşa edeceğiz?
Bu codelab'i tamamladığınızda, Break API'den yararlanan bir Yayın Alıcısı oluşturmuş olursunuz.
Neler öğreneceksiniz?
- Cast için içeriğe VMAP ve VAST araları ekleme
- Ara klipleri atlama
- Sarma işleminde varsayılan ara davranışını özelleştirme
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şli TV veya monitör ya da Google Home Hub
Deneyim
Bu codelab'e devam etmeden önce aşağıdaki deneyime sahip olduğunuzdan emin olun.
- Genel Web geliştirme bilgisi.
- Cast Web Alıcısı uygulamaları oluşturma.
Bu eğiticiyi nasıl kullanacaksınız?
Web uygulamaları oluşturma deneyiminizi nasıl değerlendirirsiniz?
2. Örnek kodu alın
Tüm örnek kodları bilgisayarınıza indirin...
indirilen zip dosyasını açın.
3. Alıcıyı yerel olarak dağıtın
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'in yerleşik olarak bulunduğu özel bir alıcıyı çalıştırabilmek için uygulamanızı kaydetmeniz gerekir. Uygulamanızı kaydettikten sonra, Web Alıcısı uygulamasını başlatmak için Gönderen Uygulaması'nın yapılandırılması gerektiğini belirten bir uygulama kimliği oluşturulur.
"Yeni uygulama ekle"yi tıklayın
"Özel Alıcı"yı seçin. Geliştiriyoruz.
Yeni alıcınızın ayrıntılarını girin. Web Alıcısı uygulamanızı barındırmayı planladığınız yeri gösteren URL'yi kullandığınızdan emin olun. Uygulamayı kaydettikten sonra konsol tarafından oluşturulan Uygulama Kimliği'ni not edin. Gönderen uygulaması, sonraki bir bölümde bu tanımlayıcıyı kullanacak şekilde yapılandırılır.
Ayrıca, yayınlamadan önce alıcı uygulamanıza erişebilmesi için bir Google Cast cihazını kaydettirmeniz gerekir. Alıcı uygulamanız yayınlandıktan sonra tüm Google Cast cihazlarında kullanılabilir hale gelir. Bu codelab'in amaçları 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. Başlangıç Projesini Hazırlama
Bu codelab'e başlamadan önce, reklam arası API'lerine genel bakış sunan reklam geliştirici kılavuzunu incelemeniz faydalı olabilir.
İndirdiğiniz başlangıç uygulamasına Google Cast desteğinin eklenmesi gerekir. Bu codelab'de kullanılan bazı Google Cast terminolojisini aşağıda bulabilirsiniz:
- Mobil cihazda veya dizüstü bilgisayarda çalışan bir gönderen uygulaması ise
- Google Cast cihazında bir alıcı uygulaması çalışır.
Artık favori metin düzenleyicinizi kullanarak başlangıç projesinin temellerini oluşturmaya hazırsınız:
- Örnek kod indirdiğinizden
app-startdizinini seçin. js/receiver.jsve index.html dosyalarını açın.
Bu codelab'de çalışırken, seçtiğiniz web barındırma çözümünün yapılan değişikliklerle güncellenmesi gerektiğini unutmayın. Doğrulamaya ve test etmeye devam ederken değişiklikleri barındıran siteye aktardığınızdan emin olun.
Uygulama Tasarımı
Daha önce de belirtildiği gibi codelab, Yayın Oturumu başlatmak için bir gönderen uygulama ve reklam arası API'lerini kullanmak için değiştirilecek bir alıcı uygulama kullanır.
Bu codelab'de Yayınlama ve Komut Aracı, alıcı uygulamayı başlatmak için Web Göndereni görevi görecektir. Başlamak için aracı bir Chrome tarayıcıda açın. Cast SDK Developer Console'da size verilen Alıcı Uygulama Kimliği'ni girin ve gönderen uygulamasını test için yapılandırmak üzere Ayarla'yı tıklayın.
Not: Yayın simgesinin görünmediğini fark ederseniz Web Alıcısı ve yayın cihazlarının Cast Developer Console'da doğru şekilde kaydedildiğinden emin olun. Henüz yapmadıysanız yeni kaydedilen yayın cihazlarını kapatıp açın.
Alıcı uygulama, bu codelab'in ana odağıdır ve index.html içinde tanımlanmış bir ana görünüm ve js/receiver.js adlı bir JavaScript dosyasından oluşur. Bunlar aşağıda daha ayrıntılı şekilde açıklanmıştır.
index.html
Bu HTML dosyası, cast-media-player öğesi tarafından sağlanan alıcı uygulamamızın kullanıcı arayüzünü içerir. Ayrıca CAF SDK'sı ve Cast Hata Ayıklama Kaydedici kitaplıklarını da yükler.
receiver.js
Bu komut dosyası, alıcı uygulamamızın tüm mantığını yönetir. Şu anda yayınlama bağlamını başlatmak ve başlatma sonrasında bir video öğesi yüklemek için temel bir CAF alıcısı içermektedir. Yayınlama ve Komut aracına tekrar günlük kaydı sağlamak için bazı hata ayıklama günlüğü özellikleri de eklenmiştir.
6. İçeriğinize VMAP Ekleme
Cast Web Alıcı SDK'sı, VMAP olarak da bilinen Dijital Video Çok Reklamlı Oynatma Listeleri aracılığıyla belirtilen reklamlar için destek sağlar. XML yapısı, medyanın reklam aralarını ve ilişkili ara klibi meta verilerini belirtir. SDK, bu reklamları eklemek için MediaInformation nesnesinde vmapAdsRequest özelliğini sağlar.
js/receiver.js dosyasında bir VastAdsRequest nesnesi oluşturun. İstek önleyiciyi YÜKLE işlevini bulun ve aşağıdaki kodla değiştirin. DoubleClick'ten örnek bir VMAP etiket URL'si içerir ve aynı URL'ye yapılan sonraki isteklerin henüz izlenmemiş reklam araları içeren bir XML şablonu oluşturmasını sağlamak için rastgele bir correlator değeri sağlar.
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, (loadRequestData) => {
castDebugLogger.info('MyAPP.LOG', 'Intercepting LOAD request');
// Create the VMAP Ads request data and append it to the MediaInformation.
const vmapUrl =
'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=' +
Math.floor(Math.random() * Math.pow(10, 10));
let vmapRequest = new cast.framework.messages.VastAdsRequest();
vmapRequest.adTagUrl = vmapUrl;
loadRequestData.media.vmapAdsRequest = vmapRequest;
castDebugLogger.warn(
'MyAPP.LOG', 'Playable URL: ' + loadRequestData.media.contentId);
return loadRequestData;
});
js/receiver.js üzerinde yaptığınız değişiklikleri kaydedin ve dosyayı web sunucunuza yükleyin. Yayınla simgesini tıklayarak Yayın ve Komut Aracı'da bir Yayın oturumu başlatın. VMAP reklamları oynatılmalı ve ardından ana içerik yer almalıdır.
7. İçeriğinize VAST ekleme
Daha önce de belirtildiği gibi, Web Receiver SDK'sında birçok reklam türü için destek sunulmaktadır. Bu bölümde, VAST olarak da bilinen Dijital Video Reklam Sunma Şablonu reklamlarını entegre etmek için kullanılabilen API'ler vurgulanmaktadır. Önceki bölümde bulunan VMAP kodunu uyguladıysanız yorum olarak ekleyin.
Yükleme isteği müdahale aracından sonra aşağıdakileri js/receiver.js dosyanıza kopyalayın. DoubleClick'ten altı VAST ara klibi ve rastgele bir correlator değeri içerir. Bu ara klipleri, 5 araya atandı. Her aranın position değeri, ana içeriğe göre saniye cinsinden bir zamana ayarlanır. Videodan önce gösterilen reklam (position, 0 olarak ayarlandı) ve videodan sonra gösterilen reklam (position, -1 olarak ayarlandı) araları dahil.
const addVASTBreaksToMedia = (mediaInformation) => {
mediaInformation.breakClips = [
{
id: 'bc1',
title: 'bc1 (Pre-roll)',
vastAdsRequest: {
adTagUrl: generateVastUrl('preroll')
}
},
{
id: 'bc2',
title: 'bc2 (Mid-roll)',
vastAdsRequest: {
adTagUrl: generateVastUrl('midroll')
}
},
{
id: 'bc3',
title: 'bc3 (Mid-roll)',
vastAdsRequest: {
adTagUrl: generateVastUrl('midroll')
}
},
{
id: 'bc4',
title: 'bc4 (Mid-roll)',
vastAdsRequest: {
adTagUrl: generateVastUrl('midroll')
}
},
{
id: 'bc5',
title: 'bc5 (Mid-roll)',
vastAdsRequest: {
adTagUrl: generateVastUrl('midroll')
}
},
{
id: 'bc6',
title: 'bc6 (Post-roll)',
vastAdsRequest: {
adTagUrl: generateVastUrl('postroll')
}
}
];
mediaInformation.breaks = [
{id: 'b1', breakClipIds: ['bc1'], position: 0},
{id: 'b2', breakClipIds: ['bc2'], position: 15},
{id: 'b3', breakClipIds: ['bc3', 'bc4'], position: 60},
{id: 'b4', breakClipIds: ['bc5'], position: 100},
{id: 'b5', breakClipIds: ['bc6'], position: -1}
];
};
Not: Aranın breakClipIds özelliği bir dizidir. Bu, her bir araya birden fazla ara klibinin atanabileceği anlamına gelir.
js/receiver.js file dosyanızda, YÜKLE mesajı önleyiciyi bulup aşağıdaki kodla değiştirin. VMAP çalışmasının, VAST türü reklamları göstermek için yorum yaptığını unutmayın.
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, (loadRequestData) => {
castDebugLogger.info('MyAPP.LOG', 'Intercepting LOAD request');
// Create the VMAP Ads request data and append it to the MediaInformation.
// const vmapUrl =
// 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=' +
// Math.floor(Math.random() * Math.pow(10, 10));
// let vmapRequest = new cast.framework.messages.VastAdsRequest();
// vmapRequest.adTagUrl = vmapUrl;
// loadRequestData.media.vmapAdsRequest = vmapRequest;
// Append VAST ad breaks to the MediaInformation.
addVASTBreaksToMedia(loadRequestData.media);
castDebugLogger.warn(
'MyAPP.LOG', 'Playable URL: ' + loadRequestData.media.contentId);
return loadRequestData;
});
js/receiver.js üzerinde yaptığınız değişiklikleri kaydedin ve dosyayı web sunucunuza yükleyin. Yayınla simgesini tıklayarak Yayın ve Komut Aracı'da bir Yayın oturumu başlatın. VAST reklamları oynatılmalı ve ardından ana içerik izlemelidir.
8. Reklam Arası Atlama
CAF'nin BreakManager adlı bir sınıfı vardır. Bu sınıf, reklam davranışları için özel iş kuralları uygulamanıza yardımcı olur. Bu özelliklerden biri, uygulamaların bazı koşullara göre programlı olarak araları atlamasına ve klipleri kesmesine olanak tanır. Bu örnekte, konumu içeriğin ilk 30 saniyesinde olan ancak videodan sonra gösterilen reklam arasında yer almayan bir reklam arasının nasıl atlanacağı gösterilmektedir. Önceki bölümde yapılandırılan VAST reklamları kullanılırken 5 ara tanımlanmıştır: 1 videodan önce gösterilen reklam arası, 3 videonun ortasında gösterilen reklam arası (15, 60 ve 100. saniyede) ve son olarak, videodan sonra gösterilen reklam arası. Adımlar tamamlandıktan sonra, yalnızca konumu 15. saniye olan videodan önce gösterilen reklam ve videonun ortasında gösterilen reklam atlanır.
Bunun için uygulama, ara yüklemeye yönelik bir önleyici ayarlamak üzere BreakManager üzerinden kullanılabilen API'leri çağırmalıdır. Örneğe bir referans almak için aşağıdaki satırı js/receiver.js dosyanıza, context ve playerManager değişkenlerini içeren satırların arkasına kopyalayın.
const breakManager = playerManager.getBreakManager();
Uygulama, videodan sonra gösterilen reklam aralarını da göz önünde bulundurarak 30 saniyeden önce gerçekleşen reklam aralarını yoksaymak için bir kuralla bir önleyici ayarlamalıdır (position değerleri -1 olduğundan). Bu önleyici, PlayerManager üzerindeki YÜKLEME aracı gibi çalışır ancak bu, ara klipleri yüklemeye özeldir. Bunu YÜKLE isteği müdahale aracından sonra ve addVASTBreaksToMedia işlevi bildiriminden önce ayarlayın.
Aşağıdaki komutu js/receiver.js dosyasına kopyalayın.
breakManager.setBreakClipLoadInterceptor((breakClip, breakContext) => {
/**
* The code will skip playback of break clips if the break position is within
* the first 30 seconds.
*/
let breakObj = breakContext.break;
if (breakObj.position >= 0 && breakObj.position < 30) {
castDebugLogger.debug(
'MyAPP.LOG',
'Break Clip Load Interceptor skipping break with ID: ' + breakObj.id);
return null;
} else {
return breakClip;
}
});
Not: Buradan null döndürüldüğünde, BreakClip işlenmekte olan işlem atlanır. Break için tanımlanmış ara klibi yoksa ara klibi atlanır.
js/receiver.js üzerinde yaptığınız değişiklikleri kaydedin ve dosyayı web sunucunuza yükleyin. Yayınla simgesini tıklayarak Yayın ve Komut Aracı'da bir Yayın oturumu başlatın. VAST reklamları işlenmelidir. Videodan önce gösterilen reklam ve ilk videonun ortasında gösterilen reklam (position değeri 15 saniye olan) reklamların oynatılmadığını unutmayın.
9. Ara Verme Davranışını Özelleştir
Geçmiş araları ararken varsayılan uygulama, konumu arama işleminin seekFrom ve seekTo değerleri arasında olan tüm Break öğelerini elde eder. Bu aralar listesinde SDK, position değeri seekTo değerine en yakın ve isWatched özelliği false olarak ayarlanmış Break politikasını oynatır. Aranın isWatched özelliği true olarak ayarlanır ve oynatıcı mola kliplerini oynatmaya başlar. Ara izlendiğinde, ana içerik seekTo konumundan oynatmaya devam eder. Böyle bir ara yoksa ara çalınmaz ve ana içerik seekTo konumunda oynatılmaya devam eder.
Cast SDK, bir aramada oynatma sırasında hangi araların oynatılacağını özelleştirmek için BreakManager içinde setBreakSeekInterceptor API'sini sağlar. Bir uygulama, özel mantığını bu API üzerinden sağladığında, bir veya daha fazla ara üzerinde bir arama işlemi gerçekleştirildiğinde SDK bunu çağırır. Geri çağırma işlevine, seekFrom konumu ile seekTo konumu arasındaki tüm araları içeren bir nesne iletilir. Ardından, uygulamanın BreakSeekData değerini değiştirip döndürmesi gerekir.
Bu özelliğin kullanımını göstermek için aşağıdaki örnek, istenen tüm araları alıp yalnızca zaman çizelgesinde görünen araları oynatarak varsayılan davranışı geçersiz kılar.
Aşağıdaki metni js/receiver.js dosyanıza setBreakClipLoadInterceptor tanımına göre kopyalayın.
breakManager.setBreakSeekInterceptor((breakSeekData) => {
/**
* The code will play an unwatched break between the seekFrom and seekTo
* position. Note: If the position of a break is less than 30 then it will be
* skipped due to the setBreakClipLoadInterceptor code.
*/
castDebugLogger.debug(
'MyAPP.LOG',
'Break Seek Interceptor processing break ids ' +
JSON.stringify(breakSeekData.breaks.map(adBreak => adBreak.id)));
// Remove all other breaks except for the first one.
breakSeekData.breaks.splice(1,breakSeekData.breaks.length);
return breakSeekData;
});
Not: İşlev bir değer döndürmezse veya null döndürürse herhangi bir ara çalınmaz.
js/receiver.js üzerinde yaptığınız değişiklikleri kaydedin ve dosyayı web sunucunuza yükleyin. Yayınla simgesini tıklayarak Yayın ve Komut Aracı'da bir Yayın oturumu başlatın. VAST reklamları işlenmelidir. Videodan önce gösterilen reklam ve ilk videonun ortasında gösterilen reklam (position değeri 15 saniye olan) reklamların oynatılmadığını unutmayın.
Ara klibi yük engelleyici tarafından atlanan tüm araları geçmek için oynatma süresinin 30 saniyeye ulaşmasını bekleyin. Ulaşıldığında, Media Control (Medya Denetimi) sekmesine giderek bir arama komutu gönderin. Seek Into Media (Medyaya Ara) girişini 300 saniyeyle doldurup ALICI düğmesini tıklayın. Break Seek Interceptor'da yazdırılan günlükleri not edin. Aranın seekFrom zamanına yakın oynatılması için varsayılan davranış artık geçersiz kılınmalıdır.
10. Tebrikler
Artık en son Cast Alıcı SDK'sını kullanarak alıcı uygulamanıza nasıl reklam ekleyeceğinizi biliyorsunuz.
Daha ayrıntılı bilgi için Reklam Araları Geliştirici Kılavuzu'na bakın.