Reproduza transmissões ao vivo registradas com a API Google Cloud Video Stitcher
Este guia demonstra como usar o SDK de DAI do IMA para receptores da Web CAF para solicitar e reproduzir uma transmissão ao vivo de um evento registrado com a API Google Cloud Video Stitcher e inserir um intervalo de anúncio durante a reprodução.
Este guia expande o exemplo básico da DAI de serviço completo, adicionando suporte a streams registrados com a API Google Cloud Video Stitcher.
Verifique se o formato de streaming é compatível com os receptores da Web CAF antes de continuar.
Para informações sobre como integrar com outras plataformas ou usar os SDKs do lado do cliente do IMA, consulte SDKs do Interactive Media Ads (link em inglês).
Segundo plano
Antes de usar este guia, familiarize-se com o protocolo Receptor da Web do framework de aplicativo do Chromecast.
Para emular um remetente de CAF,
é necessário ter um nível básico de familiaridade com os conceitos de receptor de CAF,
como interceptadores
de mensagem, objetos MediaInformation
e o uso da ferramenta de comando e controle
do Cast para emular um remetente de CAF.
Componentes e arquitetura do app
A implementação da reprodução de transmissão ao vivo com a API Google Cloud Video Stitcher com o SDK de DAI do IMA CAF envolve dois componentes principais, conforme demonstrado neste guia:
VideoStitcherLiveStreamRequest
: um objeto que define uma solicitação de stream para os servidores do Google. A solicitação especifica uma instância da API Cloud Video Stitcher, um ID de configuração em tempo real e outros parâmetros opcionais.StreamManager
: um objeto que processa a comunicação entre o stream de vídeo e o SDK de DAI do IMA, como disparar pings de rastreamento e encaminhar eventos de stream para o editor.
Pré-requisitos
Você precisa das seguintes variáveis para o SDK do IMA:
Live Config ID: é o ID de configuração em tempo real que você especificou ao criar a configuração ativa da API Video Stitcher.
LIVE_CONFIG_ID
Local: a região do Google Cloud em que a configuração ao vivo foi criada.
LOCATION
Número do projeto: o número do projeto do Google Cloud que usa a API Video Stitcher.
PROJECT_NUMBER
Token OAuth: um token OAuth de curta duração de uma conta de serviço com o função do usuário de Video Stitcher. Leia mais sobre como criar credenciais de curta duração para contas de serviço.
OAUTH_TOKEN
Código de rede: o código de rede do Google Ad Manager para solicitar anúncios.
NETWORK_CODE
Chave de recurso personalizada: chave de recurso personalizada do Google Ad Manager gerada durante o processo de criação de uma configuração para um evento de transmissão ao vivo com a API Video Stitcher.
CUSTOM_ASSET_KEY
Os itens a seguir são necessários para um receptor de transmissão personalizado:
Uma conta do Console para desenvolvedores do Google Cast com dispositivos de teste em uma lista de permissões.
Um app receptor da Web hospedado, registrado no seu Play Console do Google Cast e que pode ser modificado para hospedar o código fornecido por este guia.
Um app de envio configurado para usar seu app receptor da Web. Para os fins deste exemplo, este guia usa a ferramenta de comando e controle do Cast como remetente.
Preparar um remetente para transmitir dados de stream ao receptor
Primeiro, configure o app remetente para fazer uma solicitação de carregamento ao seu receptor da Web,
contendo os seguintes campos no objeto
MediaInformation
da sua plataforma.
Campo | Conteúdo | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
contentId
|
Um identificador exclusivo para esse item de mídia, conforme definido na documentação de
referência do Google Cast. Esse ID não pode ser reutilizado para vários itens na
mesma fila de mídia.
|
||||||||||||||
contentUrl
|
URL de stream de backup opcional que será reproduzido se o stream da DAI não for carregado.
|
||||||||||||||
contentType
|
Tipo Mime opcional do URL do stream de backup a ser reproduzido se o stream da DAI não for carregado.
|
||||||||||||||
streamType
|
O literal ou a constante de string usado para esse valor varia de acordo com a plataforma do remetente.
|
||||||||||||||
customData
|
O campo
|
Aqui estão alguns exemplos de código para ajudar você a começar:
Web
Para configurar esses valores em um remetente da Web do Cast, primeiro crie um objeto
MediaInfo
com os dados necessários e depois faça uma solicitação
de carregamento ao receptor da Web.
// 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.LIVE;
mediaInfo.customData = {
liveConfigID: "LIVE_CONFIG_ID",
region: "LOCATION",
projectNumber: "PROJECT_NUMBER",
oAuthToken: "OAUTH_TOKEN",
networkCode: "NETWORK_CODE",
customAssetKey: "CUSTOM_ASSET_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
Para configurar esses valores em um remetente da Web do Cast, primeiro crie um objeto
MediaInfo
com os dados necessários e depois faça uma solicitação
de carregamento ao receptor da Web.
JSONObject customData = new JSONObject()
.put("liveConfigID", "LIVE_CONFIG_ID")
.put("region", "LOCATION")
.put("projectNumber", "PROJECT_NUMBER")
.put("oAuthToken", "OAUTH_TOKEN")
.put("networkCode", "NETWORK_CODE")
.put("customAssetKey", "CUSTOM_ASSET_KEY");
MediaInfo mediaInfo = MediaInfo.Builder("CONTENT_ID")
.setContentUrl("BACKUP_STREAM_URL")
.setContentType("BACKUP_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)
Para configurar esses valores em um remetente da Web do Cast, primeiro crie um objeto
GCKMediaInformation
com os dados necessários e depois faça uma solicitação
de carregamento ao receptor da Web.
NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
@"liveConfigID": @"LIVE_CONFIG_ID",
@"region": @"LOCATION",
@"projectNumber": @"PROJECT_NUMBER",
@"oAuthToken": @"OAUTH_TOKEN",
@"networkCode": @"NETWORK_CODE",
@"customAssetKey": @"CUSTOM_ASSET_KEY"
};
GCKMediaInformationBuilder *mediaInfoBuilder =
[[GCKMediaInformationBuilder alloc] initWithContentID: @"CONTENT_ID"];
mediaInfoBuilder.contentURL = url;
mediaInfoBuilder.contentType = @"BACKUP_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)
Para configurar esses valores em um remetente da Web do Cast, primeiro crie um objeto
GCKMediaInformation
com os dados necessários e depois faça uma solicitação
de carregamento ao receptor da Web.
let url = URL.init(string: "BACKUP_STREAM_URL")
guard let mediaURL = url else {
print("invalid mediaURL")
return
}
let customData = [
"liveConfigID": "LIVE_CONFIG_ID",
"region": "LOCATION",
"projectNumber": "PROJECT_NUMBER",
"oAuthToken": "OAUTH_TOKEN",
"networkCode": "NETWORK_CODE",
"customAssetKey": "CUSTOM_ASSET_KEY"
]
let mediaInfoBuilder = GCKMediaInformationBuilder.init(contentId: "CONTENT_ID")
mediaInfoBuilder.contentURL = mediaUrl
mediaInfoBuilder.contentType = "BACKUP_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
}
Ferramenta CAC
Para configurar esses valores na ferramenta de comando e controle do Cast, clique na guia "Carregar mídia" e defina o tipo de solicitação de carregamento personalizado como LOAD. Em seguida, substitua os dados JSON na área de texto por este JSON:
{
"media": {
"contentId": "CONTENT_ID",
"contentUrl": "BACKUP_STREAM_URL",
"contentType": "BACKUP_STREAM_MIMETYPE",
"streamType": "LIVE",
"customData": {
"liveConfigID": "LIVE_CONFIG_ID",
"region": "LOCATION",
"projectNumber": "PROJECT_NUMBER",
"oAuthToken": "OAUTH_TOKEN",
"networkCode": "NETWORK_CODE",
"customAssetKey": "CUSTOM_ASSET_KEY"
}
}
}
Essa solicitação de carregamento personalizada pode ser enviada ao destinatário para testar as outras etapas.
Criar um receptor da Web de CAF personalizado
Crie um receptor da Web personalizado conforme visto no Guia do receptor da Web personalizado do SDK CAF.
O código do seu receptor será semelhante a este:
<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>
Importar o SDK de DAI do IMA e acessar o Gerenciador de players
Adicione uma tag de script para importar o SDK de DAI do IMA para CAF para seu receptor da Web, logo após o carregamento do script CAF. Em seguida, na tag de script a seguir, armazene o contexto do destinatário e o gerenciador do player como constantes antes de iniciar o receptor.
<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>
Inicializar o Gerenciador de streams do IMA
Inicialize o Gerenciador de streams do 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>
Criar o interceptador de carga do gerenciador de streams
Antes que os itens de mídia sejam transmitidos para o CAF, crie a solicitação de stream em um interceptor de mensagens LOAD.
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 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();
Criar a solicitação de stream
Preencha a função createStreamRequest
para criar uma solicitação de transmissão ao vivo da API Video Stitcher com base na solicitação de carregamento do CAF.
/**
* Creates a livestream 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.VideoStitcherLiveStreamRequest();
const customData = castRequest.media.customData;
streamRequest.liveStreamEventId = customData.liveConfigID;
streamRequest.region = customData.region;
streamRequest.projectNumber = customData.projectNumber;
streamRequest.oAuthToken = customData.oAuthToken;
streamRequest.networkCode = customData.networkCode;
streamRequest.customAssetKey = customData.customAssetKey;
return streamRequest;
};