Ta strona została przetłumaczona przez Cloud Translation API.

Wypróbuj

Z tego przewodnika dowiesz się, jak odtwarzać strumień z dynamicznym wstawianiem reklam przy użyciu pakietu IMA CAF DAI SDK. Jeśli chcesz wyświetlić gotową przykładową integrację lub śledzić jej przebieg, pobierz przykład.

Zanim skorzystasz z tego przewodnika, pamiętaj, aby zapoznać się z protokołem Web odbiornika w usłudze Chromecast Application Framework. Zakładamy w nim podstawowy poziom znajomości pojęć związanych z odbiornikami CAF, takich jak moduły do przechwytywania wiadomości i obiekty mediaInformation, a także umiejętność korzystania z narzędzia przesyłania poleceń i sterowania do emulowania nadawcy CAF.

Aby korzystać z IMA DAI, musisz mieć konto Ad Managera 360. Jeśli masz konto Ad Managera, skontaktuj się z menedżerem konta, aby dowiedzieć się więcej. Informacje o rejestrowaniu się w usłudze Ad Manager znajdziesz w Centrum pomocy Ad Managera.

Omówienie CAF DAI

Implementacja DAI za pomocą pakietu SDK IMA CAF do dynamicznego wstawiania reklam obejmuje 2 główne komponenty, które opisujemy w tym przewodniku:

StreamRequest: obiekt określający żądanie strumienia wysyłane do serwerów reklamowych Google. Żądania StreamRequest mają 2 główne odmiany:
- LiveStreamRequest: określa klucz zasobu i opcjonalny klucz interfejsu API oraz inne opcjonalne parametry.
- VODStreamRequest: określa identyfikator źródła treści, identyfikator filmu i opcjonalny klucz interfejsu API, a także inne opcjonalne parametry.
StreamManager: obiekt obsługujący komunikację między strumieniem wideo a pakietem IMA DAI SDK, np. uruchamianie pingów śledzących i przekazywania zdarzeń strumienia do wydawcy.

Wymagania wstępne

Zanim zaczniesz, będziesz mieć:

Konto w Konsoli programisty Cast na zarejestrowanym urządzeniu testowym.
Hostowana aplikacja internetowa zarejestrowana w Konsoli programisty Cast i którą można zmodyfikować, aby hostował kod podany w tym przewodniku.
Aplikacja wysyłająca skonfigurowana pod kątem korzystania z internetowej aplikacji odbierającej. Na potrzeby tego przykładu jako nadawcy użyjemy narzędzia przesyłania poleceń i sterowania.

1. Skonfiguruj obiekty MediaInfo nadawcy

Najpierw skonfiguruj obiekt MediaInfo aplikacji nadawcy tak, aby zawierał te pola:

contentId		Unikalny identyfikator tego elementu multimedialnego
contentUrl		URL zastępczego strumienia do wczytania, gdy z jakiegokolwiek powodu nie uda się zrealizować żądania StreamRequest z dynamicznym wstawianiem reklam.
streamType		W przypadku transmisji na żywo ta wartość powinna być ustawiona na „NA ŻYWO”. W przypadku strumieni VOD ta wartość powinna być ustawiona na „BUFFERED”
customData	assetKey	Tylko transmisje na żywo. Określa transmisję na żywo do wczytania
	contentSourceId	Tylko strumienie VOD. Identyfikuje kanał multimediów zawierający żądany strumień.
	videoId	Tylko strumienie VOD. Identyfikuje strumień w ramach określonego kanału multimediów.
	ApiKey	Opcjonalny klucz interfejsu API, który może być wymagany do pobierania adresu URL strumienia z pakietu IMA DAI SDK.
	senderCanSkip	Wartość logiczna informująca odbiorcy, czy urządzenie wysyłające może wyświetlić przycisk pominięcia, co umożliwia obsługę reklam możliwych do pominięcia.

Aby skonfigurować te wartości w narzędziu polecenia przesyłania i sterowania, kliknij kartę „Wczytaj multimedia” i ustaw niestandardowy typ żądania wczytania na „WCZYTAJ”. Następnie zastąp dane JSON w obszarze tekstowym jednym z tych obiektów JSON:

AKTYWNE

{
  "media": {
    "contentId": "bbb",
    "contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
    "streamType": "LIVE",
    "customData": {
      "assetKey": "sN_IYUG8STe1ZzhIIE_ksA",
      "ApiKey": "",
      "senderCanSkip": true
    }
  },
  "credentials": "testCredentials"
}

