# Conceitos básicos do SDK do reprodutor para a Web do IVS
<a name="web-getting-started"></a>

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 name="web-demo"></a>

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](https://codepen.io/amazon-ivs/pen/QWbzORP/c3b13a2df34b60ada7756f3a2af8d2f0). A demonstração inclui a configuração de ouvintes do evento.

Consulte também [https://github.com/aws-samples/amazon-ivs-player-web-sample](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
<a name="web-setup-script-tag"></a>

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

1. 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.

1. 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
<a name="web-sample-code"></a>

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.50.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/](https://webkit.org/blog/6784/new-video-policies-for-ios/).

## Configurar com NPM
<a name="web-setup-npm"></a>

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](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
<a name="web-typescript"></a>

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](https://aws.github.io/amazon-ivs-player-docs/1.50.0/web/) (SDK do Amazon IVS Player: referência para Web).

## Configurar o operador de serviço
<a name="web-service-worker"></a>

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](player.md#player-reducing-latency).

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.50.0/amazon-ivs-service-worker.min.js');
   ```

1. 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'
      }
   });
   ```

1. 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](https://github.com/aws-samples/amazon-ivs-player-web-sample)

## Reprodução somente de áudio
<a name="web-audio-only-playback"></a>

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.

## Otimizar a reprodução em segundo plano
<a name="web-optimize-background-playback"></a>

A partir da versão 1.45.0 do SDK, o cliente pode ser configurado para otimizar o uso de dados enquanto reproduz em uma aba em segundo plano. Quando esse atributo estiver habilitado, após a duração especificada, o player selecionará a maior qualidade de vídeo SD disponível até o máximo de 480p. O player sempre seleciona vídeo; audio\$1only não é selecionado. Isso se aplica aos modos manual e automático. Quando a guia está em primeiro plano, o player volta automaticamente para a configuração anterior.

Para ativar esse recurso:

```
const player = IVSPlayer.create({
   optimizeBackgroundPlayback: {
      enabled: true,
      switchDelayMs: 60 * 1000,   // Optional, defaults to 60s
   }
});
```