Introducción al SDK del reproductor web de IVS - Amazon IVS
DemostracionesConfiguración con la etiqueta de scriptCódigo de muestraConfiguración con NPMTypeScriptConfiguración de Service WorkerReproducción de solo audio

Introducción al SDK del reproductor web de IVS

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

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. 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 y acceder a una selección de demostraciones adicionales del reproductor web.

Configuración con la etiqueta de script

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

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

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

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.37.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/.

Configuración con NPM

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.

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

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.

Configuración de Service Worker

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.

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

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

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

Reproducción de solo audio

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.