Seleziona la soluzione DAI che ti interessa
DAI servizio completo
Questa guida illustra come riprodurre uno stream DAI con 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 acquisire familiarità con il protocollo del ricevitore web di
Chromecast Application Framework. Questa guida presuppone un livello base di familiarità con i concetti di ricevitore CAF, ad esempio gli intercettatori di messaggi e gli oggetti mediaInformation
, nonché con l'utilizzo dello strumento Comando e controllo Cast per emulare un mittente CAF.
Per utilizzare l'IMA DAI, devi avere un account Ad Manager 360. Se disponi di un account Ad Manager, contatta il tuo account manager per ulteriori dettagli. Per informazioni sulla registrazione ad Ad Manager, visita il Centro assistenza Ad Manager.
Per informazioni sull'integrazione con altre piattaforme o sull'utilizzo degli SDK IMA lato client, consulta gli SDK Interactive Media Ads.
Panoramica del DAI CAF
L'implementazione del DAI utilizzando l'SDK IMA CAF DAI prevede due componenti principali, come illustrato in questa guida:
StreamRequest
: un oggetto che definisce una richiesta di flusso ai server pubblicitari di Google. Le richieste di stream possono essere di due tipi principali:LiveStreamRequest
: specifica una chiave asset, una chiave API facoltativa, nonché altri parametri facoltativi.VODStreamRequest
: specifica un ID origine di contenuto, un ID video, una chiave API facoltativa, nonché altri parametri facoltativi.
StreamManager
: un oggetto che gestisce la comunicazione tra lo stream video e l'SDK IMA DAI, ad esempio l'attivazione dei ping di monitoraggio e l'inoltro degli eventi di streaming al publisher.
Prerequisiti
- Un account della Console per gli sviluppatori di Google Cast con un dispositivo di test registrato.
- Un'app di ricezione web ospitata che viene registrata sulla tua Console per gli sviluppatori di Google Cast e che può essere modificata per ospitare il codice fornito in questa guida.
- Un'app di invio configurata per utilizzare l'app del ricevitore web. In questo esempio viene usato lo strumento Comando e controllo di trasmissione come mittente.
configura gli oggetti MediaInfo del mittente
Innanzitutto, configura l'oggetto MediaInfo dell'app del mittente in modo da includere i seguenti campi:
contentId
|
Un identificatore univoco per questo elemento multimediale | |
contentUrl
|
L'URL dello stream di riserva da caricare se la richiesta di streaming DAI non va a buon fine per qualsiasi motivo | |
streamType
|
Per i live streaming questo valore deve essere impostato su "LIVE". Per gli stream VOD, questo valore deve essere impostato su "BUFFERED". | |
customData
|
assetKey
|
Solo live streaming. Identifica il live streaming da caricare |
contentSourceId
|
Solo stream VOD. Identifica il feed multimediale che contiene 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 necessaria per recuperare l'URL dello stream dall'SDK IMA DAI | |
senderCanSkip
|
Un valore booleano che indica al destinatario se il dispositivo di invio ha la possibilità di visualizzare un pulsante Salta, che consente il supporto degli annunci ignorabili |
Per configurare questi valori nello strumento di comando e controllo Cast, fai clic sulla scheda Carica elementi multimediali 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 carico personalizzato può essere inviato al destinatario per testare i seguenti passaggi.
Crea un ricevitore CAF di base
Segui la guida per il ricevitore dell'SDK CAF di base, crea un ricevitore web di base.
Il codice del destinatario dovrebbe avere l'aspetto seguente:
<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 IMA DAI e scarica Player Manager
Aggiungi un tag script per importare l'SDK IMA DAI per CAF nel ricevitore web, subito dopo il caricamento dello script CAF. L'SDK DAI CAF è evergreen, quindi non è necessario impostare una versione specifica. Quindi, nel tag script che segue, memorizza il contesto del ricevitore e il gestore del player 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 il Gestore stream dell'SDK DAI CAF.
<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'intercettore
di messaggi di caricamento CAF per effettuare richieste di streaming e sostituire l'URL dei contenuti con lo streaming DAI finale.
L'intercettatore di messaggi chiama streamManager.requestStream() che gestisce
l'impostazione delle interruzioni pubblicitarie, la richiesta dello stream e la sostituzione del
contentURL
esistente.
Può esserci un solo intercettatore dei messaggi di caricamento, quindi se la tua app richiede l'utilizzo dell'intercettatore, devi incorporare tutte le 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 flusso
Per completare l'integrazione del DAI CAF, devi creare la richiesta di
streaming
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à avanzate dell'SDK, consulta le altre guide o scarica le nostre applicazioni di ricezione di esempio.