Use o SDK de DAI para IMA com um cliente HTML5

Streams de VOD do Play registadas na API Google Cloud Video Stitcher

Este guia demonstra como usar o SDK de DAI para IMA para HTML5 para pedir e reproduzir uma sessão de stream VOD da Google Cloud.

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

Para obter informações sobre a integração com outras plataformas ou sobre a utilização dos SDKs do lado do cliente para IMA, consulte os SDKs para Anúncios Multimédia Interativos.

Para ver ou seguir um exemplo de integração concluído, transfira o exemplo do Cloud Video Stitcher para HLS ou DASH.

Nota: O SDK para IMA DAI para HTML5 suporta streams HLS e DASH, mas a reprodução de cada uma requer um leitor multimédia ou uma extensão diferente, como HLS.js ou DASH.js, com várias implementações.

Este guia explica como configurar o HLS.js e o SDK DAI para IMA para reproduzir uma stream HLS, com notas importantes sobre as diferenças de implementação para DASH.

Consulte a app de exemplo DASH.js do IMA para ter um ponto de partida para implementar streams DAI DASH com o IMA.

Configure um projeto do Google Cloud

Introduza as seguintes variáveis para utilização no SDK para IMA:

Location

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 a função de utilizador do Video Stitcher:

OAUTH_TOKEN

Leia mais acerca da criação de tokens OAuth de curta duração. O token OAuth pode ser reutilizado em vários pedidos, desde que não tenha expirado.

Código de rede

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

ID da configuração de VOD

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

Leia mais acerca da criação do ID de configuração de VOD no guia de criação de configuração de VOD da união na nuvem.

Configure um ambiente de programação

Ponto-chave: a classe VideoStitcherVodStreamRequest do IMA DAI suporta streams HLS e streams DASH de vários períodos. As pausas para anúncios são inseridas apenas entre períodos DASH.

As apps de exemplo do IMA demonstram apenas pedidos de streams HLS. Pode continuar a usar streams DASH ao criar a classe VideoStitcherVodStreamRequest. Quando configurar o leitor compatível com DASH, tem de configurar um ouvinte para os eventos de progresso do leitor de vídeo que podem fornecer os metadados do vídeo ao StreamManager.processMetadata(). Esta função usa três parâmetros:

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

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

3. timestamp: um número que é a hora de início da mensagem de evento para streams DASH.

Envie os metadados assim que os eventos do leitor os puderem fornecer e com a maior frequência possível. Se os metadados estiverem em falta ou não estiverem corretos, o SDK para DAI do IMA pode não acionar eventos de anúncios, o que resulta em eventos de anúncios comunicados incorretamente.

Transfira os exemplos de IMA DAI para HTML5 e extraia o ficheiro ZIP de exemplo hls_js/simple para uma nova pasta. Este exemplo é uma app Web que pode alojar localmente para fins de teste.

Para alojar o exemplo localmente, navegue para a nova pasta e execute o seguinte comando python para iniciar um servidor Web:

python3 -m http.server 8000

http.server só está disponível no Python 3.x. Pode usar qualquer outro servidor Web, como o servidor HTTP Apache ou o Node JS.

Abra um navegador de Internet e navegue para localhost:8000 para ver um leitor de vídeo. O seu navegador tem de suportar a biblioteca HLS.js.

Se tudo estiver a funcionar corretamente, quando clicar no botão Reproduzir no leitor de vídeo, começa o filme curto "Tears of Steel", com pausas para anúncios a cada 30 segundos.

Peça uma stream de VOD

Para substituir a stream de exemplo pela sua stream VOD com anúncios incorporados, use a classe VideoStitcherVodStreamRequest para criar automaticamente uma sessão de anúncios com o Google Ad Manager. Pode usar a IU do Google Ad Manager para localizar as sessões de DAI geradas para monitorização e depuração.

No exemplo existente, existem funções para pedir uma stream de VOD ou uma stream em direto. Para que funcione com a Google Cloud Video Stitcher API, tem de adicionar uma nova função para devolver um objeto VideoStitcherVodStreamRequest.

Segue-se 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, pode pedir e ver o stream VOD personalizado.

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

Personalize o seu pedido de stream adicionando opções de sessão para substituir a configuração predefinida da API Cloud Video Stitcher através de VideoStitcherVodStreamRequest.videoStitcherSessionOptions. Se fornecer uma opção não reconhecida, a API Cloud Video Stitcher responde com um erro HTTP 400. Consulte o guia de resolução de problemas para obter assistência.

Por exemplo, pode substituir as opções do manifesto com o seguinte fragmento do código, que pede dois manifestos de streams com representações ordenadas da taxa de bits mais baixa para a mais alta.

...

// 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 alojou com êxito uma stream VOD através da API Google Cloud Video Stitcher e a pediu através do SDK DAI para IMA para HTML5, é importante limpar todos os recursos de publicação.

Siga o guia de limpeza de VOD para remover recursos e recursos multimédia desnecessários.

Por último, na janela do terminal onde iniciou o servidor Web Python 3, use o comando ctrl+C para terminar o servidor local.