

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

# Reproducción de vídeo con HLS
<a name="hls-playback"></a>

La [transmisión en vivo HTTP (HLS)](https://en.wikipedia.org/wiki/HTTP_Live_Streaming) es un protocolo de comunicación de transmisión multimedia basado en HTTP estándar del sector. Puede utilizar HLS para ver una transmisión de vídeo de Kinesis, ya sea para su reproducción en directo o para ver un vídeo archivado.

Puede utilizar HLS para la reproducción en directo. La latencia suele oscilar entre 3 y 5 segundos, pero puede oscilar entre 1 y 10 segundos, según el caso de uso, el reproductor y las condiciones de la red. Puede utilizar un reproductor de terceros (como [Video.js](https://github.com/videojs/video.js/) o [Google Shaka Player](https://github.com/google/shaka-player)) para mostrar la transmisión de vídeo proporcionando la URL de la sesión de streaming HLS, ya sea mediante programación o de forma manual. También puede reproducir vídeo introduciendo la URL de la sesión de streaming HLS en la barra de direcciones de los navegadores [Apple Safari](https://www.apple.com/safari/) o [Microsoft Edge](https://www.microsoft.com/en-us/edge).

[Para ver una transmisión de vídeo de Kinesis mediante HLS, cree primero una sesión de streaming mediante Get SessionURL. HLSStreaming](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/API_reader_GetHLSStreamingSessionURL.html) Esta acción devuelve una URL (que contiene un token de sesión) que permite tener acceso a la sesión HLS. A continuación, puede utilizar la URL en un reproductor multimedia o en una aplicación independiente para mostrar la transmisión.

**importante**  
No todos los archivos multimedia enviados a Kinesis Video Streams se pueden reproducir mediante HLS. Consulte los [GetHLSStreamingSessionURL](API_reader_GetHLSStreamingSessionURL.md) requisitos de carga específicos.

**Topics**
+ [Utilícela AWS CLI para recuperar la URL de una sesión de streaming de HLS](#retrieve-hls-url)
+ [Ejemplo: utilice HLS en HTML y JavaScript](#how-hls-ex1)
+ [Solución de problemas de HLS](#how-hls-ex1-ts)

## Utilícela AWS CLI para recuperar la URL de una sesión de streaming de HLS
<a name="retrieve-hls-url"></a>

El siguiente procedimiento muestra cómo utilizar la AWS CLI URL de una sesión de streaming HLS para una transmisión de vídeo de Kinesis. 

Para obtener instrucciones de instalación, consulte la Guía del [AWS Command Line Interface usuario](https://docs.aws.amazon.com//cli/latest/userguide/getting-started-install.html#getting-started-install-instructions). Tras la instalación, [configúrelo AWS CLI con las](https://docs.aws.amazon.com//cli/latest/userguide/getting-started-quickstart.html#getting-started-quickstart-new) credenciales y la región. 

Como alternativa, abra el AWS CloudShell terminal, que lo tiene AWS CLI instalado y configurado. Para obtener más información, consulte la [guía del usuario de AWS CloudShell](https://docs.aws.amazon.com//cloudshell/latest/userguide/welcome.html#how-to-get-started).

**Recupere el punto de enlace URL de HLS para su transmisión de vídeo de Kinesis.**

1. Escriba lo siguiente en la terminal:

   ```
   aws kinesisvideo get-data-endpoint \
     --api-name GET_HLS_STREAMING_SESSION_URL \
     --stream-name {{YourStreamName}}
   ```

   Recibirás una respuesta similar a la siguiente:

   ```
   {
       "DataEndpoint": "https://b-{{1234abcd}}.kinesisvideo.{{aws-region}}.amazonaws.com"
   }
   ```

1. Realice la solicitud de URL de la sesión de streaming de HLS al punto final devuelto.

------
#### [ Live ]

   Para la reproducción en directo, la lista de reproducción multimedia del HLS se actualiza continuamente con los archivos multimedia más recientes a medida que están disponibles. Al reproducir este tipo de sesión en un reproductor multimedia, la interfaz de usuario suele mostrar una notificación «**en directo**», sin necesidad de controlar la posición en la ventana de reproducción que desee mostrar. 

   Asegúrese de subir contenido multimedia a esta transmisión cuando ejecute este comando. 

   ```
   aws kinesis-video-archived-media get-hls-streaming-session-url \
     --endpoint-url https://b-{{1234abcd}}.kinesisvideo.{{aws-region}}.amazonaws.com \
     --stream-name {{YourStreamName}} \
     --playback-mode LIVE
   ```

------
#### [ Live replay ]

   En el caso de la reproducción en directo, la reproducción comienza a partir de una hora de inicio especificada. La lista de reproducción multimedia HLS también se actualiza continuamente con los archivos multimedia más recientes a medida que están disponibles. La sesión seguirá incluyendo el contenido multimedia recién ingerido hasta que caduque o hasta la hora de finalización especificada, lo que ocurra primero. Este modo resulta útil para poder iniciar la reproducción desde el momento en que se detecta un evento y continuar retransmitiendo en directo contenido multimedia que aún no se haya ingerido en el momento de la creación de la sesión.

   Determine una marca de tiempo de inicio.

   Para este ejemplo, utilizamos el formato de **tiempo en segundos de Unix Epoch.** Consulte la sección de [marcas de tiempo](https://docs.aws.amazon.com//cli/latest/userguide/cli-usage-parameters-types.html#parameter-type-timestamp) de la Guía del AWS Command Line Interface usuario para obtener más información sobre el formato de marcas de tiempo.

   Consulte [UnixTime.org](https://unixtime.org/) para ver una herramienta de conversión.
   + **1708471800** es igual a las **15:30:00 GMT- 08:00 del 20 de febrero de 2024**

   En este ejemplo, no especificamos una marca de tiempo de finalización, lo que significa que la sesión seguirá incluyendo el contenido multimedia recién ingerido hasta que la sesión caduque.

   Invoca la `GetHLSStreamingSessionURL` API con el modo de `LIVE_REPLAY` reproducción y un selector de fragmentos [HLS](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetHLSStreamingSessionURL.html#KinesisVideo-reader_GetHLSStreamingSessionURL-request-HLSFragmentSelector) especificado.

   ```
   aws kinesis-video-archived-media get-hls-streaming-session-url \
     --endpoint-url https://b-{{1234abcd}}.kinesisvideo.{{aws-region}}.amazonaws.com \
     --stream-name {{YourStreamName}} \
     --playback-mode LIVE_REPLAY \
     --hls-fragment-selector \
       "FragmentSelectorType=SERVER_TIMESTAMP,TimestampRange={StartTimestamp={{1708471800}}}"
   ```

------
#### [ On-demand ]

   Para la reproducción bajo demanda, la lista de reproducción multimedia del HLS contiene el contenido multimedia especificado por el selector de fragmentos del HLS. Cuando este tipo de sesión se reproduce en un reproductor multimedia, la interfaz de usuario suele mostrar un control de barra para seleccionar la posición de visualización en la ventana de reproducción.

   Para crear una URL para una sección determinada de la transmisión, primero determine las marcas horarias de inicio y finalización.

   Para este ejemplo, utilizamos el formato de **tiempo en segundos de Unix Epoch.** Consulte la sección de [marcas de tiempo](https://docs.aws.amazon.com//cli/latest/userguide/cli-usage-parameters-types.html#parameter-type-timestamp) de la Guía del AWS Command Line Interface usuario para obtener más información sobre el formato de marcas de tiempo.

   Consulte [UnixTime.org](https://unixtime.org/) para ver una herramienta de conversión.
   + **1708471800** es igual a las **15:30:00 GMT- 08:00 del 20 de febrero de 2024**
   + **1708471860** **es igual a las 15:31:00 GMT- 08:00 del 20 de febrero de 2024**

   [Invoca la `GetHLSStreamingSessionURL` API con el modo de `ON_DEMAND` reproducción y un selector de fragmentos HLS especificado.](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetHLSStreamingSessionURL.html#KinesisVideo-reader_GetHLSStreamingSessionURL-request-HLSFragmentSelector)

   ```
   aws kinesis-video-archived-media get-hls-streaming-session-url \
     --endpoint-url https://b-{{1234abcd}}.kinesisvideo.{{aws-region}}.amazonaws.com \
     --stream-name {{YourStreamName}} \
     --playback-mode ON_DEMAND \
     --hls-fragment-selector \
       "FragmentSelectorType=SERVER_TIMESTAMP,TimestampRange={StartTimestamp={{1708471800}},EndTimestamp={{1708471860}}}"
   ```

**nota**  
Las marcas de tiempo deben tener una diferencia de 24 horas entre sí, tal y como se menciona en la documentación. [HLSTimestampRange](API_reader_HLSTimestampRange.md)

------

   Recibirás una respuesta similar a la siguiente:

   ```
   {
       "HLSStreamingSessionURL": "https://b-{{1234abcd}}.kinesisvideo.{{aws-region}}.amazonaws.com/hls/v1/getHLSMasterPlaylist.m3u8?SessionToken={{CiAz...DkRE6M}}~"
   }
   ```
**importante**  
No compartas ni guardes este token donde una entidad no autorizada pueda acceder a él. El token proporciona acceso al contenido de la transmisión. Proteja el token con las mismas medidas que utilizaría con sus AWS credenciales.

   Puedes usar esta URL y cualquier reproductor HLS para ver la transmisión HLS. 

   Por ejemplo, utilice el reproductor multimedia VLC.

   También puede reproducir la transmisión HLS introduciendo la URL de la sesión de transmisión HLS en la barra de ubicación de los navegadores Apple Safari o Microsoft Edge.

## Ejemplo: utilice HLS en HTML y JavaScript
<a name="how-hls-ex1"></a>

El siguiente ejemplo muestra cómo usar el AWS SDK para la versión JavaScript 2 para recuperar una sesión de streaming HLS para una transmisión de vídeo de Kinesis y reproducirla en una página web. El ejemplo muestra cómo reproducir vídeo en los siguientes reproductores:
+ [Video.js](https://github.com/videojs/video.js/) 
+ [Google Shaka Player](https://github.com/google/shaka-player)
+ [hls.js](https://github.com/video-dev/hls.js/)

Vea el [código de ejemplo completo](https://github.com/aws-samples/amazon-kinesis-video-streams-media-viewer) y la [página web alojada](https://aws-samples.github.io/amazon-kinesis-video-streams-media-viewer/) en. GitHub Esta página web estática simplifica las pruebas y la experimentación con las salidas HLS y MPEG-DASH de la transmisión de vídeo de Amazon Kinesis. La página de ejemplo proporciona campos de entrada para los siguientes parámetros:
+ Región de AWS: La región en la que se encuentra la transmisión de vídeo de Kinesis
+ Nombre de la transmisión: el nombre de la transmisión de vídeo de Kinesis
+ Modo de reproducción: el modo de reproducción HLS (LIVE, LIVE\_REPLAY o ON\_DEMAND)
+ Tipo de selector de fragmentos: método utilizado para seleccionar fragmentos (SERVER\_TIMESTAMP o PRODUCER\_TIMESTAMP)
+ Número de fragmento: el número de fragmento inicial (si corresponde)
+ Formato de contenedor: el formato del contenedor multimedia (FRAGMENTED\_ MP4 o MPEG\_TS)

La aplicación recupera estos valores de los cuadros de entrada de la página HTML y los utiliza para crear la solicitud de una sesión de streaming HLS que se muestra en la página.

**Topics**
+ [Importa el AWS SDK JavaScript para navegadores](#how-hls-ex1-import)
+ [Configurar el cliente de Kinesis Video Streams](#how-hls-ex1-setup)
+ [Recupere el punto final para la reproducción de HLS](#how-hls-ex1-endpoint)
+ [Configurar el cliente multimedia archivado de Kinesis Video Streams](#how-hls-ex1-session)
+ [Recupere la URL de la sesión de streaming de HLS](#how-hls-ex1-retrieve-url)
+ [Muestre la transmisión HLS en la página web](#how-hls-ex1-display)

### Importa el AWS SDK JavaScript para navegadores
<a name="how-hls-ex1-import"></a>

En la página web, incluye la siguiente etiqueta de script para importar el AWS SDK de la JavaScript versión 2 al proyecto.

```
<script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.490.0/aws-sdk.min.js"></script>
```

Para obtener más información, consulta la JavaScript documentación [del AWS SDK](https://docs.aws.amazon.com//sdk-for-javascript/v2/developer-guide/loading-the-jssdk.html).

### Configurar el cliente de Kinesis Video Streams
<a name="how-hls-ex1-setup"></a>

Para acceder a la transmisión de vídeo con HLS, primero cree y configure el cliente Kinesis Video Streams. Consulte [Configuración de credenciales en un navegador web](https://docs.aws.amazon.com//sdk-for-javascript/v2/developer-guide/setting-credentials-browser.html) para ver otros métodos de autenticación.

```
const clientConfig = {
    accessKeyId: '{{YourAccessKey}}',
    secretAccessKey: '{{YourSecretKey}}',
    region: '{{us-west-2}}'
};
const kinesisVideoClient = new AWS.KinesisVideo(clientConfig);
```

La aplicación recupera los valores necesarios de los cuadros de entrada de la página HTML.

### Recupere el punto final para la reproducción de HLS
<a name="how-hls-ex1-endpoint"></a>

Utilice el cliente de Kinesis Video Streams para invocar [GetDataEndpoint](API_GetDataEndpoint.md) la API y recuperar el punto final.

```
const getDataEndpointOptions = {
    StreamName: '{{YourStreamName}}',
    APIName: 'GET_HLS_STREAMING_SESSION_URL'
};
const getDataEndpointResponse = await kinesisVideoClient
    .getDataEndpoint(getDataEndpointOptions)
    .promise();
const hlsDataEndpoint = getDataEndpointResponse.DataEndpoint;
```

Este código almacena el punto final en la `hlsDataEndpoint` variable.

### Configurar el cliente multimedia archivado de Kinesis Video Streams
<a name="how-hls-ex1-session"></a>

En la configuración del cliente de contenido multimedia archivado de Kinesis Video Streams, especifique el punto de conexión que obtuvo en el paso anterior.

```
const archivedMediaClientConfig = {
    accessKeyId: '{{YourAccessKey'}},
    secretAccessKey: '{{YourSecretKey'}},
    region: '{{us-west-2}}',
    endpoint: hlsDataEndpoint
};
const kinesisVideoArchivedMediaClient = new AWS.KinesisVideoArchivedMedia(archivedMediaClientConfig);
```

### Recupere la URL de la sesión de streaming de HLS
<a name="how-hls-ex1-retrieve-url"></a>

Utilice el cliente multimedia archivado de Kinesis Video Streams para invocar [GetHLSStreamingSessionURL](API_reader_GetHLSStreamingSessionURL.md) la API y recuperar la URL de reproducción del HLS.

```
const getHLSStreamingSessionURLOptions = {
    StreamName: '{{YourStreamName}}',
    PlaybackMode: 'LIVE'
};
const getHLSStreamingSessionURLResponse = await kinesisVideoArchivedMediaClient
    .getHLSStreamingSessionURL(getHLSStreamingSessionURLOptions)
    .promise();
const hlsUrl = getHLSStreamingSessionURLResponse.HLSStreamingSessionURL;
```

### Muestre la transmisión HLS en la página web
<a name="how-hls-ex1-display"></a>

Cuando tenga la URL de la sesión de streaming HLS, proporciónesela al reproductor de vídeo. El método para proporcionar la URL al reproductor de vídeo es específico del reproductor utilizado.

------
#### [ Video.js ]

Haga lo siguiente para importar [Video.js](https://github.com/videojs/video.js/) y sus clases CSS al script de nuestro navegador:

```
<link rel="stylesheet" href="https://vjs.zencdn.net/6.6.3/video-js.css">
<script src="https://vjs.zencdn.net/6.6.3/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
```

Cree un elemento `video` HTML para mostrar el vídeo:

```
<video id="videojs" class="player video-js vjs-default-skin" controls autoplay></video>
```

Establezca la URL HLS como fuente del elemento de vídeo HTML:

```
const playerElement = document.getElementById('videojs');
const player = videojs(playerElement);
player.src({
    src: {{hlsUrl}},
    type: 'application/x-mpegURL'
});
player.play();
```

------
#### [ Shaka ]

Haga lo siguiente para importar el [reproductor Shaka de Google al script](https://github.com/shaka-project/shaka-player) de nuestro navegador:

```
<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/2.4.1/shaka-player.compiled.js"></script>
```

Crea un elemento `video` HTML para mostrar el vídeo:

```
<video id="shaka" class="player" controls autoplay></video>
```

Crea un reproductor Shaka especificando el elemento de vídeo y llama al método de carga:

```
const playerElement = document.getElementById('shaka');
const player = new shaka.Player(playerElement);
player.load({{hlsUrl}});
```

------
#### [ hls.js ]

Haga lo siguiente para importar el [archivo hls.js](https://github.com/video-dev/hls.js/) al script de nuestro navegador:

```
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
```

Cree un elemento `video` HTML para mostrar el vídeo:

```
<video id="hlsjs" class="player" controls autoplay></video>
```

Cree un reproductor hls.js, asígnele la URL HLS y dígale que se reproduzca:

```
const playerElement = document.getElementById('hlsjs');
const player = new Hls();
player.loadSource({{hlsUrl}});
player.attachMedia(playerElement);
player.on(Hls.Events.MANIFEST_PARSED, function() {
    video.play();
});
```

------

## Solución de problemas de HLS
<a name="how-hls-ex1-ts"></a>

En esta sección se describen los problemas que pueden surgir al utilizar HTTP Live Streaming (HLS) con Kinesis Video Streams.

**Topics**
+ [La recuperación de la URL de la sesión de streaming HLS se ha realizado correctamente, pero la reproducción no se puede realizar en el reproductor de vídeo](#troubleshooting-hls-playback)
+ [Latencia demasiado alta entre el productor y el reproductor](#troubleshooting-hls-latency)

### La recuperación de la URL de la sesión de streaming HLS se ha realizado correctamente, pero la reproducción no se puede realizar en el reproductor de vídeo
<a name="troubleshooting-hls-playback"></a>

Esta situación se produce cuando puede recuperar correctamente una URL de una sesión de streaming HLS con `GetHLSStreamingSessionURL`, pero el vídeo no se reproduce cuando se proporciona la URL a un reproductor de vídeo.

Para solucionar este problema, pruebe lo siguiente:
+ Determine si la transmisión de vídeo se reproduce en la consola de Kinesis Video Streams. Observe los errores que se muestren en la consola.
+ Si la duración del fragmento es inferior a un segundo, auméntela a un segundo. Si la duración del fragmento es demasiado corta, es posible que el servicio limite el reproductor porque solicita fragmentos de vídeo con demasiada frecuencia.
+ Compruebe que la URL de cada sesión de streaming HLS solo la esté utilizando un único reproductor. Si hay más de un reproductor utilizando la URL de una sesión de streaming HLS, el servicio puede recibir demasiadas solicitudes y limitarlas.
+ Comprueba que el reproductor sea compatible con todas las opciones que especifiques para la sesión de streaming HLS. Pruebe distintas combinaciones de valores para los parámetros siguientes: 
  + `ContainerFormat`
  + `PlaybackMode`
  + `FragmentSelectorType`
  + `DiscontinuityMode`
  + `MaxMediaPlaylistFragmentResults`

  Algunos reproductores multimedia (como HTML5 los reproductores móviles) normalmente solo admiten HLS con el formato MP4 contenedor f. Es posible que otros reproductores multimedia (como Flash y reproductores personalizados) solo admitan HLS con el formato contenedor MPEG TS. Se recomienda experimentar con el `ContainerFormat` parámetro para iniciar la solución de problemas.
+ Verifique que cada fragmento tenga un número coherente de pistas. Compruebe que los fragmentos de la transmisión no cambien entre tener una pista de audio y vídeo o solo una pista de vídeo. Compruebe también que los ajustes del codificador (resolución y velocidad de fotogramas) no cambien entre los fragmentos de cada pista.

### Latencia demasiado alta entre el productor y el reproductor
<a name="troubleshooting-hls-latency"></a>

Esta situación se produce cuando hay una latencia demasiado alta entre el momento en que se captura el vídeo y el momento en que se reproduce en el reproductor de vídeo.

El vídeo se reproduce a través de HLS en cada fragmento. Por lo tanto, la latencia no puede ser menor que la duración del fragmento. La latencia también incluye el tiempo necesario para almacenar los datos en el búfer y transferirlos. Si la solución requiere una latencia menor que un segundo, considere la posibilidad de utilizar la API `GetMedia` en su lugar.

Puede modificar los siguientes parámetros para reducir la latencia global, pero al ajustarlos, también puede reducirse la calidad de vídeo o puede aumentar la frecuencia de repetición de operaciones de almacenamiento en búfer.
+ **Duración del fragmento**: la duración del fragmento es la cantidad de vídeo entre las divisiones de la transmisión, controlada por la frecuencia de los fotogramas clave generados por el codificador de vídeo. El valor recomendado es de un segundo. Una duración de los fragmentos más breve significa que hay que esperar menos tiempo a que finalice el fragmento antes de transmitir los datos de vídeo al servicio. El servicio también procesa más rápido los fragmentos más cortos. Sin embargo, si la duración del fragmento es demasiado breve, aumenta la probabilidad de que el reproductor se quede sin contenido y tenga que detenerse y almacenar contenido en el búfer. Si la duración del fragmento es inferior a 500 milisegundos, el productor puede crear demasiadas solicitudes, lo que hace que el servicio las limite.
+ **Velocidad de bits**: una transmisión de vídeo con una velocidad de bits más baja tarda menos en leerse, escribirse y transmitirse. Sin embargo, una transmisión de vídeo con una tasa de bits inferior normalmente tiene una menor calidad de vídeo.
+ **Recuento de fragmentos en las listas de reproducción multimedia**: un reproductor sensible a la latencia solo debe cargar los fragmentos más recientes de una lista de reproducción multimedia. En su lugar, la mayoría de los reproductores comienzan con el fragmento más antiguo. Al reducir el número de fragmentos de la lista de reproducción, se reduce el tiempo de separación entre los fragmentos anteriores y los nuevos. Con un tamaño de lista de reproducción más pequeño, es posible que se omita un fragmento durante la reproducción si se produce un retraso en la adición de nuevos fragmentos a la lista de reproducción o si el reproductor tarda en recibir una lista de reproducción actualizada. Recomendamos usar de 3 a 5 fragmentos y usar un reproductor que esté configurado para cargar solo los fragmentos más recientes de una lista de reproducción. 
+ **Tamaño del búfer del reproductor**: la mayoría de los reproductores de vídeo tienen una duración mínima del búfer configurable, normalmente con un valor predeterminado de 10 segundos. Para obtener la latencia más baja, puede establecer este valor en 0 segundos. Sin embargo, si lo hace, el reproductor volverá a almacenar el búfer si hay algún retraso en la producción de fragmentos, ya que el reproductor no tendrá ningún búfer para absorber el retraso.
+ **Reproductor «catch up»**: los reproductores de vídeo no suelen captar automáticamente la reproducción hasta la parte delantera del búfer de vídeo si el búfer se llena, como cuando un fragmento retrasado provoca una acumulación de fragmentos pendientes de reproducción. Un reproductor personalizado puede evitarlo descartando fotogramas o aumentando la velocidad de reproducción (por ejemplo, a 1,1x) para alcanzar el principio del búfer. Esto hace que la reproducción se entrecorte o que aumente de velocidad mientras el reproductor recupera el tiempo perdido, y la repetición de operaciones de almacenamiento en búfer puede ser más frecuente debido a que el tamaño del búfer es pequeño.