Riproduzione video con MPEG-DASH - Amazon Kinesis Video Streams

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Riproduzione video con MPEG-DASH

Per visualizzare un flusso video Kinesis tramite MPEG-DASH, è necessario innanzitutto creare una sessione di streaming tramiteOttieni DashStreamingSessionURL. Questa operazione restituisce un URL (contenente un token di sessione) per l'accesso alla sessione MPEG-DASH. Puoi quindi usare l'URL in un lettore multimediale o in un'applicazione autonoma per visualizzare il flusso.

Un flusso video Amazon Kinesis prevede i seguenti requisiti per la visualizzazione di video tramite MPEG-DASH:

  • Il supporto deve contenere video con codifica H.264 o H.265 e, facoltativamente, audio con codifica G.711 o AAC. Nello specifico, l'ID codec della traccia 1 deve essere V_MPEG/ISO/AVC (per h.264) o V_MPEGH/ISO/HEVC (per H.265). In alternativa, l'ID codec della traccia 2 deve essere A_AAC (per AAC) o A_MS/ACM (per G.711).

  • La conservazione dei dati deve essere superiore a 0.

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

  • La traccia audio (se presente) di ogni frammento deve contenere dati codec privati in formato AAC (Specifica AAC ISO/IEC 13818-7) o in formato MS Wave.

Esempio: Utilizzo di MPEG-DASH in HTML eJavaScript

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

Impostazione del client Kinesis Video Streams per la riproduzione MPEG-DASH

Per accedere al video in streaming con MPEG-DASH, prima di tutto crea e configura il client Kinesis Video Streams (per recuperare l'endpoint del servizio) e il client per i contenuti multimediali archiviati (per recuperare la sessione di streaming MPEG-DASH). L'applicazione recupera i valori necessari dalle caselle di input nella 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);

Acquisisci l'endpoint dei contenuti archiviati Kinesis Video Streams per la riproduzione MPEG-DASH

Dopo l'avvio dei client, recuperare gli endpoint dei contenuti archiviati Kinesis Video Streams in modo che sia possibile recuperare l'URL della sessione di streaming MPEG-DASH come segue:

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

Recuperare l'URL della sessione di streaming MPEG-DASH

Quando si dispone dell'endpoint dei contenuti archiviati, richiamare ilOttieni DashStreamingSessionURLAPI per recuperare l'URL della sessione di streaming MPEG-DASH come segue:

// 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 di streaming con la riproduzione MPEG-DASH

Una volta ottenuto l'URL della sessione di streaming MPEG-DASH, forniscilo al lettore video. Il metodo per fornire l'URL al lettore video dipende dal lettore usato.

L'esempio di codice seguente illustra come fornire l'URL della sessione di streaming a un lettore Google Shaka Player:

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

L'esempio di codice seguente illustra come fornire l'URL della sessione di streaming 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 completo

È possibilescarica o visualizza il codice di esempio completosulGitHub.