Conceitos básicos do SDK do reprodutor para a Web do IVS - Amazon IVS
DemonstraçõesConfigurar com tag de scriptCódigo de exemploConfigurar com NPMTypeScriptConfigurar o operador de serviçoReprodução somente de áudio

Conceitos básicos do SDK do reprodutor para a Web do IVS

Este documento descreve as etapas envolvidas ao começar a usar o SDK do reprodutor para a Web do Amazon IVS.

Nós fornecemos suporte por meio de uma tag script, bem como por meio de um módulo npm.

Demonstrações

A demonstração ao vivo a seguir mostra como usar o player da Web com uma tag script de nossa rede de entrega de conteúdo: Amazon IVS Player Sample. A demonstração inclui a configuração de ouvintes do evento.

Consulte também https://github.com/aws-samples/amazon-ivs-player-web-sample para ver uma seleção de demonstrações adicionais de reprodutores da Web.

Configurar com tag de script

Para configurar o player do Amazon IVS usando a tag script:

  1. Inclua a seguinte tag (para a versão mais recente do player).

    <script src="https://player.live-video.net/1.36.0/amazon-ivs-player.min.js"></script>

  2. Depois que amazon-ivs-player.min.js for carregado, ele adiciona uma variável de IVSPlayer ao contexto global. Esta é a biblioteca que você vai usar para criar uma instância do player. Primeiro, verifique isPlayerSupported para determinar se o navegador suporta o player do IVS:

    if (IVSPlayer.isPlayerSupported) { ... }

    Em seguida, para criar uma instância do player, chame a função create no objeto IVSPlayer.

    const player = IVSPlayer.create();

    O SDK do reprodutor do Amazon IVS para Web usa operadores da Web para otimizar a reprodução de vídeo.

  3. Carregue e reproduza um stream usando as funções load e play na instância do player:

    player.load("PLAYBACK_URL");
player.play();

    em que PLAYBACK_URL é a URL retornada da API do Amazon IVS quando uma chave de stream é solicitada.

Código de exemplo

Neste exemplo, substitua PLAYBACK_URL pelo URL do stream de origem que você deseja carregar. O exemplo usa a versão mais recente do Player do Amazon IVS.

<script src="https://player.live-video.net/1.36.0/amazon-ivs-player.min.js"></script>
<video id="video-player" playsinline></video>
<script>
  if (IVSPlayer.isPlayerSupported) {
    const player = IVSPlayer.create();
    player.attachHTMLVideoElement(document.getElementById('video-player'));
    player.load("PLAYBACK_URL");
    player.play();
  }
</script>

Na tag <video>, o playsinline é necessário para a reprodução em linha no iOS Safari. Consulte https://webkit.org/blog/6784/new-video-policies-for-ios/.

Configurar com NPM

Para obter orientações, incluindo um exemplo de arquivo de configuração do Webpack, consulte o seguinte repositório: https://github.com/aws-samples/amazon-ivs-player-web-sample.

Observação: ao hospedar ativos estáticos do player de seu próprio domínio, você deverá definir o cabeçalho de resposta “Content-Type” do binário WebAssembly (amazon-ivs-wasmworker.min.wasm) como “application/wasm”. Também é necessário compactar seus ativos em gzip para reduzir os bytes baixados pela rede e melhorar o tempo do player para iniciar a reprodução.

TypeScript

Se você estiver usando TypeScript, o pacote npm inclui tipos que talvez você queira importar e usar. Para obter informações sobre esses tipos, consulte Amazon IVS Player SDK: Web Reference (SDK do Amazon IVS Player: referência para Web).

Configurar o operador de serviço

Para diminuir ainda mais a latência ao reproduzir por meio de navegadores que oferecem suporte apenas à reprodução nativa (principalmente iOS Safari), é possível instalar e configurar um operador de serviço. Para obter mais contexto, consulte Reduzir a latência em reprodutores de terceiros.

Para configurar o reprodutor do Amazon IVS para usar um operador de serviço:

  1. Crie um arquivo para carregar o operador de serviço do IVS fora do CDN. Essa ação é necessária pois os prestadores de serviços devem estar hospedados no mesmo domínio da página que os busca.

    Crie um arquivo nomeado amazon-ivs-service-worker-loader.js ou semelhante e adicione a seguinte linha:

    importScripts('https://player.live-video.net/1.36.0/amazon-ivs-service-worker.min.js');

  2. Ao criar uma instância de reprodutor, transmita a seguinte configuração de serviceWorker mencionando o arquivo amazon-ivs-service-worker-loader.js:

    const player = IVSPlayerPackage.create({
   serviceWorker: {
      url: 'amazon-ivs-service-worker-loader.js'
   }
});

  3. No elemento de vídeo, defina o atributo crossOrigin como anonymous. Essa ação é necessária para permitir que o operador de serviço faça alterações no manifesto.

Observação: para testar o operador de serviço localmente, a página precisa ser veiculada fora do localhost ou do https.

Para uma demonstração ao vivo, veja o exemplo do operador de serviço no seguinte repositório:

https://github.com/aws-samples/amazon-ivs-player-web-sample

Reprodução somente de áudio

A qualidade somente de áudio deve ser selecionada manualmente com o método setQuality(). Observe que o reprodutor não oferece suporte a um valor true para o segundo argumento, adaptive, e por isso, por padrão, esse argumento é false.

Para definir a qualidade para somente áudio antes do início da reprodução, chame setQuality() dentro do evento READY:

player.addEventListener(PlayerState.READY, () => {
   const qualities = player.getQualities();
   const audioOnly = qualities.find(q => q.name === 'audio_only');
   if (audioOnly) {
      player.setQuality(audioOnly);
   }
});

A definição da qualidade em READY funciona nos modos de reprodução automática e não automática.