Configurar o SDK do IMA para DAI

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 troca entre o anúncio e o vídeo de conteúdo no app.

Selecione a solução de DAI que você quer usar

Serviço completo Veiculação de pods API Cloud Stitching Live API Cloud Stitching VOD

Reproduzir streams de VOD registrados com a API Video Stitcher do Google Cloud

Este guia mostra como usar o SDK DAI do IMA para HTML5 para solicitar e reproduzir uma sessão de stream de VOD do Google Cloud.

Este guia amplia o exemplo básico do guia de início da DAI do IMA.

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

Para conferir ou seguir um exemplo de integração concluído, faça o download do exemplo de junção de vídeo do Cloud para HLS ou DASH.

Observação:o SDK DAI do IMA para HTML5 é compatível com streams HLS e DASH, mas a reprodução de cada um requer um player de mídia ou extensão diferente, como HLS.js ou DASH.js, com implementações variadas.

Este guia explica como configurar o HLS.js e o SDK do IMA DAI para reproduzir um stream HLS, com observações importantes sobre diferenças de implementação para DASH.

Consulte o app de exemplo DASH.js da IMA para começar a implementar streams de DAI DASH com a IMA.

Configure um projeto do Google Cloud

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

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

Local

A região do Google Cloud em que 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 a função de usuário do Video Stitcher:

OAUTH_TOKEN

Leia mais sobre como criar tokens OAuth de curta duraçã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 de configuração de VOD

O ID da configuração de VOD para a transmissão de VOD: VOD_CONFIG_ID

Leia mais sobre como criar o ID de configuração de VOD no guia de criação de uma configuração de VOD do Cloud Stitching.

Configurar um ambiente de desenvolvimento

Importante: a classe VideoStitcherVodStreamRequest da DAI do IMA é compatível com streams HLS e DASH de vários períodos. Os intervalos de anúncio são inseridos apenas entre períodos DASH.

Os apps de exemplo da IMA demonstram apenas solicitações de stream HLS. Você ainda pode usar streams DASH ao construir a classe VideoStitcherVodStreamRequest. Ao configurar seu player compatível com DASH, você precisa 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:

1. type: uma string que precisa ser definida como 'ID3' para streams HLS e 'urn:google:dai:2018' para streams DASH.

2. data: para mensagens de eventos DASH, essa é a string de dados da mensagem.

3. timestamp: um número que é o horário de início da mensagem de evento para streams DASH.

Envie os metadados assim que possível e com a frequência que seus eventos de jogador permitirem. Se os metadados estiverem ausentes ou incorretos, o SDK do IMA DAI poderá não acionar eventos de anúncio, o que leva a relatórios inadequados.

Faça o download dos exemplos de DAI da IMA para HTML5 e extraia o arquivo zip de amostra hls_js/simple 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 python para iniciar um servidor da Web:

python3 -m http.server 8000

http.server está disponível apenas no Python 3.x. Você pode 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", com intervalos de anúncio a cada 30 segundos.

Solicitar um stream de VOD

Para substituir o fluxo de amostra pelo seu fluxo de VOD com junção de anúncios, use a classe VideoStitcherVodStreamRequest para criar automaticamente uma sessão de anúncios 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 Google Cloud Video Stitcher, adicione uma nova função para retornar um objeto VideoStitcherVodStreamRequest.

Veja um exemplo:

// StreamManager which will be used to request DAI 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() {
  requestVodVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
  streamRequest.vodConfigId = 'VOD_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';

  streamManager.requestStream(streamRequest);
}

Atualize a página. Em seguida, você pode solicitar e reproduzir o stream de VOD personalizado.

(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 Cloud Video Stitcher usando VideoStitcherVodStreamRequest.videoStitcherSessionOptions. Se você fornecer uma opção não reconhecida, a API Cloud 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 do menor para o maior bitrate.

...

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

streamManager.requestStream(streamRequest);

Limpar

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

Siga o guia de limpeza de VOD para remover recursos e ativos desnecessários.

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