Как настроить IMA SDK для динамической вставки объявлений

Выберите платформу: HTML5 Android iOS tvOS Cast Roku

Выберите решение для динамической вставки объявлений

Динамическая вставка объявлений с полной поддержкой

В этом руководстве рассказывается, как воспроизвести поток с динамической вставкой объявлений, используя IMA CAF DAI SDK. Если вы хотите посмотреть или использовать готовый пример интеграции, скачайте его.

Прежде чем использовать это руководство, ознакомьтесь с протоколом веб-приемника Chromecast Application Framework. В этом руководстве предполагается, что вы знакомы с основными понятиями CAF Receiver, такими как перехватчики сообщений и объекты mediaInformation, а также с использованием инструмента управления и контроля Cast для эмуляции отправителя CAF.

Чтобы использовать IMA DAI, вам понадобится аккаунт Менеджера рекламы 360. Если у вас есть аккаунт Менеджера рекламы, обратитесь к менеджеру аккаунта. Информацию о том, как зарегистрироваться в Менеджере рекламы, можно найти в Справочном центре Менеджера рекламы.

Информацию об интеграции с другими платформами или использовании клиентских IMA SDK можно найти в разделе Interactive Media Ads SDK.

Общие сведения о динамической вставке объявлений в контенте, созданном ИИ

Реализация динамической вставки объявлений с помощью IMA CAF DAI SDK включает два основных компонента, как показано в этом руководстве:

  • StreamRequest – объект, определяющий запрос трансляции к рекламным серверам Google. Запросы потоков бывают двух основных типов:

    • LiveStreamRequest: указывает ключ объекта и другие необязательные параметры.
    • VODStreamRequest: Указывает идентификатор источника контента, идентификатор видео и другие необязательные параметры.
    • В запросах обоих типов можно указать ключ API, необходимый для доступа к определенным потокам, и код сети Google Менеджера рекламы, чтобы IMA SDK обрабатывал идентификаторы объявлений в соответствии с настройками Google Менеджера рекламы.

  • StreamManager: Объект, который обеспечивает связь между видеопотоком и IMA DAI SDK, например отправляет пинги отслеживания и пересылает издателю события потока.

Требования

  • Аккаунт Cast Developer Console с зарегистрированным тестовым устройством.
  • Размещенное веб-приложение получателя, зарегистрированное в Cast Developer Console. Его можно изменить, чтобы разместить код, приведенный в этом руководстве.
  • Отправляющее приложение, настроенное на использование вашего веб-приложения-получателя. В этом примере в качестве отправителя используется инструмент управления Cast.

Как настроить объекты MediaInfo отправителя

Сначала настройте объект MediaInfo приложения отправителя, добавив в него следующие поля:

contentId Уникальный идентификатор мультимедийного объекта.
contentUrl URL резервной трансляции, которая будет загружена, если запрос DAI StreamRequest не удастся выполнить по какой-либо причине.
streamType Для прямых трансляций следует задать значение `LIVE`, а для видео по запросу – `BUFFERED`.
customData assetKey Только трансляции. Идентификатор трансляции, которую нужно загрузить.
contentSourceId Только видео по запросу. Определяет фид медиаконтента, который содержит запрашиваемый поток.
videoId Только видео по запросу. Идентифицирует запрошенный поток в указанном фиде медиаконтента.
networkCode (Необязательно.) Код сети Google Менеджера рекламы.
ApiKey Необязательный ключ API, который может потребоваться для получения URL потока из IMA DAI SDK
senderCanSkip Логическое значение, которое позволяет получателю узнать, может ли отправляющее устройство показывать кнопку пропуска, чтобы поддерживать объявления с возможностью пропуска.

Чтобы настроить эти значения в инструменте управления командами трансляции, нажмите на вкладку Load Media (Загрузить медиаконтент) и задайте для типа специального запроса на загрузку значение LOAD. Затем замените данные JSON в текстовом поле одним из следующих объектов JSON:

Трансляция

{
  "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"
}

Видео

{
  "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"
}

Этот объект пользовательского запроса на загрузку можно отправить получателю, чтобы проверить следующие шаги.

Создание базового приемника CAF

Создайте базовый веб-приемник, следуя инструкциям из руководства по базовому приемнику CAF SDK.

Код получателя должен выглядеть следующим образом:

<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 и получите Player Manager

Добавьте тег script, чтобы импортировать IMA DAI SDK для CAF в веб-приемник сразу после загрузки скрипта CAF. CAF DAI SDK – это постоянно обновляемый SDK, поэтому вам не нужно указывать его версию. Затем в следующем теге script сохраните контекст приемника и менеджер проигрывателя в виде констант перед запуском приемника.

<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

Инициализируйте менеджер потоков CAF DAI SDK.

<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>

Как создать перехватчик сообщений о загрузке

CAF DAI SDK использует перехватчик сообщений CAF для отправки запросов трансляции и замены URL контента на конечную трансляцию DAI. Перехватчик сообщений вызывает функцию streamManager.requestStream(), которая обрабатывает рекламные паузы, запрашивает поток и заменяет существующий тег contentURL.

Может быть только один перехватчик сообщений загрузки, поэтому, если ваше приложение требует его использования, вам нужно включить все специальные функции в тот же обратный вызов.

<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>

Как создать запрос потока

Чтобы завершить интеграцию CAF DAI, вам нужно создать запрос потока, используя данные, которые были включены в объект mediaInfo от отправителя.

<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>

Теперь вы можете запрашивать и воспроизводить потоки с динамической вставкой объявлений, используя Google CAF DAI SDK. Чтобы узнать больше о расширенных функциях SDK, ознакомьтесь с другими руководствами или скачайте наши примеры приложений-приемников.