Riproduci i live streaming registrati con l'API Google Cloud Video Stitcher
Questa guida illustra come utilizzare l'SDK IMA DAI per HTML5 per richiedere e riprodurre un live streaming per un evento registrato con l'API Google Cloud Video Stitcher e come inserire un'interruzione pubblicitaria durante la riproduzione.
Questa guida si espande sull'esempio di base della Guida introduttiva per l'IMA DAI.
Per informazioni sull'integrazione con altre piattaforme o sull'utilizzo degli SDK IMA lato client, consulta gli SDK Interactive Media Ads.
Configura un progetto Google Cloud
Inserisci le seguenti variabili da utilizzare nell'SDK IMA:
- Località
- La regione Google Cloud
in cui è stata creata la configurazione live:
LOCATION
- Numero progetto
- Il numero di progetto Google Cloud utilizzando l'API Video Stitcher:
PROJECT_NUMBER
- Token OAuth
Token OAuth di breve durata di un account di servizio con il ruolo utente Strumento di stitching video:
OAUTH_TOKEN
Ulteriori informazioni sulla creazione di credenziali di breve durata per gli account di servizio. Il token OAuth può essere riutilizzato in più richieste purché non sia scaduto.
- Codice di rete
Il codice di rete Ad Manager per richiedere annunci:
NETWORK_CODE
- ID configurazione live
- L'ID configurazione dal vivo che hai specificato durante la creazione dell'evento in live streaming:
LIVE_CONFIG_ID
- Chiave asset personalizzata
- La chiave asset personalizzata di Ad Manager generata durante il processo di creazione di una
configurazione per un evento in live streaming
con l'API Video Stitcher:
CUSTOM_ASSET_KEY
Configurare un ambiente di sviluppo
Le app IMA di esempio mostrano solo richieste di streaming HLS. Puoi comunque usare gli stream DASH
durante la creazione della classe VideoStitcherLiveStreamRequest
. Quando configuri il player compatibile con DASH, devi impostare un listener per gli eventi di avanzamento del video player che possa fornire i metadati del video a StreamManager.processMetadata()
.
Questa funzione richiede tre parametri:
type
: una stringa che deve essere impostata su'ID3'
per gli stream HLS e su'urn:google:dai:2018'
per gli stream DASH.data
: per i messaggi di evento DASH, si tratta della stringa di dati del messaggio.timestamp
: un numero che indica l'ora di inizio del messaggio di evento per gli stream DASH.
Invia i metadati non appena e con la frequenza che gli eventi del player possono offrire. Se i metadati mancano o non sono corretti, l'SDK IMA DAI potrebbe non attivare gli eventi annuncio, causando la segnalazione errata degli eventi relativi agli annunci.
Scarica gli esempi di DAI IMA per HTML5 ed estrai l'esempio semplice HLS.js in una nuova cartella. Questo esempio è un'app web che puoi ospitare localmente a scopo di test.
Per ospitare l'esempio in locale, vai alla nuova cartella ed esegui questo comando Python per avviare un server web:
python3 -m http.server 8000
http.server
è disponibile solo in Python 3.x. Puoi usare qualsiasi altro server web,
ad esempio Apache HTTP Server o Node JS.
Apri un browser web e vai su localhost:8000
per guardare un video player.
Il tuo browser deve supportare la libreria HLS.js.
Se tutto funziona correttamente, facendo clic sul pulsante di riproduzione sul video player viene avviato il cortometraggio "Tears of Steel" dopo un breve annuncio. Questi contenuti vengono pubblicati utilizzando uno stream video on demand (VOD).
Richiedi un live streaming
Per sostituire lo stream VOD di esempio con il live streaming, utilizza la classe VideoStitcherLiveStreamRequest
che crea automaticamente una sessione pubblicitaria con Google Ad Manager. Puoi
utilizzare l'interfaccia utente di Google Ad Manager per individuare le sessioni DAI generate per il monitoraggio e il debug.
Nell'esempio esistente, sono disponibili funzioni per richiedere uno streaming VOD o
un live streaming. Affinché funzioni con l'API Google Cloud Video Stitcher, devi aggiungere una nuova funzione per restituire un oggetto VideoStitcherLiveStreamRequest
.
Ecco un esempio:
// StreamManager which will be used to request ad-enabled streams.
let streamManager;
...
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(
videoElement,
adUiElement
);
streamManager.addEventListener(
[
google.ima.dai.api.StreamEvent.Type.LOADED,
google.ima.dai.api.StreamEvent.Type.ERROR,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
],
onStreamEvent, false);
hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
if (streamManager && data) {
// For each ID3 tag in our metadata, we pass in the type - ID3, the
// tag data (a byte array), and the presentation timestamp (PTS).
data.samples.forEach(function(sample) {
streamManager.processMetadata('ID3', sample.data, sample.pts);
});
}
});
videoElement.addEventListener('pause', () => {
playButton.style.display = 'block';
});
playButton.addEventListener('click', initiatePlayback);
}
function initiatePlayback() {
requestVideoStitcherStream();
playButton.style.display = "none";
playButton.removeEventListener('click', initiatePlayback);
playButton.addEventListener('click', resumePlayback);
}
...
function requestVideoStitcherStream() {
const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
streamRequest.region = 'LOCATION';
streamRequest.projectNumber = 'PROJECT_NUMBER';
streamRequest.oAuthToken = 'OAUTH_TOKEN';
streamRequest.networkCode = 'NETWORK_CODE';
streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';
streamManager.requestStream(streamRequest);
}
Per i test locali, se i file in live streaming si trovano in un bucket Cloud Storage, devi abilitare CORS per l'origine http://localhost:8000
.
Ricarica la pagina. Quindi, potrai richiedere e riprodurre live streaming personalizzati.
(Facoltativo) Aggiungere opzioni per la sessione di streaming
Personalizza la richiesta di streaming aggiungendo opzioni di sessione per eseguire l'override della configurazione predefinita dell'API Cloud Video Stitcher utilizzando VideoStitcherLiveStreamRequest.videoStitcherSessionOptions
.
Se fornisci un'opzione non riconosciuta, l'API Cloud Video Stitcher risponderà con un errore HTTP 400. Per assistenza, consulta la guida alla risoluzione dei problemi.
Ad esempio, puoi eseguire l'override delle opzioni del file manifest con il seguente snippet di codice, che richiede due manifest dello stream con interpretazioni ordinate dalla velocità in bit più bassa a quella più alta.
...
streamRequest.videoStitcherSessionOptions = {
"manifestOptions": {
"includeRenditions": [
{"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
{"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
],
"bitrateOrder": "ascending"
}
};
streamManager.requestStream(streamRequest);
Inserisci un'interruzione pubblicitaria
L'API Google Cloud Video Stitcher inserisce gli annunci recuperati dal tag annuncio per ogni interruzione pubblicitaria. Le interruzioni pubblicitarie sono indicate nel manifest mediante indicatori di annunci. Gli indicatori degli annunci vengono inseriti dal codificatore del live streaming.
Se stai utilizzando il tuo live streaming, devi inserire l'indicatore dell'annuncio. Per ulteriori informazioni sugli indicatori di annunci HLS e DASH supportati, consulta la documentazione relativa agli indicatori di annuncio.
Se hai creato un live streaming utilizzando l'API Google Cloud Livestream, inserisci un evento di canale di interruzione pubblicitaria.
L'annuncio viene riprodotto immediatamente dopo l'inserimento dell'interruzione pubblicitaria.
Esegui la pulizia
Ora che hai ospitato un live streaming utilizzando l'API Google Cloud Video Stitcher e lo hai richiesto utilizzando l'SDK IMA DAI per HTML5, è importante ripulire tutte le risorse di pubblicazione.
Segui la guida alla pulizia dei live streaming per rimuovere risorse e asset non necessari.
Infine, nella finestra del terminale in cui hai avviato il server web Python 3, utilizza il comando ctrl+C
per terminare il server locale.