Configurar com a DAI de serviço completo

Selecione a plataforma: HTML5 Android iOS tvOS Cast Roku

Este guia demonstra como reproduzir um stream de DAI usando o SDK do IMA para DAI no CAF. Se você quiser ver ou acompanhar uma integração de amostra concluída, faça o download do exemplo.

Antes de usar este guia, familiarize-se com o protocolo do receptor da Web do framework de aplicativos do Chromecast. Este guia pressupõe um nível básico de familiaridade com os conceitos do receptor do CAF, como interceptadores de mensagens e objetos mediaInformation, bem como familiaridade com o uso da ferramenta de comando e controle do Cast para emular um remetente do CAF.

Para usar a DAI do IMA, é necessário ter uma conta do Ad Manager 360. Se você tiver uma conta do Ad Manager, entre em contato com seu gerente de contas para mais detalhes. Para saber como se inscrever no Ad Manager, acesse a Central de Ajuda do Ad Manager.

Para informações sobre como integrar com outras plataformas ou usar os SDKs do IMA do lado do cliente, consulte SDKs do Interactive Media Ads.

Visão geral da DAI do CAF

A implementação da DAI usando o SDK do IMA CAF DAI envolve dois componentes principais, conforme demonstrado neste guia:

  • StreamRequest: um objeto que define uma solicitação de stream para os servidores de publicidade do Google. As solicitações de stream têm duas variedades principais:

    • LiveStreamRequest: especifica uma chave de recurso, além de outros parâmetros opcionais.
    • VODStreamRequest: especifica um ID da origem do conteúdo, um ID do vídeo e outros parâmetros opcionais.
    • Os dois tipos de solicitação podem incluir uma chave de API necessária para acessar streams especificados e um código de rede do Google Ad Manager para que o SDK do IMA processe identificadores de anúncios conforme especificado nas configurações do Google Ad Manager.

  • 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

Configurar os objetos MediaInfo do remetente

Primeiro, configure o objeto MediaInfo do app remetente para incluir os seguintes campos:

contentId Um identificador exclusivo do item de mídia
contentUrl O URL do stream substituto a ser carregado se o StreamRequest da DAI falhar por qualquer motivo.
streamType Para transmissões ao vivo, esse valor precisa ser definido como "LIVE". Para transmissões de VOD, esse valor precisa ser definido como "BUFFERED".
customData assetKey Apenas transmissões ao vivo. Identifica a transmissão ao vivo que será carregada
contentSourceId Somente streams de VOD. Identifica o feed de mídia que contém o stream solicitado.
videoId Somente streams de VOD. Identifica o stream solicitado no feed de mídia especificado.
networkCode (Opcional) Código da rede do Google Ad Manager.
ApiKey Uma chave de API opcional que pode ser necessária para recuperar o URL do stream do SDK de DAI do IMA.
senderCanSkip Um valor booleano para informar ao receptor se o dispositivo de envio pode mostrar um botão de pular, permitindo a compatibilidade com anúncios puláveis.

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 um dos seguintes objetos JSON:

AO VIVO

{
  "media": {
    "contentId": "bbb",
    "contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
    "streamType": "LIVE",
    "customData": {
      "assetKey": "c-rArva4ShKVIAkNfy6HUQ",
      "networkCode": "21775744923",
      "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",
      "networkCode": "21775744923",
      "ApiKey": "",
      "senderCanSkip": true
    }
  },
  "credentials": "testCredentials"
}

Esse objeto de solicitação de carregamento personalizado pode ser enviado ao receptor para testar as etapas a seguir.

Criar um receptor básico do CAF

Seguindo o Guia do receptor básico do SDK do CAF, crie um receptor da Web básico.

O código do receptor ficará assim:

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

Importar o SDK de DAI do IMA e acessar o Player Manager

Adicione uma tag script para importar o SDK do DAI do IMA para CAF ao seu receptor da Web, logo após o script que carrega o CAF. O SDK de DAI do CAF é permanente, então não é necessário definir uma versão específica. Em seguida, na tag script que segue, armazene o contexto do receptor e o gerenciador do player como constantes antes de iniciar o receptor.

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

Inicializar o Gerenciador de streams do IMA

Inicialize o gerenciador de stream do SDK de DAI do 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>

Criar o interceptador de mensagens de carregamento

O SDK de DAI do CAF usa o interceptador de mensagens de carregamento do CAF para fazer solicitações de stream e substituir o URL de conteúdo pelo stream de DAI final. O interceptador de mensagens chama streamManager.requestStream(), que processa a configuração de intervalos de anúncio, a solicitação do stream e a substituição do contentURL atual.

Só pode haver um interceptador de mensagens de carregamento. Portanto, se o app exigir o uso do interceptador, você precisará incorporar todas as funções personalizadas ao mesmo 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>

Criar a solicitação de stream

Para concluir a integração da DAI do CAF, crie sua solicitação de stream usando os dados incluídos no objeto mediaInfo do remetente.

<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.networkCode) {
        streamRequest.networkCode = imaRequestData.networkCode;
      }
      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>

Agora você pode solicitar e reproduzir streams de DAI com o SDK de DAI do CAF do Google. Para saber mais sobre os recursos avançados do SDK, consulte os outros guias ou baixe nossos aplicativos receptores de exemplo.