Reproducción de vídeo con HLS

Para ver una transmisión de vídeo de Kinesis mediante HLS, primero cree una sesión de transmisión con la URL StreamingSessiongetHLS. 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.

Una transmisión de vídeo de Amazon Kinesis tiene los siguientes requisitos para proporcionar vídeo a través de HLS:

• Para la transmisión de vídeo, el soporte debe contener vídeo codificado en H.264 o H.265 y, opcionalmente, audio codificado en AAC. Específicamente, el ID de códec de la pista 1 debe ser V_MPEG/ISO/AVC (para H.264) o V_MPEG/ISO/HEVC (para H.265). De manera opcional, el ID del códec de la pista 2 debe ser. A_AAC Para la transmisión solo de audio, el ID del códec de la pista 1 debe serA_AAC.

• La retención de datos debe ser mayor o igual que 0.

• La pista de vídeo de cada fragmento debe contener datos privados del códec en la codificación de vídeo avanzada (AVC) para el formato H.264 o en HEVC para el formato H.265 (especificación MPEG-4 ISO/IEC 14496-15). Para obtener información sobre cómo adaptar la transmisión de datos a un formato determinado, consulte Marcas de adaptación de NAL.

• La pista de audio (si está presente) de cada fragmento debe contener datos privados del códec en formato AAC (especificación AAC ISO/IEC 13818-7).

Ejemplo: Uso de HLS en HTML y JavaScript

El siguiente ejemplo muestra cómo recuperar una sesión de streaming de 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

• Google Shaka Player

• hls.js

Configure el cliente Kinesis Video Streams para la reproducción en HLS

Para acceder a la transmisión de vídeo con HLS, primero cree y configure el cliente Kinesis Video Streams (para recuperar el extremo del servicio) y el cliente multimedia archivado (para recuperar la sesión de transmisión de HLS). La aplicación recupera los valores necesarios de los cuadros de entrada de la página HTML.

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

var protocol = $('#protocol').val();
var streamName = $('#streamName').val();

// Step 1: Configure SDK Clients
var options = {
    accessKeyId: $('#accessKeyId').val(),
    secretAccessKey: $('#secretAccessKey').val(),
    sessionToken: $('#sessionToken').val() || undefined,
    region: $('#region').val(),
    endpoint: $('#endpoint').val() || undefined
}
var kinesisVideo = new AWS.KinesisVideo(options);
var kinesisVideoArchivedContent = new AWS.KinesisVideoArchivedMedia(options);
            

Recupere el punto final del contenido archivado de Kinesis Video Streams para la reproducción en HLS

Una vez iniciados los clientes, recupere el extremo del contenido archivado de Kinesis Video Streams para recuperar la URL de la sesión de transmisión de HLS:

// Step 2: Get a data endpoint for the stream
console.log('Fetching data endpoint');
kinesisVideo.getDataEndpoint({
    StreamName: streamName,
    APIName: "GET_HLS_STREAMING_SESSION_URL"
    }, function(err, response) {
        if (err) { return console.error(err); }
        console.log('Data endpoint: ' + response.DataEndpoint);
        kinesisVideoArchivedContent.endpoint = new AWS.Endpoint(response.DataEndpoint);

Recupera la URL de la sesión de streaming de HLS

Cuando tenga el extremo del contenido archivado, llame a la API de URL getHLS para recuperar la StreamingSession URL de la sesión de transmisión de HLS:

// Step 3: Get a Streaming Session URL
var consoleInfo = 'Fetching ' + protocol + ' Streaming Session URL';
console.log(consoleInfo);
                    
...

else {
    kinesisVideoArchivedContent.getHLSStreamingSessionURL({
        StreamName: streamName,
        PlaybackMode: $('#playbackMode').val(),
        HLSFragmentSelector: {
            FragmentSelectorType: $('#fragmentSelectorType').val(),
            TimestampRange: $('#playbackMode').val() === "LIVE" ? undefined : {
                StartTimestamp: new Date($('#startTimestamp').val()),
                EndTimestamp: new Date($('#endTimestamp').val())
                }
            },
            ContainerFormat: $('#containerFormat').val(),
            DiscontinuityMode: $('#discontinuityMode').val(),
            DisplayFragmentTimestamp: $('#displayFragmentTimestamp').val(),
            MaxMediaPlaylistFragmentResults: parseInt($('#maxResults').val()),
            Expires: parseInt($('#expires').val())
        }, function(err, response) {
            if (err) { return console.error(err); }
            console.log('HLS Streaming Session URL: ' + response.HLSStreamingSessionURL);    
                

Muestra la transmisión de vídeo con reproducción HLS

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.

En el siguiente ejemplo de código, se muestra cómo proporcionar la URL de la sesión de streaming a un reproductor Video.js:

// VideoJS elements
<video id="videojs" class="player video-js vjs-default-skin" controls autoplay></video>
<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>
...

else if (playerName === 'VideoJS') {
var playerElement = $('#videojs');
playerElement.show();
var player = videojs('videojs');
console.log('Created VideoJS Player');
player.src({
    src: response.HLSStreamingSessionURL,
    type: 'application/x-mpegURL'
});
console.log('Set player source');
player.play();
console.log('Starting playback');

En el siguiente ejemplo de código, se muestra cómo proporcionar la URL de la sesión de streaming a un reproductor Google Shaka:

// Shaka Player elements
<video id="shaka" class="player" controls autoplay></video>
<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/2.4.1/shaka-player.compiled.js">
</script>

...

else if (playerName === 'Shaka Player') {
var playerElement = $('#shaka');
playerElement.show();
var player = new shaka.Player(playerElement[0]);
console.log('Created Shaka Player');
player.load(response.HLSStreamingSessionURL).then(function() {
    console.log('Starting playback');
});
console.log('Set player source');

En el siguiente ejemplo de código se muestra cómo proporcionar la URL de la sesión de streaming a un reproductor hls.js:

// HLS.js elements
<video id="hlsjs" class="player" controls autoplay></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

...

var playerName = $('#player').val();
if (playerName == 'HLS.js') {
    var playerElement = $('#hlsjs');
    playerElement.show();
    var player = new Hls();
    console.log('Created HLS.js Player');
    player.loadSource(response.HLSStreamingSessionURL);
    player.attachMedia(playerElement[0]);
    console.log('Set player source');
    player.on(Hls.Events.MANIFEST_PARSED, function() {
        video.play();
        console.log('Starting playback');
    });
}

Solución de problemas de HLS

Si la transmisión de vídeo no se reproduce correctamente, consulteSolución de problemas de HLS.

Ejemplo completo de reproducción en HLS

Puede descargar o ver el código del ejemplo completo.