Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

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 Get SessionURL. DASHStreaming Cette action renvoie une URL (contenant un jeton de session) qui permet d’accéder à la session MPEG-DASH. 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 fournir de la vidéo via MPEG-DASH :

Exemple : utilisation de MPEG-DASH en HTML et JavaScript

L'exemple suivant montre comment récupérer une session de streaming MPEG-DASH 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 :

Configuration du client Kinesis Video Streams pour la lecture MPEG-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 la session de streaming MPEG-DASH). 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 de contenu archivé Kinesis Video Streams pour le lire au format MPEG-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 l'URL de la session de streaming MPEG-DASH 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 streaming MPEG-DASH

Lorsque vous disposez du point de terminaison du contenu archivé, appelez l'API Get DASHStreaming SessionURL pour récupérer l'URL de la session de streaming MPEG-DASH 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 lecture MPEG-DASH

Lorsque vous disposez de l'URL de la session de streaming MPEG-DASH, 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.