Настройка IMA SDK для DAI

Пакеты IMA SDK упрощают интеграцию мультимедийной рекламы в ваши веб-сайты и приложения. Пакеты IMA SDK могут запрашивать рекламу с любого рекламного сервера , совместимого с VAST, и управлять её воспроизведением в ваших приложениях. С помощью пакетов IMA DAI SDK приложения запрашивают потоковое видео для рекламы и контента — как VOD, так и прямой трансляции. Затем SDK возвращает объединённый видеопоток, поэтому вам не придётся переключаться между рекламой и контентом в приложении.

Выберите интересующее вас решение DAI

Воспроизведение потоков VOD, зарегистрированных с помощью API Google Cloud Video Stitcher

В этом руководстве показано, как использовать IMA DAI SDK для HTML5 для запроса и воспроизведения сеанса потоковой передачи Google Cloud VOD .

Это руководство представляет собой расширенную версию базового примера из Руководства по началу работы с IMA DAI.

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

Чтобы просмотреть или проследить за завершенным примером интеграции, загрузите пример облачного видеосшивателя для HLS или DASH .

Настройте проект Google Cloud

Настройте проект Google Cloud и учетные записи служб для доступа к проекту .

Введите следующие переменные для использования в IMA SDK:

Расположение
Регион Google Cloud , где была создана ваша конфигурация VOD: LOCATION
Номер проекта
Номер проекта Google Cloud с использованием API Video Stitcher: PROJECT_NUMBER
OAuth-токен

Краткосрочный токен OAuth учетной записи сервиса с ролью пользователя Video Stitcher: 

OAUTH_TOKEN

Узнайте больше о создании краткосрочных токенов OAuth . Токен OAuth можно использовать повторно в нескольких запросах, пока не истёк срок его действия.

Сетевой код

Сетевой код Менеджера рекламы для запроса рекламы: NETWORK_CODE

Идентификатор конфигурации VOD

Идентификатор конфигурации VOD для потока VOD: VOD_CONFIG_ID

Подробнее о создании идентификатора конфигурации VOD читайте в руководстве по созданию конфигурации VOD в облаке .

Настройте среду разработки

В примерах приложений IMA демонстрируются только запросы потоков HLS. Вы по-прежнему можете использовать потоки DASH при создании класса VideoStitcherVodStreamRequest . При настройке плеера, совместимого с DASH, необходимо настроить прослушиватель событий воспроизведения видеоплеера, который будет передавать метаданные видео в функцию StreamManager.processMetadata() . Эта функция принимает три параметра:

  1. type : строка, которая должна быть установлена ​​на 'ID3' для потоков HLS и 'urn:google:dai:2018' для потоков DASH.

  2. data : для сообщений о событиях DASH это строка данных сообщения.

  3. timestamp : число, представляющее собой время начала сообщения о событии для потоков DASH.

Отправляйте метаданные как можно скорее и так часто, как это позволяют события вашего проигрывателя. Если метаданные отсутствуют или неверны, IMA DAI SDK может не активировать события рекламы, что приведет к некорректному отчёту о них.

Загрузите примеры IMA DAI для HTML5 и распакуйте ZIP-архив hls_js/simple в новую папку. Этот пример представляет собой веб-приложение, которое можно разместить локально для тестирования.

Чтобы разместить пример локально, перейдите в новую папку и выполните следующую команду Python для запуска веб-сервера: 

python3 -m http.server 8000

http.server доступен только в Python 3.x. Вы можете использовать любой другой веб-сервер, например, Apache HTTP Server или Node JS.

Откройте веб-браузер и перейдите по адресу localhost:8000 , чтобы увидеть видеоплеер. Ваш браузер должен поддерживать библиотеку HLS.js.

Если все работает правильно, нажатие кнопки воспроизведения на видеоплеере начнет воспроизведение короткометражного фильма «Слезы стали» с рекламными паузами каждые 30 секунд.

Запросить трансляцию VOD

Чтобы заменить образец потока на поток VOD с рекламой, используйте класс VideoStitcherVodStreamRequest для автоматического создания рекламного сеанса в Google Ad Manager. Вы можете использовать пользовательский интерфейс Google Ad Manager для поиска сгенерированных сеансов DAI для мониторинга и отладки.

В существующем примере есть функции для запроса VOD-потока или прямой трансляции. Чтобы реализовать его работу с API Google Cloud Video Stitcher, необходимо добавить новую функцию, возвращающую объект VideoStitcherVodStreamRequest .

Вот пример: 

// StreamManager which will be used to request DAI streams.
let streamManager;
...

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(
    videoElement,
    adUiElement
  );
  streamManager.addEventListener(
    [
      google.ima.dai.api.StreamEvent.Type.LOADED,
      google.ima.dai.api.StreamEvent.Type.ERROR,
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
    ],
    onStreamEvent, false);

  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  videoElement.addEventListener('pause', () => {
    playButton.style.display = "block";
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVodVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
  streamRequest.vodConfigId = 'VOD_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';

  streamManager.requestStream(streamRequest);
}

Перезагрузите страницу. После этого вы сможете запросить и воспроизвести персонализированный VOD-поток.

(Необязательно) Добавьте параметры сеанса потоковой передачи

Настройте запрос потока, добавив параметры сеанса, чтобы переопределить конфигурацию API Cloud Video Stitcher по умолчанию с помощью VideoStitcherVodStreamRequest.videoStitcherSessionOptions . Если вы укажете нераспознанный параметр, API Cloud Video Stitcher ответит ошибкой HTTP 400. Обратитесь к руководству по устранению неполадок за помощью.

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

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Уборка

Теперь, когда вы успешно разместили поток VOD с помощью API Google Cloud Video Stitcher и запросили его с помощью IMA DAI SDK для HTML5, важно очистить все обслуживающие ресурсы.

Следуйте руководству по очистке VOD , чтобы удалить все ненужные ресурсы и активы.

Наконец, в окне терминала, где вы запустили веб-сервер Python 3, используйте команду ctrl+C чтобы завершить работу локального сервера.