Tam hizmet DAI ile ayarlama

Platform seçin: HTML5 Android iOS tvOS Yayınla Roku

Bu kılavuzda, IMA CAF DAI SDK'yı kullanarak DAI akışının nasıl oynatılacağı gösterilmektedir. Tamamlanmış bir örnek entegrasyonu görüntülemek veya takip etmek istiyorsanız örneği indirin.

Bu kılavuzu kullanmadan önce Chromecast Uygulama Çerçevesi'nin Web Alıcısı protokolü hakkında bilgi edinin. Bu kılavuzda, mesaj dinleyiciler ve mediaInformation nesneleri gibi CAF alıcı kavramları hakkında temel düzeyde bilgi sahibi olduğunuz ve CAF gönderenini taklit etmek için Cast Command and Control aracını kullanmayı bildiğiniz varsayılmaktadır.

IMA DAI'yi kullanmak için Ad Manager 360 hesabınızın olması gerekir. Ad Manager Yönetici Hesabınız varsa daha fazla bilgi için hesap yöneticinizle iletişime geçin. Ad Manager'a kaydolma hakkında bilgi edinmek için Ad Manager Yardım Merkezi'ni ziyaret edin.

Diğer platformlarla entegrasyon veya IMA istemci tarafı SDK'larını kullanma hakkında bilgi edinmek için Interactive Media Ads SDK'ları bölümüne bakın.

CAF DAI'ye genel bakış

IMA CAF DAI SDK'yı kullanarak DAI'yi uygulamak, bu kılavuzda gösterildiği gibi iki ana bileşenden oluşur:

  • StreamRequest: Google'ın reklam sunucularına yönelik bir akış isteğini tanımlayan nesne. Yayın istekleri iki ana türe ayrılır:

    • LiveStreamRequest: Öğe anahtarı ve diğer isteğe bağlı parametreleri belirtir.
    • VODStreamRequest: İçerik kaynağı kimliği, video kimliği ve diğer isteğe bağlı parametreleri belirtir.
    • Her iki istek türü de isteğe bağlı olarak, belirtilen akışlara erişmek için gereken bir API anahtarı ve IMA SDK'nın reklam tanımlayıcılarını Google Ad Manager ayarlarında belirtildiği şekilde işlemesi için bir Google Ad Manager ağ kodu içerebilir.

  • StreamManager: Video akışı ile IMA DAI SDK'sı arasındaki iletişimi yöneten bir nesne. Örneğin, izleme ping'lerini tetikler ve akış etkinliklerini yayıncıya iletir.

Ön koşullar

  • Kayıtlı bir test cihazı olan Cast Developer Console hesabı.
  • Cast Developer Console'unuza kayıtlı olan ve bu kılavuzda sağlanan kodu barındıracak şekilde değiştirilebilen barındırılan bir web alıcı uygulaması.
  • Web alıcı uygulamanızı kullanacak şekilde yapılandırılmış bir gönderen uygulama. Bu örnekte, gönderen olarak Cast Command and Control aracı kullanılmaktadır.

Gönderenin MediaInfo nesnelerini yapılandırma

Öncelikle, gönderen uygulamanızın MediaInfo nesnesini aşağıdaki alanları içerecek şekilde yapılandırın:

contentId Bu medya öğesi için benzersiz bir tanımlayıcı
contentUrl DAI StreamRequest herhangi bir nedenle başarısız olursa yüklenecek yedek akış URL'si
streamType Canlı yayınlar için bu değer `LIVE` olarak ayarlanmalıdır. VOD yayınları için bu değer `BUFFERED` olarak ayarlanmalıdır.
customData assetKey Yalnızca canlı yayınlar. Yüklenecek canlı yayını tanımlar.
contentSourceId Yalnızca VOD akışları. İstenen akışı içeren medya feed'ini tanımlar.
videoId Yalnızca VOD akışları. Belirtilen medya feed'inde istenen akışı tanımlar.
networkCode (İsteğe bağlı) Google Ad Manager ağ kodunuz.
ApiKey IMA DAI SDK'sından akış URL'sini almak için gerekebilecek isteğe bağlı bir API anahtarı
senderCanSkip Alıcının, gönderen cihazın atla düğmesi gösterme özelliğine sahip olup olmadığını bilmesini sağlayan ve atlanabilir reklamlar için destek sağlayan boole değeri

Bu değerleri Cast komut ve kontrol aracında yapılandırmak için Load Media (Medya Yükle) sekmesini tıklayın ve özel yükleme isteği türünü LOAD olarak ayarlayın. Ardından, metin alanındaki JSON verilerini aşağıdaki JSON nesnelerinden biriyle değiştirin:

CANLI

{
  "media": {
    "contentId": "bbb",
    "contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
    "streamType": "LIVE",
    "customData": {
      "assetKey": "c-rArva4ShKVIAkNfy6HUQ",
      "networkCode": "21775744923",
      "ApiKey": "",
      "senderCanSkip": true
    }
  },
  "credentials": "testCredentials"
}

