Seleziona la soluzione DAI che ti interessa
DAI con servizio completo
Questa guida mostra come riprodurre uno stream DAI utilizzando l'SDK IMA CAF DAI. Se vuoi visualizzare o seguire un'integrazione di esempio completata, scarica l'esempio.
Prima di utilizzare questa guida, assicurati di conoscere il protocollo Web Receiver di Chromecast Application Framework. Questa
guida presuppone una conoscenza di base dei concetti relativi ai ricevitori CAF, come
gli intercettatori di messaggi
e gli oggetti
mediaInformation
, nonché la conoscenza dell'utilizzo dello strumento di controllo e comandi di trasmissione per emulare un mittente CAF.
Per utilizzare IMA DAI, devi disporre di un account Ad Manager 360. Se hai un account Ad Manager, contatta il tuo account manager per ulteriori dettagli. Per informazioni su come registrarti ad Ad Manager, visita il Centro assistenza Ad Manager.
Per informazioni sull'integrazione con altre piattaforme o sull'utilizzo degli SDK lato client IMA, consulta SDK Interactive Media Ads.
Panoramica del DAI CAF
L'implementazione dell'inserimento di annunci dinamici utilizzando l'SDK IMA CAF DAI prevede due componenti principali, come dimostrato in questa guida:
StreamRequest
: un oggetto che definisce una richiesta di stream ai server pubblicitari di Google. Le richieste di stream sono di due tipi principali:LiveStreamRequest
: specifica una chiave asset e una chiave API facoltativa, nonché altri parametri facoltativi.VODStreamRequest
: specifica un ID fonte di contenuti, un ID video e un'chiave API facoltativa, oltre ad altri parametri facoltativi.
StreamManager
: un oggetto che gestisce la comunicazione tra lo stream video e l'SDK IMA DAI, ad esempio l'invio di ping di monitoraggio e l'inoltro di eventi stream al publisher.
Prerequisiti
- Un account Cast Developer Console con un dispositivo di test registrato.
- Un'app di ricezione web ospitata registrata nella tua Cast Developer Console e che può essere modificata per ospitare il codice fornito da questa guida.
- Un'app di invio configurata per utilizzare l'app di ricezione web. In questo esempio viene utilizzato lo strumento di controllo e comando di trasmissione come mittente.
Configura gli oggetti MediaInfo del mittente
Innanzitutto, configura l'oggetto MediaInfo dell'app mittente in modo da includere i seguenti campi:
contentId
|
Un identificatore univoco per questo elemento multimediale | |
contentUrl
|
L'URL di stream di riserva da caricare se la richiesta StreamRequest DAI non va a buon fine per qualsiasi motivo | |
streamType
|
Per i live streaming, questo valore deve essere impostato su "LIVE". Per gli streaming VOD, deve essere impostato su "BUFFERED" | |
customData
|
assetKey
|
Solo live streaming. Identifica il live streaming da caricare |
contentSourceId
|
Solo stream VOD. Identifica il feed multimediale contenente lo stream richiesto. | |
videoId
|
Solo stream VOD. Identifica lo stream richiesto all'interno del feed multimediale specificato. | |
ApiKey
|
Una chiave API facoltativa che può essere richiesta per recuperare l'URL stream dall'SDK DAI IMA | |
senderCanSkip
|
Un valore booleano per comunicare al destinatario se il dispositivo di invio ha la possibilità di visualizzare un pulsante per saltare l'annuncio, attivando il supporto degli annunci ignorabili |
Per configurare questi valori nello strumento di controllo e comando della trasmissione, fai clic sulla scheda Carica media e imposta il tipo di richiesta di caricamento personalizzato su LOAD
. Quindi, sostituisci i
dati JSON nell'area di testo con uno dei seguenti oggetti JSON:
IN DIRETTA
{
"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": "2548831",
"videoId": "tears-of-steel",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
Questo oggetto di richiesta di caricamento personalizzato può essere inviato al destinatario per testare i passaggi seguenti.
Creare un ricevitore CAF di base
Segui la Guida del ricevitore di base dell'SDK CAF per creare un ricevitore web di base.
Il codice del destinatario dovrebbe avere il seguente aspetto:
<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>
Importa l'SDK DAI IMA e ottieni il gestore dei player
Aggiungi un tag script per importare l'SDK DAI IMA per i file CAF nel tuo ricevitore web, subito dopo il caricamento del file CAF da parte dello script. L'SDK DAI CAF è permanente, pertanto non è necessario impostare una versione specifica. Poi, nel tag script che segue, memorizza il contesto del ricevitore e il gestore dei giocatori come costanti prima di avviare il ricevitore.
<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>
Inizializza IMA Stream Manager
Inizializza Stream Manager dell'SDK CAF DAI.
<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>
Crea l'intercettatore dei messaggi di caricamento
L'SDK DAI CAF utilizza l'intercettatore di messaggi
di caricamento
del CAF per effettuare richieste di stream e sostituire l'URL dei contenuti con lo stream DAI finale.
L'intercettatore di messaggi chiama streamManager.requestStream(), che gestisce la configurazione delle interruzioni pubblicitarie, la richiesta dello stream e la sostituzione dell'contentURL
esistente.
Può esserci un solo intercettatore di messaggi di caricamento, quindi se la tua app richiede l'utilizzo dell'intercettatore, devi incorporare eventuali funzioni personalizzate nello stesso callback.
<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>
Crea la richiesta di streaming
Per completare l'integrazione del DAI CAF, devi creare la richiesta
di stream
utilizzando i dati inclusi nell'oggetto mediaInfo
del mittente.
<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>
Ora puoi richiedere e riprodurre stream DAI con l'SDK CAF DAI di Google. Per scoprire di più sulle funzionalità dell'SDK più avanzate, consulta le altre guide o scarica le nostre applicazioni di ricezione di esempio.