Use o SDK de DAI para IMA com um cliente HTML5

Veja streams em direto registadas com a API Google Cloud Video Stitcher

Este guia demonstra como usar o SDK para DAI para HTML5 para pedir e ver uma stream em direto de um evento registado na API Google Cloud Video Stitcher e como inserir uma pausa para anúncios durante a reprodução.

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.

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 publicada 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 sobre como criar credenciais de curta duração para contas de serviç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 streams em direto
O ID de configuração em direto que especificou quando criou o evento de stream em direto: LIVE_CONFIG_ID
Chave do recurso personalizado
A chave do recurso personalizado do Ad Manager gerada durante o processo de criação de uma configuração para um evento de stream em direto com a API Video Stitcher: CUSTOM_ASSET_KEY

Configure um ambiente de programação

As apps de exemplo do IMA demonstram apenas pedidos de streams HLS. Pode continuar a usar streams DASH ao criar a classe VideoStitcherLiveStreamRequest. 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 DAI do IMA para HTML5 e extraia o exemplo simples do HLS.js 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 play no leitor de vídeo, o curta-metragem "Tears of Steel" começa após um breve anúncio. Este conteúdo é fornecido através de uma stream de vídeo a pedido (VOD).

Peça uma stream em direto

Para substituir a stream VOD de exemplo pela sua stream em direto, use a classe VideoStitcherLiveStreamRequest que cria 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 VideoStitcherLiveStreamRequest.

Segue-se 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 ficheiros de stream em direto estiverem localizados num contentor do Cloud Storage, tem de ativar o CORS para a origem http://localhost:8000.

Atualize a página. Em seguida, pode pedir e ver streams em direto personalizadas.

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

Insira uma pausa para anúncios

A API Google Cloud Video Stitcher insere anúncios obtidos a partir da etiqueta de anúncio para cada pausa para anúncios. As pausas para anúncios são indicadas no manifesto através de marcadores de anúncios. Os marcadores de anúncios são inseridos pelo codificador de stream em direto.

O anúncio é apresentado imediatamente após a inserção da pausa para anúncios.

Limpar

Agora que alojou com êxito uma stream em direto 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 streams em direto 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.

Anterior
Chromecast
Avançar
iOS