Conceitos básicos - Amazon Interactive Video Service
DemonstraçãoConfigurar com tag de scriptCódigo de exemploConfigurar com NPMTypeScriptConfigurar o operador de serviçoReprodução somente de áudio

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Conceitos básicos

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

Demonstração

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.

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.24.0/amazon-ivs-player.min.js">

  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 Player 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.24.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ção, 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ê deve definir o cabeçalho de resposta “Content-Type” para o WebAssembly binário (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 você pode querer 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.24.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 setQuality() método. Observe que o player não suporta um true valor para o segundo argumento, entãoadaptive, por padrão, esse argumento éfalse.

Para definir a qualidade para somente áudio antes do início da reprodução, ligue para 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);
   }
});

Definir a qualidade interna READY funciona nos modos de reprodução automática e não automática.