Lire des flux VOD enregistrés avec l'API Google Cloud Video Stitcher
Ce guide explique comment utiliser le SDK IMA DAI pour les récepteurs Web CAF afin de demander et de lire une session de streaming VOD Google Cloud.
Ce guide complète l'exemple de base de la publicité in-stream avec service complet en ajoutant la prise en charge des flux enregistrés avec l'API Google Cloud Video Stitcher.
Avant de continuer, vérifiez que votre format de streaming est compatible avec les récepteurs Web CAF.
Pour en savoir plus sur l'intégration à d'autres plates-formes ou sur l'utilisation du SDK IMA pour les SDK côté client, consultez la page SDK Interactive Media Ads.
Contexte
Avant d'utiliser ce guide, familiarisez-vous avec les Récepteur Web du framework d'application Chromecast standard.
Ce guide suppose que vous maîtrisez les concepts de base des récepteurs CAF,
tel que message
les intercepteurs,
MediaInformation
objets, et à l'aide de la commande et du contrôle Cast
pour émuler un expéditeur CAF.
Composants et architecture de l'application
L'implémentation de la lecture de flux VOD avec l'API Google Cloud Video Stitcher avec le SDK IMA CAF DAI implique deux composants principaux, comme indiqué dans ce guide :
VideoStitcherVodStreamRequest
: objet qui définit une requête de flux vers les serveurs de Google.StreamManager
: objet qui gère la communication entre le flux vidéo et le SDK IMA DAI, par exemple en déclenchant des pings de suivi et en transmettant des événements de flux à l'éditeur.
Configurer un projet Google Cloud
Saisissez les variables suivantes à utiliser dans le SDK IMA :
Emplacement : région Google Cloud dans laquelle votre configuration VOD a été créée.
LOCATION
Project Number (Numéro du projet) : numéro du projet Google Cloud utilisé par l'assembleur vidéo API.
PROJECT_NUMBER
Jeton OAuth : jeton OAuth de courte durée d'un compte de service avec le rôle utilisateur "Monteur vidéo". Découvrez comment créer des identifiants éphémères pour des comptes de service.
OAUTH_TOKEN
Network Code : code de réseau Google Ad Manager pour demander des annonces.
NETWORK_CODE
URL du tag d'emplacement publicitaire : URL Ad Manager du tag d'emplacement publicitaire. Pour effectuer des tests, vous pouvez utiliser la méthode Exemple d'annonce vidéo pré-roll VMAP IMA.
AD_TAG_URI
URL de la source du contenu : chaîne de l'URL du fichier manifeste du flux de votre vidéo à la demande. contenus.
VOD_URI
Configurer un récepteur de cast personnalisé
Pour développer un récepteur de cast personnalisé, vous avez besoin des éléments suivants:
Un compte Console de développement Cast avec d'appareils de test figurant dans une liste d'autorisation.
Une application de récepteur Web hébergée enregistrée dans votre console développeur Cast et pouvant être modifiée pour héberger le code fourni dans ce guide.
Une application d'envoi configurée pour utiliser votre application réceptrice Web. Aux fins de Dans cet exemple, ce guide utilise la commande et le contrôle Cast en tant qu'expéditeur.
Préparer un expéditeur à transmettre des données de flux au destinataire
Commencez par configurer votre application d'envoi pour qu'elle envoie une requête de chargement à votre récepteur Web, contenant les champs suivants dans l'objet MediaInformation
de votre plate-forme.
Champ | Sommaire | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
contentId
|
Un identifiant unique pour cet élément multimédia, tel que défini dans l'accord de diffusion
documentation de référence. Cet ID ne doit pas être réutilisé pour plusieurs éléments de la même file d'attente multimédia.
|
||||||||||||||
contentUrl
|
URL du flux de sauvegarde facultatif à lire si le flux DAI ne parvient pas à se charger.
|
||||||||||||||
contentType
|
Type MIME facultatif de l'URL du flux secondaire à lire si le flux d'insertion dynamique d'annonce
lors du chargement.
|
||||||||||||||
streamType
|
Le littéral de chaîne ou la constante utilisés pour cette valeur varie selon l'expéditeur
Google Cloud.
|
||||||||||||||
customData
|
Le champ
|
Voici quelques exemples de code pour vous aider à démarrer:
Web
Pour configurer ces valeurs dans un expéditeur Web Cast, créez d'abord un
MediaInfo
avec les données requises, puis effectuez un chargement
Cloud SQL au Web receiver.
// Create mediaInfo object
const mediaInfo = new chrome.cast.media.MediaInfo("CONTENT_ID");
mediaInfo.contentUrl = "BACKUP_STREAM_URL";
mediaInfo.contentType = "BACKUP_STREAM_MIMETYPE";
mediaInfo.streamType = chrome.cast.media.StreamType.VOD;
mediaInfo.customData = {
region: "LOCATION",
projectNumber: "PROJECT_NUMBER",
oAuthToken: "OAUTH_TOKEN",
networkCode: "NETWORK_CODE",
adTagUrl: "AD_TAG_URI"
contentSourceUrl: "VOD_URI"
};
// 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
Pour configurer ces valeurs dans un expéditeur Web Cast, créez d'abord un
Objet MediaInfo
avec les données requises, puis effectuez un chargement
Cloud SQL au Web receiver.
JSONObject customData = new JSONObject()
.put("region", "LOCATION")
.put("projectNumber", "PROJECT_NUMBER")
.put("oAuthToken", "OAUTH_TOKEN")
.put("networkCode", "NETWORK_CODE")
.put("adTagUrl", "AD_TAG_URI")
.put("contentSourceUrl", "VOD_URI");
MediaInfo mediaInfo = MediaInfo.Builder("CONTENT_ID")
.setContentUrl("BACKUP_STREAM_URL")
.setContentType("BACKUP_STREAM_MIMETYPE")
.setStreamType(MediaInfo.STREAM_TYPE_VOD)
.setCustomData(customData)
.build();
RemoteMediaClient remoteMediaClient = mCastSession.getRemoteMediaClient();
remoteMediaClient.load(new MediaLoadRequestData.Builder().setMediaInfo(mediaInfo).build());
iOS (Obj-C)
Pour configurer ces valeurs dans un expéditeur Web Cast, créez d'abord un
GCKMediaInformation
avec les données requises, puis effectuez un chargement
de requête au Web receiver.
NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
@"region": @"LOCATION",
@"projectNumber": @"PROJECT_NUMBER",
@"oAuthToken": @"OAUTH_TOKEN",
@"networkCode": @"NETWORK_CODE",
@"adTagUrl": @"AD_TAG_URI",
@"contentSourceUrl": @"VOD_URI"
};
GCKMediaInformationBuilder *mediaInfoBuilder =
[[GCKMediaInformationBuilder alloc] initWithContentID: @"CONTENT_ID"];
mediaInfoBuilder.contentURL = url;
mediaInfoBuilder.contentType = @"BACKUP_STREAM_MIMETYPE";
mediaInfoBuilder.streamType = GCKMediaStreamTypeNone;
mediaInfoBuilder.customData = customData;
self.mediaInformation = [mediaInfoBuilder build];
GCKRequest *request = [self.sessionManager.currentSession.remoteMediaClient loadMedia:self.mediaInformation];
if (request != nil) {
request.delegate = self;
}
iOS (Swift)
Pour configurer ces valeurs dans un émetteur Web Cast, créez d'abord un objet GCKMediaInformation
avec les données requises, puis envoyez une requête de chargement au récepteur Web.
let url = URL.init(string: "BACKUP_STREAM_URL")
guard let mediaURL = url else {
print("invalid mediaURL")
return
}
let customData = [
"region": "LOCATION",
"projectNumber": "PROJECT_NUMBER",
"oAuthToken": "OAUTH_TOKEN",
"networkCode": "NETWORK_CODE",
"adTagUrl": "AD_TAG_URI",
"contentSourceUrl": "VOD_URI"
]
let mediaInfoBuilder = GCKMediaInformationBuilder.init(contentId: "CONTENT_ID")
mediaInfoBuilder.contentURL = mediaUrl
mediaInfoBuilder.contentType = "BACKUP_STREAM_MIMETYPE"
mediaInfoBuilder.streamType = GCKMediaStreamType.none
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
}
Outil CAC
Pour configurer ces valeurs dans l'outil de commande et de contrôle de la diffusion, cliquez sur l'onglet "Charger des contenus multimédias", puis définissez le type de requête de chargement personnalisé sur LOAD. Remplacez ensuite les données JSON dans la zone de texte par ce code JSON :
{
"media": {
"contentId": "CONTENT_ID",
"contentUrl": "BACKUP_STREAM_URL",
"contentType": "BACKUP_STREAM_MIMETYPE",
"streamType": "VOD",
"customData": {
"region": "LOCATION",
"projectNumber": "PROJECT_NUMBER",
"oAuthToken": "OAUTH_TOKEN",
"networkCode": "NETWORK_CODE",
"adTagUrl": "AD_TAG_URI",
"contentSourceUrl": "VOD_URI"
}
}
}
Cette requête de charge personnalisée peut être envoyée au destinataire pour tester le reste des étapes.
Créer un récepteur Web CAF personnalisé
Créez un récepteur Web personnalisé, comme illustré dans le récepteur Web personnalisé du SDK CAF Guide de démarrage.
Le code du récepteur doit se présenter comme suit:
<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>
const castContext = cast.framework.CastReceiverContext.getInstance()
castContext.start();
</script>
</body>
</html>
Importer le SDK IMA DAI et obtenir le Player Manager
Ajoutez une balise de script pour importer le SDK IMA DAI pour CAF dans votre récepteur Web, juste après le chargement du script CAF. Ensuite, dans le tag de script qui suit, stockez le le contexte du récepteur et le gestionnaire de joueurs comme constantes avant de le démarrer.
<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>
Initialiser le gestionnaire de flux IMA
Initialisez le gestionnaire de flux 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>
Créer l'intercepteur de charge du gestionnaire de flux
Avant que vos éléments multimédias ne soient transmis au CAF, créez votre demande de flux dans un CHARGER le message intercepteur.
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
/**
* Creates a VOD stream request object for the Video Stitcher API.
* @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((castRequestWithStreamData) => {
console.log('Successfully made DAI stream request.');
return castRequestWithStreamData;
})
.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();
Créer la demande de flux
Exécuter la fonction createStreamRequest
pour créer une vidéo à la demande de l'API Video Stitcher
en fonction de la requête de chargement CAF.
/**
* Creates a VOD stream request object for the Video Stitcher API.
* @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.VideoStitcherVodStreamRequest();
const customData = castRequest.media.customData;
streamRequest.region = customData.region;
streamRequest.projectNumber = customData.projectNumber;
streamRequest.oAuthToken = customData.oAuthToken;
streamRequest.networkCode = customData.networkCode;
streamRequest.adTagUrl = customData.adTagUrl;
streamRequest.contentSourceUrl = customData.contentSourceUrl;
return streamRequest;
};