VOD

{
  "media": {
    "contentId": "tos",
    "contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/tos.m3u8",
    "streamType": "BUFFERED",
    "customData": {
      "contentSourceId": "2528370",
      "videoId": "tears-of-steel",
      "ApiKey": "",
      "senderCanSkip": true
    }
  },
  "credentials": "testCredentials"
}

Ten niestandardowy obiekt żądania obciążenia można wysłać do odbiorcy, aby przetestować każdy krok poniżej

2. Tworzenie podstawowego odbiornika CAF

Korzystając z podstawowego przewodnika dotyczącego odbiornika CAF SDK, utwórz podstawowy odbiornik internetowy.

Kod odbiorcy powinien wyglądać tak:

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    cast.framework.CastReceiverContext.getInstance().start();
  </script>
</body>
</html>

3. Zaimportuj pakiet IMA DAI SDK i pobierz Menedżera odtwarzaczy.

Dodaj tag skryptu, aby zaimportować pakiet IMA DAI SDK dla CAF do odbiornika internetowego tuż po skrypcie wczytywania CAF. Pakiet CAF DAI SDK jest zawsze aktualizowany, więc nie trzeba ustawiać konkretnej wersji. Następnie w tagu skryptu poniżej zapisz kontekst odbiornika i menedżera odtwarzacza w postaci stałych przed uruchomieniem odbiornika.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();

    castContext.start();
  </script>
</body>
</html>

4. Inicjowanie Menedżera strumienia IMA

Zainicjuj Menedżera strumienia w pakiecie CAF DAI SDK.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    castContext.start();
  </script>
</body>
</html>

5. Tworzenie modułu przechwytującego wczytanie wiadomości

Pakiet CAF DAI SDK korzysta z przechwytującego ładowanie wiadomości, by wysyłać żądania strumieni i zastępować adres URL treści ostatecznym strumieniem z dynamicznym wstawianiem reklam. Wywołuje on funkcję streamManager.requestStream(), która obsługuje ustawianie przerw na reklamy, wysyłanie żądań strumieni i zastępowanie istniejących adresów URL.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    const getStreamRequest = (request) => null;

    playerManager.setMessageInterceptor(
        cast.framework.messages.MessageType.LOAD, (request) => {
          return streamManager.requestStream(request, getStreamRequest(request))
              .then((request) => {
                this.broadcast('Stream request successful.');
                return Promise.resolve(request);
              })
              .catch((error) => {
                this.broadcast('Stream request failed.');
                return Promise.resolve(request);
              });
        });

    castContext.start();
  </script>
</body>
</html>

6. Tworzenie żądania strumienia

Aby zakończyć integrację dynamicznego wstawiania reklam (CAF), musisz utworzyć żądanie strumienia przy użyciu danych zawartych w obiekcie mediaInfo od nadawcy.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    const getStreamRequest = (request) => {
      const imaRequestData = request.media.customData;
      let streamRequest = null;
      if (imaRequestData.assetKey) {
        // Live stream
        streamRequest = new google.ima.cast.dai.api.LiveStreamRequest();
        streamRequest.assetKey = imaRequestData.assetKey;
      } else if (imaRequestData.contentSourceId) {
        // VOD stream
        streamRequest = new google.ima.cast.dai.api.VODStreamRequest();
        streamRequest.contentSourceId = imaRequestData.contentSourceId;
        streamRequest.videoId = imaRequestData.videoId;
      }
      if (streamRequest && imaRequestData.ApiKey) {
        streamRequest.ApiKey = imaRequestData.ApiKey;
      }
      if (streamRequest && imaRequestData.senderCanSkip) {
        streamRequest.senderCanSkip = imaRequestData.senderCanSkip;
      }
      return streamRequest;
    };

    playerManager.setMessageInterceptor(
        cast.framework.messages.MessageType.LOAD, (request) => {
          return streamManager.requestStream(request, getStreamRequest(request))
              .then((request) => {
                return Promise.resolve(request);
              })
              .catch((error) => {
                this.broadcast('Stream request failed.');
                return Promise.resolve(request);
              });
        });

    castContext.start();
  </script>
</body>
</html>

... i gotowe! Teraz możesz wysyłać żądania i odtwarzać strumienie z dynamicznym wstawianiem reklam za pomocą pakietu Google CAF DAI SDK. Aby dowiedzieć się więcej o bardziej zaawansowanych funkcjach pakietu SDK, przeczytaj inne przewodniki lub pobierz nasze przykładowe aplikacje odbierające.