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 G etDASHStreaming Session. URL Cette action renvoie un URL (contenant un jeton de session) pour accéder à la DASH session MPEG -. Vous pouvez ensuite l'utiliser 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 fournir une vidéo via MPEG - : DASH

• Pour connaître les exigences relatives à la lecture de pistes de lecture vidéo en streaming, voirG. URL Exigences relatives etDASHStreaming à la session.

• 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 format H.264 et HEVC pour le format H.265. Pour plus d'informations, consultez la spécification MPEG -4ISO/IEC14496-15. Pour plus d'informations sur l'adaptation des données de flux à un format donné, consultez la section NALAdaptation Flags.

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

Exemple : utilisation de MPEG - DASH dans HTML et JavaScript

L'exemple suivant montre comment récupérer une MPEG session de 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 Kinesis Video Streams MPEG pour la lecture DASH

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 la DASH session de streaming). L'application récupère les valeurs nécessaires dans les zones de saisie de la HTML page.

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 de contenu archivé Kinesis Video Streams MPEG pour le lire DASH

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 la URL session de streaming comme suit DASH :

 // 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 la MPEG session DASH de streaming URL

Lorsque vous avez le point de terminaison du contenu archivé, appelez la etDASHStreamingsession G URL API pour récupérer la MPEG session de DASH diffusion en continu URL 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 playback

Lorsque vous avez la MPEG session de DASH diffusion en continuURL, indiquez-la au lecteur vidéo. La méthode de mise URL à disposition du lecteur vidéo est spécifique au lecteur que vous utilisez.

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

L'exemple de code suivant montre comment fournir la session de streaming URL à 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.