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

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

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

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

Полное обслуживание в формате капсульного обслуживания.API для сшивания облаков API для сшивания облаков в режиме реального времени VOD

Воспроизводите прямые трансляции, зарегистрированные через API Google Cloud Video Stitcher.

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

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

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

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

Примечание: SDK IMA DAI для HTML5 поддерживает как HLS, так и DASH-потоки, но для воспроизведения каждого из них требуется другой медиаплеер или расширение, например HLS.js или DASH.js , с различными вариантами реализации.

В этом руководстве объясняется, как настроить HLS.js и IMA DAI SDK для воспроизведения HLS-потока, а также приводятся важные замечания о различиях в реализации DASH.

В качестве отправной точки для реализации потоков DASH DAI с использованием IMA можно обратиться к примеру приложения IMA DASH.js.

Создайте проект в Google Cloud.

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

Создайте конфигурацию для прямой трансляции, используя собственный контент или тестовую прямую трансляцию . В этом руководстве предполагается использование потока HLS.

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

Расположение

Регион Google Cloud , где была создана ваша рабочая конфигурация: LOCATION

Номер проекта

Номер проекта Google Cloud, полученный с помощью API Video Stitcher: PROJECT_NUMBER

токен OAuth

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

OAUTH_TOKEN

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

Сетевой код

Сетевой код Ad Manager для запроса рекламы: NETWORK_CODE

Идентификатор конфигурации в реальном времени

Идентификатор конфигурации прямой трансляции, указанный вами при создании события прямой трансляции: LIVE_CONFIG_ID

Пользовательский ключ актива

Пользовательский ключ ресурса Ad Manager, сгенерированный в процессе создания конфигурации для прямой трансляции с использованием API Video Stitcher: CUSTOM_ASSET_KEY

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

Ключевой момент: класс IMA DAI VideoStitcherLiveStreamRequest поддерживает как HLS-потоки, так и многопериодные DASH-потоки . Рекламные паузы вставляются только между периодами DASH.

Примеры приложений IMA демонстрируют только запросы HLS-потоков. Вы по-прежнему можете использовать DASH-потоки при создании класса VideoStitcherLiveStreamRequest . При настройке 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 в новую папку. Этот пример представляет собой веб-приложение, которое вы можете разместить локально для тестирования.

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

python3 -m http.server 8000

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

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

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

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

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

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

Вот пример:

// StreamManager which will be used to request ad-enabled 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() {
  requestVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...

function requestVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
  streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';
  streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';

  streamManager.requestStream(streamRequest);
}

Для локального тестирования, если файлы прямой трансляции находятся в хранилище Cloud Storage, необходимо включить CORS для источника http://localhost:8000 .

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

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

Настройте запрос на потоковую передачу, добавив параметры сессии для переопределения конфигурации API Cloud Video Stitcher по умолчанию с помощью VideoStitcherLiveStreamRequest.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 вставляет рекламу, полученную из тега объявления, в каждый рекламный блок. Рекламные блоки обозначаются в манифесте с помощью рекламных маркеров. Рекламные маркеры вставляются кодировщиком потокового видео.

• Если вы используете собственную прямую трансляцию, вам необходимо вставить рекламный маркер. Для получения дополнительной информации о поддерживаемых рекламных маркерах HLS и DASH см. документацию по рекламным маркерам .

• Если вы создали прямую трансляцию с помощью API Google Cloud Livestream, добавьте событие канала для рекламной паузы .

Рекламный ролик воспроизводится сразу после вставки рекламной паузы.

Уборка

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

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

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