Konfigurowanie pakietu IMA SDK na potrzeby DAI

Pakiety IMA SDK ułatwiają integrację reklam multimedialnych z witrynami i aplikacjami. Pakiety IMA SDK mogą wysyłać żądania reklam do dowolnego serwera reklam zgodnego z VAST i zarządzać odtwarzaniem reklam w aplikacjach. Za pomocą pakietów IMA DAI SDK aplikacje wysyłają żądanie strumienia reklamy i treści wideo – VOD lub treści na żywo. Pakiet SDK zwraca wtedy połączony strumień wideo, dzięki czemu nie musisz zarządzać przełączaniem między reklamą a treściami wideo w aplikacji.

Wybierz interesujące Cię rozwiązanie DAI

Pełna obsługa Pod serving Cloud stitching API Live Cloud stitching API VOD

Odtwarzanie transmisji na żywo zarejestrowanych w interfejsie Google Cloud Video Stitcher API

Z tego przewodnika dowiesz się, jak za pomocą pakietu IMA DAI SDK dla HTML5 wysyłać żądania transmisji na żywo i odtwarzać je w przypadku wydarzenia zarejestrowanego w interfejsie Google Cloud Video Stitcher API oraz jak wstawiać przerwę na reklamę podczas odtwarzania.

Ten przewodnik rozszerza podstawowy przykład z przewodnika dla początkujących dotyczącego dynamicznego wstawiania reklam IMA.

Więcej informacji o integracji z innymi platformami lub o korzystaniu z pakietów IMA SDK po stronie klienta znajdziesz w sekcji Pakiety Interactive Media Ads SDK.

Aby wyświetlić lub śledzić ukończoną przykładową integrację, pobierz przykład Cloud Video Stitcher dla HLS lub DASH.

Uwaga: Pakiet IMA DAI SDK dla HTML5 obsługuje strumienie HLS i DASH, ale odtwarzanie każdego z nich wymaga innego odtwarzacza multimediów lub rozszerzenia, np. HLS.js lub DASH.js, z różnymi implementacjami.

Z tego przewodnika dowiesz się, jak skonfigurować HLS.js i IMA DAI SDK, aby odtwarzać strumień HLS. Znajdziesz w nim też ważne uwagi dotyczące różnic we wdrożeniu w przypadku DASH.

Aby zacząć wdrażać strumienie DAI DASH z IMA, skorzystaj z przykładowej aplikacji IMA DASH.js.

Konfigurowanie projektu Google Cloud

Skonfiguruj projekt Google Cloud i skonfiguruj konta usługi, aby uzyskać dostęp do projektu.

Utwórz konfigurację wydarzenia z transmisją na żywo za pomocą własnej transmisji na żywo lub testowej transmisji na żywo. W tym przewodniku zakładamy, że masz strumień HLS.

Wpisz te zmienne, aby używać ich w pakiecie IMA SDK:

Lokalizacja

Region Google Cloud, w którym utworzono konfigurację aktywną: LOCATION

Numer projektu

Numer projektu Google Cloud używany w interfejsie Video Stitcher API:PROJECT_NUMBER

Token OAuth

Krótkotrwały token OAuth konta usługi z rolą użytkownika Video Stitcher:

OAUTH_TOKEN

Więcej informacji o tworzeniu danych logowania o ograniczonym czasie ważności dla kont usługi Tokena OAuth można używać w wielu żądaniach, dopóki nie wygaśnie.

Kod sieci

Kod sieci Ad Managera do wysyłania żądań reklam:NETWORK_CODE

Identyfikator konfiguracji na żywo

Identyfikator konfiguracji na żywo podany podczas tworzenia wydarzenia z transmisją na żywo:LIVE_CONFIG_ID

Niestandardowy klucz pliku

Klucz zasobu niestandardowego Ad Managera wygenerowany podczas tworzenia konfiguracji wydarzenia transmitowanego na żywo za pomocą interfejsu Video Stitcher API: CUSTOM_ASSET_KEY

Konfigurowanie środowiska programistycznego

Ważne: klasa VideoStitcherLiveStreamRequest w pakiecie IMA DAI obsługuje zarówno strumienie HLS, jak i strumienie DASH z wieloma okresami. Przerwy na reklamy są wstawiane tylko między okresami DASH.

Przykładowe aplikacje IMA pokazują tylko żądania transmisji HLS. Podczas tworzenia klasy VideoStitcherLiveStreamRequest nadal możesz używać strumieni DASH. Podczas konfigurowania odtwarzacza zgodnego z DASH musisz skonfigurować odbiornik zdarzeń postępu odtwarzacza wideo, który może przekazywać metadane filmu do StreamManager.processMetadata(). Ta funkcja przyjmuje 3 parametry:

1. type: ciąg znaków, który musi mieć wartość 'ID3' w przypadku strumieni HLS i 'urn:google:dai:2018' w przypadku strumieni DASH.

