Lecture vidéo avec MPEG-DASH

Pour visionner un flux vidéo Kinesis à l'aide de MPEG-DASH, vous devez d'abord créer une session de streaming à l'aide de. GetDASHStreamingSessionURL Cette action renvoie une URL (contenant un jeton de session) permettant d'accéder à la MPEG-DASH session. Vous pouvez alors utiliser cette URL dans un lecteur multimédia ou une application autonome pour afficher le flux.

Un flux vidéo Amazon Kinesis doit répondre aux exigences suivantes pour la diffusion de vidéos via : MPEG-DASH

• Pour connaître les exigences relatives à la lecture de pistes de lecture vidéo en streaming, voirGetDASHStreamingSessionURL exigences.

• La conservation des données doit être supérieure à 0.

• La piste vidéo de chaque fragment doit contenir des données privées du codec dans le codage vidéo avancé (AVC) pour le H.264 format et le format HEVC pour le format. H.265 Pour plus d'informations, consultez la MPEG-4spécification ISO/IEC 14496-15. Pour plus d'informations sur l'adaptation des données de flux à un format donné, voir Indicateurs d'adaptation NAL.

• La piste audio (le cas échéant) de chaque fragment doit contenir des données privées du codec au format AAC (spécification AAC ISO/IEC 13818-7) ou au format MS Wave.

Exemple : utilisation MPEG-DASH en HTML et JavaScript

L'exemple suivant montre comment récupérer une session de MPEG-DASH streaming pour un flux vidéo Kinesis et la lire sur une page Web. Cet exemple montre comment lire la vidéo dans les lecteurs suivants :

• Google Shaka Player

• dash.js

Configuration du client MPEG-DASH Kinesis Video Streams pour la lecture

Pour accéder au streaming vidéo avec MPEG-DASH, créez et configurez d'abord le client Kinesis Video Streams (pour récupérer le point de terminaison du service) et le client multimédia archivé (pour récupérer MPEG-DASH la session de streaming). L'application récupère les valeurs nécessaires à partir des zones de saisie sur la page 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);

Récupérez le point de terminaison MPEG-DASH de contenu archivé Kinesis Video Streams pour le visionner

Une fois les clients initialisés, récupérez le point de terminaison de contenu archivé Kinesis Video Streams afin de pouvoir récupérer MPEG-DASH l'URL de la session de streaming comme suit :

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

Récupérez l'URL de la session de MPEG-DASH streaming

Lorsque vous disposez du point de terminaison du contenu archivé, appelez l'GetDASHStreamingSessionURLAPI pour récupérer l'URL de la session de MPEG-DASH streaming comme suit :

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

Afficher la vidéo en streaming avec MPEG-DASH lecture

Lorsque vous avez l'URL de la session de MPEG-DASH streaming, indiquez-la au lecteur vidéo. La méthode pour fournir l'URL au lecteur vidéo est spécifique au lecteur utilisé.

L'exemple de code suivant montre comment fournir l'URL de la session de streaming à un lecteur 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'exemple de code suivant montre comment fournir l'URL de session de streaming à un lecteur 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');
}

Exemple terminé

Vous pouvez télécharger ou consulter l'exemple de code complet sur GitHub.