Riproduzione di video con HLS - 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 di video con HLS

Per visualizzare un flusso video Kinesis tramite HLS, devi prima creare una sessione di streaming tramiteGetHlsStreamingSessionURL. Questa operazione restituisce un URL (contenente un token di sessione) per l'accesso alla sessione HLS. 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 HLS:

  • Il supporto deve contenere video con codifica H.264 o H.265 e, facoltativamente, audio con codifica AAC. Nello specifico, l'ID codec della traccia 1 dovrebbe essereV_MPEG/ISO/AVC(per h.264) oV_MPEG/ISO/HEVC(per h.265). Facoltativamente, l'ID codec della traccia 2 dovrebbe essereA_AAC.

  • 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 o HEVC per il formato H.265 (Specifica MPEG-4 ISO/IEC 14496-15). Per informazioni sull'adattamento dei dati dei flussi a un formato specifico, consulta Flag di adattamento del NAL.

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

Esempio: Uso di HLS in HTML eJavaScript

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

Impostare il client Kinesis Video Streams per la riproduzione HLS

Per accedere al video in streaming con HLS, 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 HLS). L'applicazione recupera i valori necessari dalle caselle di input nella pagina 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);

Acquisire l'endpoint di contenuto archiviato Kinesis Video Streams per la riproduzione HLS

Dopo l'avvio dei client, recupera l'endpoint di contenuto archiviato Kinesis Video Streams per recuperare l'URL della sessione di streaming 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);

Recupero dell'URL della sessione di streaming HLS

Una volta ottenuto l'endpoint di contenuto archiviato, chiama ilGetHlsStreamingSessionURLAPI per recuperare l'URL della sessione di streaming 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);

Visualizzare il video in streaming con la riproduzione HLS

Una volta ottenuto l'URL della sessione di streaming HLS, 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 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');

L'esempio di codice seguente illustra come fornire l'URL della sessione di streaming a un lettore Google Shaka 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> ... 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');

L'esempio di codice seguente illustra come fornire l'URL della sessione di streaming a un lettore 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'); }); }

Risoluzione dei problemi correlati alla configurazione HLS

Se il flusso video non viene riprodotto correttamente, consulta Risoluzione dei problemi correlati alla configurazione HLS.

Esempio completato per la riproduzione HLS

È possibile scaricare o visualizzare il codice di esempio completo.