Reproducción de vídeo con MPEG-DASH

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.

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.

Para ver una transmisión de vídeo de Kinesis mediante MPEG-DASH, primero debe crear una sesión de streaming mediante Get SessionURL. DASHStreaming Esta acción devuelve una URL (que contiene un token de sesión) que permite tener acceso a la sesión MPEG-DASH. 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 MPEG-DASH:

Ejemplo: usar MPEG-DASH en HTML y JavaScript

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

Configurar el cliente de Kinesis Video Streams para la reproducción de MPEG-DASH

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

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 terminal de contenido archivado de Kinesis Video Streams para reproducirlo en MPEG-DASH

Una vez iniciados los clientes, recupere el punto final de contenido archivado de Kinesis Video Streams para poder recuperar la URL de la sesión de streaming MPEG-DASH de la siguiente manera:

 // Step 2: Get a data endpoint for the stream
console.log('Fetching data endpoint');
kinesisVideo.getDataEndpoint({
    StreamName: streamName,
    APIName: "GET_DASH_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);

Recupere la URL de la sesión de streaming MPEG-DASH

Cuando tengas el punto final del contenido archivado, llama a la API Get DASHStreaming SessionURL para recuperar la URL de la sesión de streaming de MPEG-DASH de la siguiente manera:

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

if (protocol === 'DASH') {
    kinesisVideoArchivedContent.getDASHStreamingSessionURL({
        StreamName: streamName,
        PlaybackMode: $('#playbackMode').val(),
        DASHFragmentSelector: {
            FragmentSelectorType: $('#fragmentSelectorType').val(),
            TimestampRange: $('#playbackMode').val() === "LIVE" ? undefined : {
                StartTimestamp: new Date($('#startTimestamp').val()),
                EndTimestamp: new Date($('#endTimestamp').val())
            }
        },
        DisplayFragmentTimestamp: $('#displayFragmentTimestamp').val(),
        DisplayFragmentNumber: $('#displayFragmentNumber').val(),
        MaxManifestFragmentResults: parseInt($('#maxResults').val()),
        Expires: parseInt($('#expires').val())
    }, function(err, response) {
        if (err) { return console.error(err); }
        console.log('DASH Streaming Session URL: ' + response.DASHStreamingSessionURL);
                

Muestre el vídeo en streaming con la reproducción MPEG-DASH

Cuando tenga la URL de la sesión de streaming MPEG-DASH, 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 Google Shaka:

// Step 4: Give the URL to the video player.

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

var playerName = $('#player').val();

if (playerName === 'Shaka Player') {
    var playerElement = $('#shaka');
    playerElement.show();

    var player = new shaka.Player(playerElement[0]);
    console.log('Created Shaka Player');

    player.load(response.DASHStreamingSessionURL).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 dash.js:

<!-- dash.js Player elements -->
<video id="dashjs" class="player" controls autoplay=""></video>
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>

...

var playerElement = $('#dashjs');
playerElement.show();

var player = dashjs.MediaPlayer().create();
console.log('Created DASH.js Player');

player.initialize(document.querySelector('#dashjs'), response.DASHStreamingSessionURL, true);
console.log('Starting playback');
console.log('Set player source');
}

Ejemplo completo

Puede descargar o ver el código de ejemplo completo en GitHub.