# Introducción al SDK del reproductor web de IVS
<a name="web-getting-started"></a>

En este documento, se explican los pasos para comenzar a usar el SDK del reproductor web de Amazon IVS.

Proporcionamos soporte a través de una etiqueta `script` así como a través de un módulo npm. 

## Demostraciones
<a name="web-demo"></a>

La siguiente demostración en directo muestra cómo utilizar el reproductor web con una etiqueta `script` de nuestra red de entrega de contenido (CDN): [Reproductor de muestra de Amazon IVS](https://codepen.io/amazon-ivs/pen/QWbzORP/c3b13a2df34b60ada7756f3a2af8d2f0). La demostración incluye la configuración de los oyentes de eventos.

También puede consultar [https://github.com/aws-samples/amazon-ivs-player-web-sample](https://github.com/aws-samples/amazon-ivs-player-web-sample) y acceder a una selección de demostraciones adicionales del reproductor web.

## Configuración con la etiqueta de script
<a name="web-setup-script-tag"></a>

Para configurar el reproductor de Amazon IVS al usar la etiqueta de `script`:

1. Incluya la siguiente etiqueta (para obtener la última versión del reproductor).

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

1. Una vez que `amazon-ivs-player.min.js` se carga, agrega una variable `IVSPlayer` al contexto global. Esta es la biblioteca que usará para crear una instancia de reproductor. Primero, compruebe `isPlayerSupported` para determinar si el navegador admite el reproductor de IVS:

   ```
   if (IVSPlayer.isPlayerSupported) { ... }
   ```

   A continuación, para crear una instancia de reproductor, llame a la función `create` en el objeto `IVSPlayer`.

   ```
   const player = IVSPlayer.create();
   ```

   El SDK del reproductor web de Amazon IVS usa trabajadores de red para optimizar la reproducción del video.

1. Cargue y reproduzca una transmisión con las funciones `load` y `play` en la instancia del reproductor:

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

   donde `PLAYBACK_URL` es la URL devuelta desde la API de Amazon IVS cuando se solicita una clave de transmisión.

## Código de muestra
<a name="web-sample-code"></a>

En este ejemplo, cambie `PLAYBACK_URL` por la URL de la transmisión de origen que desea cargar. En el ejemplo se utiliza la última versión del reproductor de 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>
```

En la etiqueta `<video>`, se requiere `playsinline` para la reproducción en línea en Safari de iOS. Consulte [https://webkit.org/blog/6784/new-video-policies-for-ios/](https://webkit.org/blog/6784/new-video-policies-for-ios/).

## Configuración con NPM
<a name="web-setup-npm"></a>

Para obtener orientación, incluido un archivo de configuración de Webpack de ejemplo, consulte el siguiente repositorio: [https://github.com/aws-samples/amazon-ivs-player-web-sample](https://github.com/aws-samples/amazon-ivs-player-web-sample).

**Nota:** Al alojar activos estáticos del reproductor desde su propio dominio, debe establecer el encabezado de respuesta “Content-Type” para el binario WebAssembly (`amazon-ivs-wasmworker.min.wasm`) en “application/wasm”. También debe gzip sus activos para reducir los bytes descargados a través del cable y mejorar el tiempo del reproductor para iniciar la reproducción.

## TypeScript
<a name="web-typescript"></a>

Si está utilizando TypeScript, el paquete npm incluye tipos que podría querer importar y usar. Para obtener información sobre estos tipos, consulte [Reproductor de Amazon IVS SDK: referencia web](https://aws.github.io/amazon-ivs-player-docs/1.50.0/web/).

## Configuración de Service Worker
<a name="web-service-worker"></a>

Para reducir aún más la latencia cuando se reproduce a través de navegadores que solo admiten la reproducción nativa (principalmente iOS Safari), se puede instalar y configurar un service worker. Para obtener más información al respecto, consulte [Reducción de la latencia en los reproductores de terceros](player.md#player-reducing-latency).

Para configurar el reproductor de Amazon IVS para usar un service worker:

1. Cree un archivo para cargar el service worker de IVS desde la CDN. Esto es obligatorio, ya que los service workers deben estar alojados en el mismo dominio que la página que los recibe.

   Cree un archivo llamado `amazon-ivs-service-worker-loader.js` o similar y añada la siguiente línea:

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

1. Al crear una instancia de reproductor, introduzca la siguiente configuración de `serviceWorker` que haga referencia al archivo `amazon-ivs-service-worker-loader.js`:

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

1. En el elemento de video, defina el atributo `crossOrigin` en `anonymous`. Esto es necesario para que el service worker pueda realizar cambios en el manifiesto.

**Nota**: Para probar el service worker de forma local, la página debe publicarse desde *localhost* o desde *https*.

Para ver una demostración en vivo, consulte el ejemplo de service worker en el siguiente repositorio:

[https://github.com/aws-samples/amazon-ivs-player-web-sample](https://github.com/aws-samples/amazon-ivs-player-web-sample)

## Reproducción de solo audio
<a name="web-audio-only-playback"></a>

La calidad “solo audio” debe seleccionarse manualmente con el método `setQuality()`. Tenga en cuenta que el reproductor no es compatible con un valor `true` para el segundo argumento, `adaptive`, por lo que este argumento es, por defecto, `false`.

Para establecer la calidad en “solo audio” antes de que comience la reproducción, debe llamar a `setQuality()` antes del evento `READY`.

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

Establecer la calidad dentro de `READY` funciona para los modos de reproducción automática y sin reproducción automática.

## Optimización de la reproducción de fondo
<a name="web-optimize-background-playback"></a>

A partir de la versión 1.45.0 del SDK, el cliente se puede configurar para optimizar el uso de datos mientras se reproduce en una pestaña en segundo plano. Cuando esta característica está activada, el reproductor seleccionará la calidad de video SD más baja, 480p como máximo, después del tiempo especificado. El reproductor siempre selecciona video; audio\$1only no está seleccionado. Esto se aplica tanto al modo manual como al automático. Cuando la pestaña está en primer plano, el reproductor vuelve automáticamente a su configuración anterior.

Para habilitar esta característica:

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