Riproduzione video con MPEG - DASH

Per visualizzare uno streaming video Kinesis utilizzando MPEG -DASH, devi prima creare una sessione di streaming utilizzando G etDASHStreaming Session. URL Questa azione restituisce un URL (contenente un token di sessione) per accedere alla DASH sessione MPEG -. È quindi possibile utilizzarlo URL in un lettore multimediale o in un'applicazione autonoma per visualizzare lo streaming.

Uno streaming video di Amazon Kinesis presenta i seguenti requisiti per la fornitura di video tramiteMPEG: DASH

• Per i requisiti di riproduzione dei brani video in streaming, consulta. G etDASHStreaming Requisiti della sessione URL

• La conservazione dei dati deve essere superiore a 0.

• La traccia video di ogni frammento deve contenere dati privati del codec in Advanced Video Coding (AVC) per il formato H.264 e per il formato H.265. HEVC Per ulteriori informazioni, vedere MPEG -4 specific/14496-15. ISO IEC Per informazioni sull'adattamento dei dati di flusso a un determinato formato, vedere NAL Adaptation Flags.

• La traccia audio (se presente) di ogni frammento deve contenere dati privati del codec nel AAC formato (AACspecificazioneISO/IEC13818-7) o nel formato MS Wave.

Esempio: utilizzo di - in e MPEG DASH HTML JavaScript

L'esempio seguente mostra come recuperare una MPEG sessione di streaming per uno DASH streaming video Kinesis e riprodurla in una pagina Web. L'esempio mostra come riprodurre video con i lettori seguenti:

• Google Shaka Player

• dash.js

Configurare il client Kinesis Video Streams MPEG per la riproduzione DASH

Per accedere ai video in streaming con MPEG -DASH, crea e configura innanzitutto il client Kinesis Video Streams (per recuperare l'endpoint del servizio) e il client multimediale archiviato (per MPEG recuperare la sessione di streaming). DASH L'applicazione recupera i valori necessari dalle caselle di input della pagina. 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);

Recupera l'endpoint dei contenuti archiviati di Kinesis Video Streams per la riproduzione MPEG DASH

Dopo l'avvio dei client, recupera l'endpoint dei contenuti archiviati di Kinesis Video Streams in modo da poter recuperare la sessione di streaming come segue: MPEG DASH URL

 // 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);

Recupera la sessione di streaming MPEG DASH URL

Quando hai l'endpoint dei contenuti archiviati, chiama G etDASHStreaming Session URL API per recuperare la sessione di DASH streaming come MPEG segue: URL

// 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);
                

Visualizza il video in streaming con - playback MPEG DASH

Quando hai la MPEG sessione di DASH streamingURL, forniscila al lettore video. Il metodo per fornire il file URL al lettore video è specifico per il lettore utilizzato.

Il seguente esempio di codice mostra come fornire la sessione di streaming URL a un lettore 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');
}

Il seguente esempio di codice mostra come fornire la sessione di streaming URL a un lettore 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');
}

Esempio completato

È possibile scaricare o visualizzare il codice di esempio completato su GitHub.