Para discutir e enviar feedback sobre nossos produtos, participe do canal oficial do Ad Manager no Discord no servidor da Comunidade de publicidade e medição do Google.

O Google usa tecnologia de IA na tradução de conteúdos para seu idioma de preferência. As traduções com IA podem ter erros.

Começar a usar o SDK do IMA para DAI

Selecione a plataforma: HTML5 Android iOS tvOS Cast Roku

Os SDKs do IMA facilitam a integração de anúncios multimídia aos seus sites e apps. Os SDKs do IMA podem solicitar anúncios de qualquer servidor de anúncios compatível com VAST e gerenciar a reprodução de anúncios nos seus apps. Com os SDKs de DAI do IMA, os apps fazem uma solicitação de stream para anúncios e vídeos de conteúdo, seja VOD ou conteúdo ao vivo. Em seguida, o SDK retorna um stream de vídeo combinado para que você não precise gerenciar a alternância entre o anúncio e o vídeo de conteúdo no seu app.

Selecione a solução de DAI que preferir:

Configurar com a DAI de serviço completo: o Google Ad Manager seleciona e insere anúncios diretamente no seu stream de conteúdo.
Configurar com a DAI de veiculação de pod: o Google Ad Manager fornece pods de anúncios que estão disponíveis para agrupamento ou carregamento em um player de vídeo.

Reproduzir transmissões ao vivo registradas com a API Video Stitcher do Google Cloud

Este guia demonstra como usar o SDK de DAI do IMA para HTML5 para solicitar e reproduzir uma transmissão ao vivo de um evento registrado com a API Google Cloud Video Stitcher e como inserir um intervalo de anúncio durante a reprodução.

Este guia expande o exemplo básico do guia de iniciação para DAI do IMA.

Para saber como fazer a integração com outras plataformas ou usar os SDKs do IMA do lado do cliente, consulte SDKs do Interactive Media Ads.

Para conferir ou seguir uma integração de amostra concluída, faça o download do exemplo do Video Stitcher do Cloud para HLS ou DASH.

Configure um projeto do Google Cloud

Configure um projeto do Google Cloud e as contas de serviço para acessar o projeto.

Crie uma configuração para um evento de transmissão ao vivo usando sua própria transmissão ao vivo de conteúdo ou uma transmissão ao vivo de teste. Este guia espera uma transmissão HLS.

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

Local

A região do Google Cloud em que a configuração em tempo real foi criada: LOCATION

Número do projeto

O número do projeto na nuvem 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 papel de usuário do Video Stitcher:

OAUTH_TOKEN

Leia mais sobre como criar credenciais de curta duração para contas de serviço. O token OAuth pode ser reutilizado em várias solicitações, desde que não tenha expirado.

Código de rede

O código de rede do Ad Manager para solicitar anúncios: NETWORK_CODE

ID da configuração ativa: O ID de configuração ao vivo que você especificou ao criar o evento de transmissão ao vivo: LIVE_CONFIG_ID
Chave de recurso personalizada: A chave de recurso personalizada do 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

Configurar um ambiente de desenvolvimento

Os apps de exemplo do IMA demonstram apenas solicitações de stream HLS. Ainda é possível usar streams DASH ao criar a classe VideoStitcherLiveStreamRequest. Ao configurar o player compatível com DASH, é necessário configurar um listener para os eventos de progresso do player de vídeo que podem fornecer os metadados do vídeo para StreamManager.processMetadata(). Essa função usa três parâmetros:

type: uma string que precisa ser definida como 'ID3' para streams HLS e 'urn:google:dai:2018' para streams DASH.
data: para mensagens de evento DASH, é a string de dados da mensagem.
timestamp: um número que é o horário de início da mensagem de evento para streams DASH.

Envie os metadados assim que os eventos do player puderem fornecer e com a maior frequência possível. Se os metadados estiverem ausentes ou incorretos, o SDK do DAI do IMA talvez não acione eventos de anúncio, o que leva a relatórios incorretos.

Faça o download dos exemplos de DAI do IMA para HTML5 e extraia o exemplo simples de HLS.js em uma nova pasta. Este exemplo é um app da Web que pode ser hospedado localmente para fins de teste.

Para hospedar o exemplo localmente, navegue até a nova pasta e execute o seguinte comando do Python para iniciar um servidor da Web:

python3 -m http.server 8000

http.server está disponível apenas no Python 3.x. É possível usar qualquer outro servidor da Web, como o Apache HTTP Server ou o Node JS.

Abra um navegador da Web e acesse localhost:8000 para ver um player de vídeo. Seu navegador precisa ser compatível com a biblioteca HLS.js.

Se tudo estiver funcionando corretamente, clicar no botão reproduzir no player de vídeo vai iniciar o curta-metragem "Tears of Steel" após um anúncio curto. Esse conteúdo é entregue usando um stream de vídeo on demand (VOD).

Solicitar uma transmissão ao vivo

Para substituir o stream de VOD de exemplo pela sua transmissão ao vivo, use a classe VideoStitcherLiveStreamRequest, que cria automaticamente uma sessão de anúncio com o Google Ad Manager. Use a interface do Google Ad Manager para localizar as sessões de DAI geradas para monitoramento e depuração.

No exemplo atual, há funções para solicitar um stream de VOD ou uma transmissão ao vivo. Para que ele funcione com a API Video Stitcher do Google Cloud, é necessário adicionar uma nova função para retornar um objeto VideoStitcherLiveStreamRequest.

Veja um exemplo:

// 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);
}

Para testes locais, se os arquivos de transmissão ao vivo estiverem em um bucket do Cloud Storage, você precisará ativar o CORS para a origem http://localhost:8000.

Atualize a página. Depois, você poderá pedir e assistir transmissões ao vivo personalizadas.

(Opcional) Adicionar opções de sessão de streaming

Personalize sua solicitação de transmissão adicionando opções de sessão para substituir a configuração padrão da API Video Stitcher do Cloud usando VideoStitcherLiveStreamRequest.videoStitcherSessionOptions. Se você fornecer uma opção não reconhecida, a API Video Stitcher vai responder com um erro HTTP 400. Consulte o guia de solução de problemas para receber ajuda.

Por exemplo, é possível substituir as opções de manifesto com o snippet de código a seguir, que solicita dois manifestos de stream com renderizações ordenadas da menor para a maior taxa de bits.

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Inserir um intervalo de anúncio

A API Video Stitcher do Google Cloud insere anúncios recuperados da tag de anúncio para cada intervalo de anúncio. Os intervalos de anúncio são indicados no manifesto usando marcadores de anúncio. Os marcadores de anúncio são inseridos pelo codificador de transmissão ao vivo.

Se você estiver usando sua própria transmissão ao vivo, insira o marcador de anúncio. Para mais informações sobre os marcadores de anúncio HLS e DASH compatíveis, consulte a documentação de marcadores de anúncio.
Se você criou uma transmissão ao vivo usando a API Google Cloud Livestream, insira um evento de canal de intervalo de anúncio.

O anúncio é reproduzido imediatamente após a inserção do intervalo de anúncio.

Limpar

Agora que você hospedou uma transmissão ao vivo usando a API Video Stitcher do Google Cloud e a solicitou usando o SDK de DAI do IMA para HTML5, é importante limpar todos os recursos de veiculação.

Siga o guia de limpeza de transmissão ao vivo para remover recursos desnecessários.

Por fim, na janela do terminal em que você iniciou o servidor da Web do Python 3, use o comando ctrl+C para encerrar o servidor local.