

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
<a name="dash-playback"></a>

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](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/API_reader_GetDASHStreamingSessionURL.html) 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, voir[GetDASHStreamingSessionURL exigences](video-playback-requirements.md#requirements-getdash).
+ 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](https://www.iso.org/standard/55980.html). Pour plus d'informations sur l'adaptation des données de flux à un format donné, voir [Indicateurs d'adaptation NAL](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/producer-reference-nal.html).
+ [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](https://www.iso.org/standard/43345.html)) ou au format MS Wave.](https://www-mmsp.ece.mcgill.ca/Documents/AudioFormats/WAVE/WAVE.html)

## Exemple : utilisation MPEG-DASH en HTML et JavaScript
<a name="dash-examp1e"></a>

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](https://github.com/google/shaka-player)
+ [dash.js](https://github.com/Dash-Industry-Forum/dash.js/wiki)

**Topics**
+ [Configuration du client MPEG-DASH Kinesis Video Streams pour la lecture](#dash-example-setup)
+ [Récupérez le point de terminaison MPEG-DASH de contenu archivé Kinesis Video Streams pour le visionner](#dash-example-endpoint)
+ [Récupérez l'URL de la session de MPEG-DASH streaming](#dash-example-session)
+ [Afficher la vidéo en streaming avec MPEG-DASH lecture](#dash-example-display)
+ [Exemple terminé](#dash-example-complete)

### Configuration du client MPEG-DASH Kinesis Video Streams pour la lecture
<a name="dash-example-setup"></a>

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
<a name="dash-example-endpoint"></a>

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
<a name="dash-example-session"></a>

Lorsque vous disposez du point de terminaison du contenu archivé, appelez l'[GetDASHStreamingSessionURL](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/API_reader_GetDASHStreamingSessionURL.html)API 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
<a name="dash-example-display"></a>

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](https://github.com/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](https://github.com/Dash-Industry-Forum/dash.js/wiki) : 

```
<!-- 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é
<a name="dash-example-complete"></a>

Vous pouvez [télécharger ou consulter l'exemple de code complet](https://github.com/aws-samples/amazon-kinesis-video-streams-hls-viewer/blob/master/index.html) sur GitHub.