Usar o SDK de DAI do IMA com um cliente HTML5

Reproduza transmissões ao vivo registradas com a API Google Cloud Video Stitcher.

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 a DAI do IMA.

Para informações sobre como integrar com outras plataformas ou usar os SDKs do lado do cliente do IMA, consulte SDKs do Interactive Media Ads (link em inglês).

Configure um projeto do Google Cloud

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

Local
A região do Google Cloud em que a configuração ativa 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

O token OAuth de curta duração de uma conta de serviço com o papel de usuário de editor de vídeo: 

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

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

ID de configuração em tempo real
O ID de configuração ao vivo que você especificou ao criar seu 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 aplicativos de exemplo do IMA só demonstram as solicitações de stream HLS. Você ainda pode usar streams DASH ao criar a classe VideoStitcherLiveStreamRequest. Ao configurar seu player compatível com DASH, você precisa definir um listener para os eventos de progresso do player de vídeo que possa 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, é a string de dados da mensagem.

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

Envie os metadados assim que os eventos do player fornecerem. Se os metadados estiverem ausentes ou incorretos, o SDK de DAI do IMA pode não acionar eventos de anúncio, o que leva a eventos de anúncios informados incorretamente.

Faça o download dos exemplos de DAI do IMA para HTML5 e extraia a amostra 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 Python para iniciar um servidor da Web:

python3 -m http.server 8000

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

Abra um navegador da Web e navegue até 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 iniciará o curta "Tears of Steel" após um breve anúncio. Esse conteúdo é apresentado usando um stream de vídeo on demand (VOD).

Solicitar uma transmissão ao vivo

Para substituir a transmissão de VOD de amostra pela sua transmissão ao vivo, use a classe VideoStitcherLiveStreamRequest, que cria automaticamente uma sessão de anúncios com o Google Ad Manager. É possível usar a interface do Google Ad Manager para localizar as sessões de DAI geradas para monitoramento e depuração.

Na amostra atual, há funções para solicitar um stream de VOD ou uma transmissão ao vivo. Para que ela funcione com a API Google Cloud Video Stitcher, você precisa 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, ative o CORS para a origem http://localhost:8000.

Atualize a página. Em seguida, solicite e reproduza transmissões ao vivo personalizadas.

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

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

Por exemplo, você pode 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 taxa de bits para a maior.

...

streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "includeRenditions": [
      {"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
      {"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
    ],
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Inserir um intervalo de anúncio

A API Google Cloud Video Stitcher 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.

O anúncio é reproduzido imediatamente após o intervalo de anúncio ser inserido.

Limpar

Agora que você hospedou uma transmissão ao vivo usando a API Google Cloud Video Stitcher 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 da transmissão ao vivo para remover todos os recursos 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.

Anterior
Chromecast
Próxima
iOS