Wybierz rozwiązanie DAI, które Cię interesuje
Blok reklamowy z dynamicznym wstawianiem reklam
Pakiety IMA SDK upraszczają integrację reklam multimedialnych z witrynami i aplikacjami.
Pakiety IMA SDK mogą żądać reklam z dowolnego serwera reklam zgodnego z VAST i zarządzać odtwarzaniem reklam w aplikacjach.
Dzięki pakietom IMA DAI aplikacje wysyłają żądania strumienia danych z reklam i treści wideo na żądanie lub transmisji na żywo. Pakiet SDK zwraca następnie połączony strumień wideo, dzięki czemu nie musisz przełączać się między reklamą a treścią wideo w aplikacji.
Ten przewodnik pokazuje, jak odtwarzać strumień wyświetlania bloków reklamowych z funkcją dynamicznego wstawiania reklam w trakcie transmisji za pomocą pakietu IMA DAI SDK dla CAF.
Zanim zaczniesz korzystać z tego przewodnika, zapoznaj się z protokołem odbiornika internetowego Chromecasta Application Framework. Zakładamy w nim podstawową wiedzę na temat odbiorników CAF, takich jak moduły do przechwytywania wiadomości i obiekty mediaInformation, oraz umiejętność korzystania z narzędzia Cast Command and Control do emulowania nadawcy CAF.
Aby korzystać z bloków reklamowych IMA DAI, musisz współpracować z partnerem obsługującym bloki reklamowe i mieć konto Ad Managera 360 Advanced. Jeśli masz konto Ad Managera, skontaktuj się z menedżerem konta, aby uzyskać więcej informacji. Informacje o rejestrowaniu się w usłudze Ad Manager znajdziesz w Centrum pomocy Ad Managera.
Informacje o integracji z innymi platformami i korzystaniu z pakietów SDK IMA po stronie klienta znajdziesz w artykule Pakiety IMA SDK.
Omówienie wyświetlania bloków reklamowych IMA DAI
Implementacja bloków reklamowych z użyciem pakietu IMA CAF DAI SDK 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 określają kod sieci, niestandardowy klucz zasobu i opcjonalny klucz interfejsu API oraz inne opcjonalne parametry.StreamManager
: obiekt obsługujący komunikację między strumieniem wideo a pakietem IMA DAI SDK, np. wywoływanie pingów śledzenia i przekazywanie zdarzeń strumienia do wydawcy.
Wymagania wstępne
- Konto Cast Developer Console z zarejestrowanymi urządzeniami testowymi.
- Hostowaną aplikację odbiornika internetowego zarejestrowaną w Konsoli programisty Cast i którą można zmodyfikować, by 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żyj narzędzia do poleceń i kontroli przesyłania.
Skonfiguruj obiekty MediaInfo nadawcy
Najpierw skonfiguruj obiekt MediaInfo
aplikacji nadawcy tak, aby zawierał te pola:
Zaawansowana | Spis treści | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
contentId
|
Unikalny identyfikator tego elementu multimedialnego.
CONTENT_ID |
||||||||||
contentUrl
|
Opcjonalnie. URL strumienia zapasowego do odtwarzania, jeśli nie uda się wczytać strumienia z dynamicznym wstawianiem reklam.
BACKUP_STREAM_URL |
||||||||||
contentType
|
Opcjonalnie. Typ MIME strumieni zapasowych treści. Wymagane tylko w przypadku transmisji DASH.
CONTENT_STREAM_MIMETYPE |
||||||||||
streamType
|
Literał lub stała używana w przypadku tej wartości różni się w zależności od platformy nadawcy. | ||||||||||
customData
|
Pole customData zawiera magazyn par klucz-wartość oraz dodatkowe wymagane pola.
|
Oto kilka przykładów kodu, które pomogą Ci zacząć:
Web
Aby skonfigurować te wartości w ustawieniu nadawcy sieciowego Cast, najpierw utwórz obiekt MediaInfo
z wymaganymi danymi, a potem wyślij żądanie wczytania do odbiornika internetowego.
// Create mediaInfo object
const mediaInfo = new chrome.cast.media.MediaInfo("CONTENT_ID");
mediaInfo.contentUrl = "BACKUP_STREAM_URL";
mediaInfo.contentType = "CONTENT_STREAM_MIMETYPE";
mediaInfo.streamType = chrome.cast.media.StreamType.LIVE;
mediaInfo.customData = {
manifestUrl: "MANIFEST_URL",
networkCode: "NETWORK-CODE",
customAssetKey: "CUSTOM_ASSET_KEY",
apiKey: "API_KEY"
};
// Make load request to cast web receiver
const castSession = cast.framework.CastContext.getInstance().getCurrentSession();
const request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
() => { console.log('Load succeed'); },
(errorCode) => { console.log('Error code: ' + errorCode); });
Android
Aby skonfigurować te wartości w usłudze dostawcy internetowego Cast, najpierw utwórz obiekt MediaInfo z wymaganymi danymi, a potem wyślij żądanie wczytania do odbiornika internetowego.
JSONObject customData = new JSONObject()?
.put("manifestUrl", "MANIFEST_URL")
.put("networkCode", "NETWORK-CODE")
.put("customAssetKey", "CUSTOM_ASSET_KEY")
.put("apiKey", "API_KEY");
MediaInfo mediaInfo = MediaInfo.Builder("CONTENT_ID")
.setContentUrl("BACKUP_STREAM_URL")
.setContentType("CONTENT_STREAM_MIMETYPE")
.setStreamType(MediaInfo.STREAM_TYPE_LIVE)
.setCustomData(customData)
.build();
RemoteMediaClient remoteMediaClient = mCastSession.getRemoteMediaClient();
remoteMediaClient.load(new MediaLoadRequestData.Builder().setMediaInfo(mediaInfo).build());
iOS (Obj-C)
Aby skonfigurować te wartości w ustawieniu nadawcy sieciowego Cast, najpierw utwórz obiekt GCKMediaInformation
z wymaganymi danymi, a potem wyślij żądanie wczytania do odbiornika internetowego.
NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
@"manifestUrl": @"MANIFEST_URL",
@"networkCode": @"NETWORK-CODE",
@"customAssetKey": @"CUSTOM_ASSET_KEY",
@"apiKey": @"API_KEY"};
mediaInfoBuilder.customData = customData;
GCKMediaInformationBuilder *mediaInfoBuilder =
[[GCKMediaInformationBuilder alloc] initWithContentID: @"CONTENT_ID"];
mediaInfoBuilder.contentURL = url;
mediaInfoBuilder.contentType = @"CONTENT_STREAM_MIMETYPE";
mediaInfoBuilder.streamType = GCKMediaStreamTypeLive;
mediaInfoBuilder.customData = customData;
self.mediaInformation = [mediaInfoBuilder build];
GCKRequest *request = [self.sessionManager.currentSession.remoteMediaClient loadMedia:self.mediaInformation];
if (request != nil) {
request.delegate = self;
}
iOS (Swift)
Aby skonfigurować te wartości w ustawieniu nadawcy sieciowego Cast, najpierw utwórz obiekt GCKMediaInformation
z wymaganymi danymi, a potem wyślij żądanie wczytania do odbiornika internetowego.
let url = URL.init(string: "BACKUP_STREAM_URL")
guard let mediaURL = url else {
print("invalid mediaURL")
return
}
let customData = [
"liveConfigID": "MANIFEST_URL",
"networkCode": "NETWORK-CODE",
"customAssetKey": "CUSTOM_ASSET_KEY",
"region": "API_KEY"
]
let mediaInfoBuilder = GCKMediaInformationBuilder.init(contentId: "CONTENT_ID")
mediaInfoBuilder.contentURL = mediaUrl
mediaInfoBuilder.contentType = @"CONTENT_STREAM_MIMETYPE"
mediaInfoBuilder.streamType = GCKMediaStreamType.Live
mediaInfoBuilder.customData = customData
mediaInformation = mediaInfoBuilder.build()
guard let mediaInfo = mediaInformation else {
print("invalid mediaInformation")
return
}
if let request = sessionManager.currentSession?.remoteMediaClient?.loadMedia
(mediaInfo) {
request.delegate = self
}
Narzędzie CAC
Aby skonfigurować te wartości w narzędziu Cast Command i Control, kliknij kartę Load Media (Załaduj multimedia) i ustaw niestandardowy typ żądania wczytywania na LOAD. Następnie zastąp dane JSON w obszarze tekstowym tym plikiem JSON:
{
"media": {
"contentId": "CONTENT_ID",
"contentUrl": "BACKUP_STREAM_URL",
"contentType": ""CONTENT_STREAM_MIMETYPE"",
"streamType": "LIVE",
"customData": {
"liveConfigID": "MANIFEST_URL",
"networkCode": "NETWORK-CODE",
"customAssetKey": "CUSTOM_ASSET_KEY",
"oAuthToken": "API_KEY"
}
}
}
To niestandardowe żądanie obciążenia może zostać wysłane do odbiorcy w celu przetestowania pozostałych kroków.
Tworzenie podstawowego odbiornika CAF
Utwórz niestandardowy odbiornik internetowy zgodnie z opisem w przewodniku po niestandardowym odbiorniku internetowym pakietu CAF.
Kod odbiorcy powinien wyglądać tak:
<html>
<head>
<script
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
</script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
// ...
</script>
</body>
</html>
Zaimportuj pakiet IMA DAI SDK i pobierz Menedżera odtwarzacza.
Dodaj tag skryptu, aby zaimportować pakiet IMA DAI SDK dla CAF do odbiornika internetowego, tuż za skryptem ładującym CAF. Zanim uruchomisz odbiornik, zapisz w tagu skryptu w postaci stałych kontekst odbiorcy i menedżera odtwarzacza.
<html>
<head>
<script
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 strumienia IMA
Zainicjuj Menedżera strumienia IMA.
<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>
Tworzenie modułu do przechwytywania obciążenia menedżera strumienia
Zanim elementy multimedialne zostaną przekazane do CAF, utwórz żądanie strumienia w module przechwytującym ładowanie wiadomości.
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
/**
* Creates a livestream request object for a pod serving stream.
* @param {!LoadRequestData} castRequest The request object from the cast sender
* @return {StreamRequest} an IMA stream request
*/
const createStreamRequest = (castRequest) => { /* ... */};
/**
* Initates a DAI stream request for the final stream manifest.
* @param {!LoadRequestData} castRequest The request object from the cast sender
* @return {Promise<LoadRequestData>} a promise that resolves to an updated castRequest, containing the DAI stream manifest
*/
const createDAICastRequest = (castRequest) => {
return streamManager.requestStream(castRequest, createStreamRequest(castRequest))
.then((castRequestWithPodStreamData) => {
console.log('Successfully made DAI stream request.');
// ...
return castRequestWithPodStreamData;
})
.catch((error) => {
console.log('Failed to make DAI stream request.');
// CAF will automatically fallback to the content URL
// that it can read from the castRequest object.
return castRequest;
});
};
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, createDAICastRequest);
castContext.start();
Tworzenie żądania strumienia
Wykonaj działanie funkcji createStreamRequest
, aby utworzyć poda udostępniający strumień na podstawie żądania wczytania CAF.
/**
* Creates a livestream request object for a pod serving stream.
* @param {!LoadRequestData} castRequest The request object from the cast sender
* @return {StreamRequest} an IMA stream request
*/
const createStreamRequest = (castRequest) => {
const streamRequest = new google.ima.cast.dai.api.PodStreamRequest();
const customData = castRequest.media.customData;
streamRequest.customAssetKey = customData.customAssetKey;
streamRequest.networkCode = customData.networkCode;
streamRequest.apiKey = customData.apiKey;
return streamRequest;
};
Zastąp URL treści adresem URL pliku manifestu i identyfikatorem strumienia.
Jeśli żądanie strumienia zostanie zrealizowane, użyj polecenia streamManager.getStreamId()
, aby pobrać identyfikator strumienia i umieścić go w polu manifestUrl, zastępując ciąg [[STREAMID]]
. Następnie zastąp obecny element contentUrl
nowym elementem manifestUrl
, aby CAF odtwarzała transmisję na żywo w połączonych blokach reklamowych.
/**
* Initates a DAI stream request for the final stream manifest.
* @param {!LoadRequestData} castRequest The request object from the cast sender
* @return {Promise<LoadRequestData>} a promise that resolves to an updated castRequest, containing the DAI stream manifest
*/
const createDAICastRequest = (castRequest) => {
return streamManager.requestStream(castRequest, createStreamRequest(castRequest))
.then((castRequestWithPodStreamData) => {
console.log('Successfully made DAI stream request.');
const media = castRequestWithPodStreamData.media;
const manifestUrl = media.customData.manifestUrl || "";
if (manifestUrl) {
console.log('Replacing the contentURL with the manifest URL and stream ID');
const streamId = streamManager.getStreamId();
castRequestWithPodStreamData.media.contentUrl = manifestUrl.replace('[[STREAMID]]', streamId);
return castRequestWithPodStreamData;
})
.catch((error) => {
console.log('Failed to make DAI stream request.');
// CAF will automatically fallback to the content URL
// that it can read from the castRequest object.
return castRequest;
});
};
Możesz teraz wysyłać żądania i odtwarzać strumienie wyświetlania bloków reklamowych za pomocą struktury aplikacji Cast i pakietu IMA DAI SDK dla CAF.