2. data: w przypadku wiadomości o zdarzeniach DASH jest to ciąg danych wiadomości.

3. timestamp: liczba będąca czasem rozpoczęcia wiadomości o wydarzeniu w przypadku strumieni DASH.

Wysyłaj metadane tak szybko i tak często, jak to możliwe w przypadku zdarzeń odtwarzacza. Jeśli metadane są nieprawidłowe lub ich brakuje, pakiet IMA DAI SDK może nie wywoływać zdarzeń związanych z reklamami, co prowadzi do nieprawidłowego raportowania tych zdarzeń.

Pobierz przykłady IMA DAI dla HTML5 i wyodrębnij przykład HLS.js Simple do nowego folderu. Ten przykład to aplikacja internetowa, którą możesz hostować lokalnie na potrzeby testów.

Aby hostować przykład lokalnie, przejdź do nowego folderu i uruchom to polecenie w Pythonie, aby uruchomić serwer WWW:

python3 -m http.server 8000

http.server jest dostępny tylko w Pythonie 3.x. Możesz użyć dowolnego innego serwera WWW, np. Apache HTTP Server lub Node JS.

Otwórz przeglądarkę i wejdź na stronę localhost:8000, aby zobaczyć odtwarzacz wideo. Twoja przeglądarka musi obsługiwać bibliotekę HLS.js.

Jeśli wszystko działa prawidłowo, po kliknięciu przycisku odtwarzania w odtwarzaczu wideo po krótkiej reklamie rozpocznie się odtwarzanie krótkiego filmu „Tears of Steel”. Treści te są dostarczane za pomocą strumienia wideo na żądanie (VOD).

Prośba o transmisję na żywo

Aby zastąpić przykładowy strumień VOD strumieniem na żywo, użyj klasy VideoStitcherLiveStreamRequest , która automatycznie tworzy sesję reklamową w usłudze Google Ad Manager. W interfejsie Google Ad Managera możesz znaleźć wygenerowane sesje DAI, aby je monitorować i debugować.

W dotychczasowym przykładzie znajdują się funkcje żądania strumienia VOD lub transmisji na żywo. Aby działał z interfejsem Google Cloud Video Stitcher API, musisz dodać nową funkcję, która zwraca obiekt VideoStitcherLiveStreamRequest.

Oto przykład:

// 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);
}

W przypadku testowania lokalnego, jeśli pliki transmisji na żywo znajdują się w zasobniku Cloud Storage, musisz włączyć CORS dla pochodzenia http://localhost:8000.

Odśwież stronę. Następnie możesz poprosić o odtwarzanie niestandardowych transmisji na żywo.

(Opcjonalnie) Dodaj opcje sesji przesyłania strumieniowego

Dostosuj żądanie strumienia, dodając opcje sesji, aby zastąpić domyślną konfigurację interfejsu Cloud Video Stitcher API za pomocą VideoStitcherLiveStreamRequest.videoStitcherSessionOptions. Jeśli podasz nierozpoznaną opcję, interfejs Cloud Video Stitcher API odpowie błędem HTTP 400. Więcej informacji znajdziesz w przewodniku na temat rozwiązywania problemów.

Możesz na przykład zastąpić opcje pliku manifestu tym fragmentem kodu, który wysyła żądanie 2 plików manifestu strumienia z wersjami uporządkowanymi od najniższej do najwyższej szybkości transmisji bitów.

...

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

streamManager.requestStream(streamRequest);

Wstawianie przerwy na reklamę

Interfejs Google Cloud Video Stitcher API wstawia reklamy pobrane z tagu reklamy do każdej przerwy na reklamę. Przerwy na reklamy są oznaczane w manifeście za pomocą znaczników reklam. Znaczniki reklam są wstawiane przez koder transmisji na żywo.

• Jeśli używasz własnej transmisji na żywo, musisz wstawić znacznik reklamy. Więcej informacji o obsługiwanych znacznikach reklam HLS i DASH znajdziesz w dokumentacji znaczników reklam.

• Jeśli transmisja na żywo została utworzona za pomocą interfejsu Google Cloud Livestream API, wstaw zdarzenie kanału przerwy na reklamę.

Reklama jest odtwarzana natychmiast po wstawieniu przerwy na reklamy.

Czyszczenie danych

Po udanym hostowaniu transmisji na żywo za pomocą interfejsu Google Cloud Video Stitcher API i wysłaniu żądania za pomocą pakietu IMA DAI SDK dla HTML5 ważne jest, aby usunąć wszystkie zasoby do wyświetlania.

Postępuj zgodnie z instrukcjami usuwania niepotrzebnych zasobów i komponentów z transmisji na żywo.

Na koniec w oknie terminala, w którym uruchomiono serwer WWW w Pythonie 3, użyj polecenia ctrl+C, aby zakończyć działanie serwera lokalnego.