Para ativar a API Video Stitcher no seu projeto, entre em contato com seu representante de conta ou com o departamento de vendas para saber mais.

Esta página foi traduzida pela API Cloud Translation.

Usar o SDK de DAI do IMA no Chromecast

Reproduzir transmissões de VOD registradas com a API Video Stitcher do Google Cloud

Este guia demonstra como usar o SDK de DAI do IMA para receptores da Web CAF com o objetivo de e reproduzir uma sessão de stream VOD do Google Cloud.

Este guia expande o exemplo básico da DAI de serviço completo, adicionando suporte para 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 a integração com outras plataformas ou o uso dos SDKs do lado do cliente do IMA, consulte SDKs do Interactive Media Ads.

Contexto

Antes de usar este guia, você precisa conhecer Receptor da Web do framework de aplicativos do Chromecast protocolo.

Este guia pressupõe um nível básico de familiaridade com os conceitos do receptor do CAF, como interceptors de mensagens, objetos MediaInformation e o uso da ferramenta de comando e controle do Google Cast para emular um remetente do CAF.

Componentes e arquitetura do app

Implementar a reprodução de stream de VOD com a API Google Cloud Video Stitcher com o SDK DAI do IMA envolve dois componentes principais, conforme demonstrado neste guia:

VideoStitcherVodStreamRequest: Um objeto que define uma solicitação de stream para nos servidores do Google.
StreamManager: Um objeto que gerencia a comunicação entre o stream de vídeo e a DAI do IMA do SDK, como disparar pings de acompanhamento e encaminhar eventos de stream para o editor.

Configure um projeto do Google Cloud

Insira as seguintes variáveis para uso no SDK do IMA:

Local: a região do Google Cloud onde a configuração de VOD 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 ícone Função do usuário de editor. Leia mais sobre criar credenciais de curta duração para serviços 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

URL da tag de anúncio: é o URL do Ad Manager da tag de anúncio. Para testes, você pode usar o Amostra de anúncio precedente do IMA VMAP (em inglês).

AD_TAG_URI
URL de origem do conteúdo: é a string do URL do manifesto de transmissão para seu VOD. conteúdo.

VOD_URI

Configurar um receptor de transmissão personalizado

Para desenvolver um receptor de transmissão personalizado, você precisa do seguinte:

Uma conta do Cast Developer Console com dispositivos de teste em uma lista de permissões.
Um receptor da Web hospedado app que é registrados no seu Console do desenvolvedor do Google Cast e que podem ser modificados para hospedar o código fornecido por este guia.
Um app de envio configurado para usar o app de recebimento da Web. Para fins deste exemplo, este guia usa a ferramenta de comando e controle do Google Cast como o remetente.

Preparar um remetente para transmitir dados de stream ao receptor

Primeiro, configure o app remetente para fazer uma solicitação de carregamento ao receptor da Web. que contém os seguintes campos na tabela MediaInformation objeto.

Campo Conteúdo

contentId

Um identificador exclusivo para este item de mídia, conforme definido no artigo Transmitir documentação de referência. Esse ID não pode ser reutilizado para vários itens a mesma fila de mídia.

CONTENT_ID

contentUrl

URL de stream de backup opcional que será reproduzido se o stream da DAI não for carregado.

BACKUP_STREAM_URL

contentType

Tipo MIME opcional do URL de stream de backup a ser reproduzido se o stream da DAI falha ao carregar.

BACKUP_STREAM_MIMETYPE

streamType

O literal de string ou a constante usada para esse valor varia de acordo com o remetente de plataforma.

VOD

customData

O campo customData contém um armazenamento de chave-valor de campos obrigatórios adicionais. Neste caso, customData contém o stream da DAI dados que você coletou.

Campo	Conteúdo
`region`	`LOCATION`
`projectNumber`	`PROJECT_NUMBER`
`oAuthToken`	`OAUTH_TOKEN`
`networkCode`	`NETWORK_CODE`
`adTagUrl`	`AD_TAG_URI`
`contentSourceUrl`	`VOD_URI`

Confira alguns exemplos de código para ajudar você a começar:

Web

Para configurar esses valores em um remetente da Web do Google Cast, crie primeiro um MediaInfo com os dados necessários e faça um load solicitação para o 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.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

Para configurar esses valores em um remetente da Web do Google Cast, crie primeiro um Objeto MediaInfo com os dados necessários, e depois faça um carregamento solicitação para o receptor da Web.

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 (Objective-C)

Para configurar esses valores em um transmissor da Web do Google Cast, primeiro crie um objeto GCKMediaInformation com os dados necessários e faça uma solicitação de carregamento para o receptor da Web.

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)

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
}

Ferramenta CAC

Para configurar esses valores na ferramenta de comando e controle do Google 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": "VOD",
    "customData": {
      "region": "LOCATION",
      "projectNumber": "PROJECT_NUMBER",
      "oAuthToken": "OAUTH_TOKEN",
      "networkCode": "NETWORK_CODE",
      "adTagUrl": "AD_TAG_URI",
      "contentSourceUrl": "VOD_URI"
    }
  }
}

Essa solicitação de carga personalizada pode ser enviada ao receptor para testar o restante etapas.

Criar um receptor da Web CAF personalizado

Crie um receptor da Web personalizado, conforme mostrado no artigo Receptor da Web personalizado do SDK CAF Guia.

O código do receptor vai ficar assim:

<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 player

Adicione uma tag de script para importar o SDK do IMA DAI para CAF ao seu receptor da Web, logo após o script carregar o CAF. Em seguida, na tag de script a seguir, armazene o contexto do receptor e o gerenciador de jogadores 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 seus itens de mídia sejam transmitidos ao CAF, crie sua solicitação de transmissão em um interceptador de mensagens LOAD.

    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();

Criar a solicitação de stream

Conclua a função createStreamRequest para criar uma solicitação de transmissão VOD da API Video Stitcher com base na solicitação de carregamento do 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;
    };

Android

HTML5