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

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

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

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

Воспроизводите потоки VOD, зарегистрированные в API Google Cloud Video Stitcher.

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

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

Для получения информации об интеграции с другими платформами или об использовании клиентских SDK IMA см. раздел «SDK для интерактивной рекламы» .

Чтобы просмотреть или проследить за завершенной интеграцией примера, загрузите пример облачного инструмента для сшивания видео в форматах 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 можно использовать повторно в нескольких запросах, пока он не истек.

Сетевой код

Сетевой код Ad Manager для запроса рекламы: 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.

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

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

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

python3 -m http.server 8000

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

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

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

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

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

В существующем примере есть функции для запроса видеопотока или прямой трансляции. Чтобы это работало с 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);
}

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

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

Настройте запрос на потоковую передачу, добавив параметры сессии для переопределения конфигурации 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);

Уборка

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

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

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