VOD

{
  "media": {
    "contentId": "tos",
    "contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/tos.m3u8",
    "streamType": "BUFFERED",
    "customData": {
      "contentSourceId": "2548831",
      "videoId": "tears-of-steel",
      "networkCode": "21775744923",
      "ApiKey": "",
      "senderCanSkip": true
    }
  },
  "credentials": "testCredentials"
}

Bu özel yükleme isteği nesnesi, aşağıdaki adımları test etmek için alıcıya gönderilebilir.

Temel CAF alıcısı oluşturma

CAF SDK Temel Alıcı Kılavuzu'nu uygulayarak temel bir web alıcısı oluşturun.

Alıcınızın kodu aşağıdaki gibi görünmelidir:

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    cast.framework.CastReceiverContext.getInstance().start();
  </script>
</body>
</html>

IMA DAI SDK'yı içe aktarma ve Player Manager'ı edinme

CAF için IMA DAI SDK'sını web alıcınıza aktarmak üzere CAF'yi yükleyen komut dosyasından hemen sonra bir komut dosyası etiketi ekleyin. CAF DAI SDK'sı her zaman güncel olduğundan belirli bir sürüm ayarlamanız gerekmez. Ardından, aşağıdaki komut dosyası etiketinde, alıcıyı başlatmadan önce alıcı bağlamını ve oynatıcı yöneticisini sabit olarak depolayın.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();

    castContext.start();
  </script>
</body>
</html>

IMA Stream Manager'ı başlatma

CAF DAI SDK'sının Stream Manager'ını başlatın.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    castContext.start();
  </script>
</body>
</html>

Yükleme mesajı önleyicisini oluşturma

CAF DAI SDK'sı, akış istekleri yapmak ve içerik URL'sini nihai DAI akışıyla değiştirmek için CAF yükleme mesaj yakalayıcısını kullanır. Mesaj yakalayıcı, reklam aralarını ayarlama, akış isteğinde bulunma ve mevcut contentURL öğesini değiştirme işlemlerini gerçekleştiren streamManager.requestStream() yöntemini çağırır.

Yalnızca bir yükleme mesajı yakalayıcı olabilir. Bu nedenle, uygulamanız yakalayıcının kullanılmasını gerektiriyorsa özel işlevleri aynı geri çağırmaya dahil etmeniz gerekir.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    const getStreamRequest = (request) => null;

    playerManager.setMessageInterceptor(
        cast.framework.messages.MessageType.LOAD, (request) => {
          return streamManager.requestStream(request, getStreamRequest(request))
              .then((request) => {
                this.broadcast('Stream request successful.');
                return Promise.resolve(request);
              })
              .catch((error) => {
                this.broadcast('Stream request failed.');
                return Promise.resolve(request);
              });
        });

    castContext.start();
  </script>
</body>
</html>

Akış isteğini oluşturma

CAF DAI entegrasyonunuzu tamamlamak için gönderenden gelen mediaInfo nesnesinde yer alan verileri kullanarak akış isteğinizi oluşturmanız gerekir.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    const getStreamRequest = (request) => {
      const imaRequestData = request.media.customData;
      let streamRequest = null;
      if (imaRequestData.assetKey) {
        // Live stream
        streamRequest = new google.ima.cast.dai.api.LiveStreamRequest();
        streamRequest.assetKey = imaRequestData.assetKey;
      } else if (imaRequestData.contentSourceId) {
        // VOD stream
        streamRequest = new google.ima.cast.dai.api.VODStreamRequest();
        streamRequest.contentSourceId = imaRequestData.contentSourceId;
        streamRequest.videoId = imaRequestData.videoId;
      }
      if (streamRequest && imaRequestData.networkCode) {
        streamRequest.networkCode = imaRequestData.networkCode;
      }
      if (streamRequest && imaRequestData.ApiKey) {
        streamRequest.ApiKey = imaRequestData.ApiKey;
      }
      if (streamRequest && imaRequestData.senderCanSkip) {
        streamRequest.senderCanSkip = imaRequestData.senderCanSkip;
      }
      return streamRequest;
    };

    playerManager.setMessageInterceptor(
        cast.framework.messages.MessageType.LOAD, (request) => {
          return streamManager.requestStream(request, getStreamRequest(request))
              .then((request) => {
                return Promise.resolve(request);
              })
              .catch((error) => {
                this.broadcast('Stream request failed.');
                return Promise.resolve(request);
              });
        });

    castContext.start();
  </script>
</body>
</html>

Artık Google'ın CAF DAI SDK'sı ile DAI akışları isteyebilir ve oynatabilirsiniz. Daha gelişmiş SDK özellikleri hakkında bilgi edinmek için diğer kılavuzlara göz atın veya örnek alıcı uygulamalarımızı indirin.