Wybierz rozwiązanie DAI, które Cię interesuje
Dynamiczne wstawianie reklam z pełną obsługą
Ten przewodnik pokazuje, jak odtwarzać strumień DAI przy użyciu pakietu IMA CAF DAI SDK. Jeśli chcesz wyświetlić lub śledzić gotową przykładową integrację, pobierz przykład.
Zanim skorzystasz z tego przewodnika, zapoznaj się z protokołem odbiornika internetowego platformy aplikacji Chromecast. Ten przewodnik zakłada podstawową znajomość koncepcji odbiornika CAF, takich jak interfejsy przechwytywania wiadomości i obiekty mediaInformation, a także znajomość narzędzia Cast Command and Control 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 rejestracji w usłudze Ad Manager znajdziesz w Centrum pomocy Ad Managera.
Więcej informacji o integracji z innymi platformami lub o korzystaniu z pakietów IMA SDK po stronie klienta znajdziesz w artykule Pakiety SDK Interactive Media Ads.
Omówienie CAF DAI
Wdrażanie DAI za pomocą pakietu IMA CAF DAI SDK obejmuje 2 główne komponenty, jak pokazano w tym przewodniku:
StreamRequest: Obiekt, który definiuje żądanie strumienia wysyłane do serwerów reklamowych Google. Żądania strumieniowania występują w 2 głównych odmianach:LiveStreamRequest: określa klucz pliku oraz inne opcjonalne parametry.VODStreamRequest: określa identyfikator źródła treści, identyfikator filmu oraz inne parametry opcjonalne.- Oba typy żądań mogą opcjonalnie zawierać klucz interfejsu API potrzebny do uzyskania dostępu do określonych strumieni oraz kod sieci Google Ad Managera, aby pakiet IMA SDK mógł obsługiwać identyfikatory reklam zgodnie z ustawieniami Google Ad Managera.
StreamManager: obiekt, który obsługuje komunikację między strumieniem wideo a pakietem IMA DAI SDK, np. wysyła pingi śledzące i przekazuje zdarzenia strumienia do wydawcy.
Wymagania wstępne
- Konto w Konsoli dewelopera Cast z zarejestrowanym urządzeniem testowym.
- Hostowana aplikacja odbiornika internetowego zarejestrowana w Konsoli programisty Cast, którą można zmodyfikować, aby hostować kod podany w tym przewodniku.
- Aplikacja wysyłająca skonfigurowana do korzystania z aplikacji odbiornika internetowego. W tym przykładzie jako nadawca używane jest narzędzie Cast Command and Control.
Konfigurowanie obiektów MediaInfo nadawcy
Najpierw skonfiguruj obiekt MediaInfo aplikacji wysyłającej, aby zawierał te pola:
contentId
|
Unikalny identyfikator tego elementu multimedialnego. | |
contentUrl
|
Adres URL strumienia zastępczego, który ma się wczytać, jeśli żądanie DAI StreamRequest nie powiedzie się z jakiegokolwiek powodu. | |
streamType
|
W przypadku transmisji na żywo ta wartość powinna być ustawiona na „LIVE”. W przypadku strumieni VOD ta wartość powinna być ustawiona na „BUFFERED”. | |
customData
|
assetKey
|
Tylko transmisje na żywo. Określa transmisję na żywo, która ma zostać wczytana. |
contentSourceId
|
Tylko strumienie VOD. Określa plik danych multimedialnych, który zawiera żądany strumień. | |
videoId
|
Tylko strumienie VOD. Identyfikuje żądany strumień w określonym pliku danych o mediach. | |
networkCode
|
(Opcjonalnie) Twój kod sieci Google Ad Managera. | |
ApiKey
|
Opcjonalny klucz API, który może być wymagany do pobrania adresu URL strumienia z pakietu IMA DAI SDK. | |
senderCanSkip
|
Wartość logiczna informująca odbiorcę, czy urządzenie wysyłające ma możliwość wyświetlania przycisku pomijania, co umożliwia obsługę reklam możliwych do pominięcia. | |
Aby skonfigurować te wartości w narzędziu do sterowania poleceniami przesyłania, kliknij kartę Load
Media i ustaw typ niestandardowego żądania wczytywania na LOAD. Następnie zastąp dane JSON w obszarze tekstowym jednym z tych obiektów JSON:
NA ŻYWO
{
"media": {
"contentId": "bbb",
"contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
"streamType": "LIVE",
"customData": {
"assetKey": "c-rArva4ShKVIAkNfy6HUQ",
"networkCode": "21775744923",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
VOD
{
"media": {
"contentId": "tos",
"contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/tos.m3u8",
"streamType": "BUFFERED",
"customData": {
"contentSourceId": "2548831",
"videoId": "tears-of-steel",
"networkCode": "21775744923",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
Ten niestandardowy obiekt żądania wczytania można wysłać do odbiornika, aby przetestować te kroki:
Tworzenie podstawowego odbiornika CAF
Postępując zgodnie z przewodnikiem po podstawowym odbiorniku pakietu 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>
Zaimportuj pakiet IMA DAI SDK i pobierz menedżera odtwarzacza
Dodaj tag skryptu, aby zaimportować IMA DAI SDK dla CAF do odbiornika internetowego, tuż po załadowaniu skryptu CAF. Pakiet CAF DAI SDK jest zawsze aktualny, więc nie musisz ustawiać konkretnej wersji. Następnie w tagu skryptu, który następuje po tym tagu, zapisz kontekst odbiorcy i menedżera odtwarzacza jako stałe przed uruchomieniem odbiorcy.
<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>
Inicjowanie menedżera strumieni IMA
Zainicjuj StreamManager pakietu 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>
Utwórz przechwytywacz wiadomości o obciążeniu
Pakiet CAF DAI SDK używa interfejsu przechwytującego wiadomości CAF do wysyłania żądań strumieni i zastępowania adresu URL treści końcowym strumieniem DAI.
Przechwytywacz wiadomości wywołuje funkcję streamManager.requestStream(), która obsługuje ustawianie przerw na reklamy, wysyłanie żądania strumienia i zastępowanie istniejącego strumienia.contentURL
Może być tylko jeden przechwytujący komunikat o wczytaniu, więc jeśli Twoja aplikacja wymaga użycia przechwytującego, musisz włączyć wszystkie funkcje niestandardowe do tego samego wywołania zwrotnego.
<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>
Tworzenie żądania strumienia
Aby dokończyć integrację CAF DAI, musisz utworzyć żądanie strumienia za pomocą 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.networkCode) {
streamRequest.networkCode = imaRequestData.networkCode;
}
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>
Możesz teraz wysyłać żądania strumieni DAI i je odtwarzać za pomocą pakietu CAF DAI SDK od Google. Więcej informacji o bardziej zaawansowanych funkcjach pakietu SDK znajdziesz w innych przewodnikach lub pobierając nasze przykładowe aplikacje odbiornika.