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

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

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

Полный сервис обслуживания PodAPI облачного сшивания Live API облачного сшивания VOD

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Номер проекта Google Cloud с использованием API Video Stitcher: PROJECT_NUMBER

OAuth-токен

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

OAUTH_TOKEN

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

Сетевой код

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

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

Загрузите примеры 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.

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

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

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

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

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

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

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