Lecture vidéo avec HLS - Amazon Kinesis Video Streams
Utilisez le AWS CLI pour récupérer l'URL d'une session de streaming HLSExemple : utilisez HLS en HTML et JavaScriptRésolution des problèmes liés au HLS

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 HLS

Le HTTP Live Streaming (HLS) est un protocole de communication en streaming multimédia basé sur le protocole HTTP standard du secteur. Vous pouvez utiliser le HLS pour visionner un flux vidéo Kinesis, que ce soit pour le visionner en direct ou pour visionner une vidéo archivée.

Vous pouvez utiliser HLS pour la lecture en direct. La latence est généralement comprise entre 3 et 5 secondes, mais elle peut être comprise entre 1 et 10 secondes, selon le cas d'utilisation, le lecteur et les conditions du réseau. Vous pouvez utiliser un lecteur tiers (tel que Video.js ou Google Shaka Player) pour afficher le flux vidéo en fournissant l'URL de la session de streaming HLS, soit par programmation, soit manuellement. Vous pouvez également lire une vidéo en saisissant l'URL de la session de streaming HLS dans la barre d'adresse des navigateurs Apple Safari ou Microsoft Edge.

Pour visionner un flux vidéo Kinesis à l'aide du protocole HLS, créez d'abord une session de streaming à l'aide de Get SessionURL. HLSStreaming Cette action renvoie une URL (contenant un jeton de session) permettant d'accéder à la session HLS. Vous pouvez alors utiliser cette URL dans un lecteur multimédia ou une application autonome pour afficher le flux.

Important

Les contenus multimédias envoyés à Kinesis Video Streams ne peuvent pas tous être lus via le protocole HLS. Consultez GetHLSStreamingSessionURL les exigences spécifiques en matière de téléchargement.

Utilisez le AWS CLI pour récupérer l'URL d'une session de streaming HLS

Suivez la procédure ci-dessous pour générer une URL AWS CLI de session de streaming HLS pour un flux vidéo Kinesis.

Pour les instructions d'installation, consultez le guide de AWS Command Line Interface l'utilisateur. Après l'installation, configurez le AWS CLI avec les informations d'identification et la région.

Vous pouvez également ouvrir le AWS CloudShell terminal sur lequel ils AWS CLI sont installés et configurés. Pour plus d'informations, consultez le Guide de l'utilisateur AWS CloudShell.

Récupérez le point de terminaison URL HLS pour votre flux vidéo Kinesis.

  1. Tapez ce qui suit dans le terminal :

    aws kinesisvideo get-data-endpoint \
  --api-name GET_HLS_STREAMING_SESSION_URL \
  --stream-name YourStreamName

    Vous recevrez une réponse qui ressemble à ceci :

    {
    "DataEndpoint": "https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com"
}

  2. Envoyez la demande d'URL de session de streaming HLS à ce point de terminaison renvoyé.

    Live

    Pour la lecture en direct, la liste de lecture multimédia HLS est continuellement mise à jour avec les derniers médias dès qu'ils sont disponibles. Lorsque vous jouez ce type de session dans un lecteur multimédia, l'interface utilisateur affiche généralement une notification « en direct », sans aucune commande permettant de choisir la position à afficher dans la fenêtre de lecture.

    Assurez-vous que vous téléchargez du contenu multimédia sur ce flux lorsque vous exécutez cette commande. 

    aws kinesis-video-archived-media get-hls-streaming-session-url \
  --endpoint-url https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com \
  --stream-name YourStreamName \
  --playback-mode LIVE
    Live replay

    Pour la rediffusion en direct, la lecture commence à partir d'une heure de début spécifiée. La liste de lecture multimédia HLS est également continuellement mise à jour avec les derniers médias dès qu'ils sont disponibles. La session continuera à inclure les médias nouvellement ingérés jusqu'à son expiration ou jusqu'à l'heure de fin spécifiée, selon la première éventualité. Ce mode est utile pour démarrer la lecture dès qu'un événement est détecté et continuer à diffuser en direct du contenu multimédia qui n'a pas encore été ingéré au moment de la création de la session.

    Déterminez un horodatage de début.

    Pour cet exemple, nous utilisons le format Unix Epoch en secondes. Reportez-vous à la section Horodatages du guide de l' AWS Command Line Interface utilisateur pour plus d'informations sur le formatage des horodatages.

    Voir UnixTime.org pour un outil de conversion.

    • 1708471800 est égal au 20 février 2024 15:30:00 GMT- 08:00

    Dans cet exemple, nous ne spécifions pas d'horodatage de fin, ce qui signifie que la session continuera à inclure le contenu multimédia récemment ingéré jusqu'à son expiration.

    Appelez l'GetHLSStreamingSessionURLAPI avec le mode LIVE_REPLAY de lecture et un sélecteur de fragments HLS spécifié.

    aws kinesis-video-archived-media get-hls-streaming-session-url \
  --endpoint-url https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com \
  --stream-name YourStreamName \
  --playback-mode LIVE_REPLAY \
  --hls-fragment-selector \
    "FragmentSelectorType=SERVER_TIMESTAMP,TimestampRange={StartTimestamp=1708471800}"
    On-demand

    Pour la lecture à la demande, la liste de lecture multimédia HLS contient le contenu multimédia spécifié par le sélecteur de fragments HLS. Lorsque ce type de session est lu dans un lecteur multimédia, l'interface utilisateur affiche généralement une commande de nettoyage permettant de choisir la position à afficher dans la fenêtre de lecture.

    Pour créer une URL pour une certaine section du flux, déterminez d'abord les horodatages de début et de fin.

    Pour cet exemple, nous utilisons le format Unix Epoch en secondes. Reportez-vous à la section Horodatages du guide de l' AWS Command Line Interface utilisateur pour plus d'informations sur le formatage des horodatages.

    Voir UnixTime.org pour un outil de conversion.

    • 1708471800 est égal au 20 février 2024 15:30:00 GMT- 08:00

    • 1708471860 est égal au 20 février 2024 15:31:00 GMT- 08:00

    Appelez l'GetHLSStreamingSessionURLAPI avec le mode ON_DEMAND de lecture et un sélecteur de fragments HLS spécifié.

    aws kinesis-video-archived-media get-hls-streaming-session-url \
  --endpoint-url https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com \
  --stream-name YourStreamName \
  --playback-mode ON_DEMAND \
  --hls-fragment-selector \
    "FragmentSelectorType=SERVER_TIMESTAMP,TimestampRange={StartTimestamp=1708471800,EndTimestamp=1708471860}"
    Note

    Les horodatages doivent être espacés de 24 heures l'un de l'autre, comme indiqué dans la documentation. HLSTimestampRange

    Vous recevrez une réponse qui ressemble à ceci :

    {
    "HLSStreamingSessionURL": "https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com/hls/v1/getHLSMasterPlaylist.m3u8?SessionToken=CiAz...DkRE6M~"
}
    Important

    Ne partagez pas et ne stockez pas ce jeton dans un endroit où une entité non autorisée pourrait y accéder. Le jeton donne accès au contenu du flux. Protégez le jeton avec les mêmes mesures que celles que vous utiliseriez avec vos AWS informations d'identification.

    Vous pouvez utiliser cette URL et n'importe quel lecteur HLS pour afficher le flux HLS.

    Par exemple, utilisez le lecteur multimédia VLC.

    Vous pouvez également écouter le HLS Stream en saisissant l'URL de la session de streaming HLS dans la barre d'adresse des navigateurs Apple Safari ou Microsoft Edge.

Exemple : utilisez HLS en HTML et JavaScript

L'exemple suivant montre comment utiliser le AWS SDK pour la JavaScript version 2 afin de récupérer une session de streaming HLS pour un flux vidéo Kinesis et de la lire sur une page Web. Cet exemple montre comment lire la vidéo dans les lecteurs suivants :

Consultez l'exemple de code complet et la page Web hébergée dans GitHub.

Importer le AWS SDK JavaScript pour les navigateurs

Dans la page Web, incluez la balise de script suivante pour importer le AWS SDK pour la JavaScript version 2 dans le projet.

<script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.490.0/aws-sdk.min.js"></script>

Pour plus d'informations, reportez-vous à la JavaScript documentation du AWS SDK.

Configuration du client Kinesis Video Streams

Pour accéder au streaming vidéo avec HLS, créez et configurez d'abord le client Kinesis Video Streams. Voir Configuration des informations d'identification dans un navigateur Web pour d'autres méthodes d'authentification.

const clientConfig = {
    accessKeyId: 'YourAccessKey',
    secretAccessKey: 'YourSecretKey',
    region: 'us-west-2'
};
const kinesisVideoClient = new AWS.KinesisVideo(clientConfig);

L'application récupère les valeurs nécessaires à partir des zones de saisie sur la page HTML.

Récupérez le point de terminaison pour la lecture HLS

Utilisez le client Kinesis Video Streams pour appeler GetDataEndpoint l'API afin de récupérer le point de terminaison.

const getDataEndpointOptions = {
    StreamName: 'YourStreamName',
    APIName: 'GET_HLS_STREAMING_SESSION_URL'
};
const getDataEndpointResponse = await kinesisVideoClient
    .getDataEndpoint(getDataEndpointOptions)
    .promise();
const hlsDataEndpoint = getDataEndpointResponse.DataEndpoint;

Ce code stocke le point de terminaison dans la hlsDataEndpoint variable.

Configuration du client multimédia archivé Kinesis Video Streams

Dans la configuration du client multimédia archivé Kinesis Video Streams, spécifiez le point de terminaison que vous avez obtenu à l'étape précédente.

const archivedMediaClientConfig = {
    accessKeyId: 'YourAccessKey',
    secretAccessKey: 'YourSecretKey',
    region: 'us-west-2',
    endpoint: hlsDataEndpoint
};
const kinesisVideoArchivedMediaClient = new AWS.KinesisVideoArchivedMedia(archivedMediaClientConfig);

Récupérez l'URL de la session de streaming HLS

Utilisez le client multimédia archivé Kinesis Video Streams pour appeler GetHLSStreamingSessionURL l'API afin de récupérer l'URL de lecture HLS.

const getHLSStreamingSessionURLOptions = {
    StreamName: 'YourStreamName',
    PlaybackMode: 'LIVE'
};
const getHLSStreamingSessionURLResponse = await kinesisVideoArchivedMediaClient
    .getHLSStreamingSessionURL(getHLSStreamingSessionURLOptions)
    .promise();
const hlsUrl = getHLSStreamingSessionURLResponse.HLSStreamingSessionURL;

Afficher le flux HLS sur la page Web

Lorsque vous disposez de l'URL de la session de streaming HLS, fournissez-la au lecteur vidéo. La méthode pour fournir l'URL au lecteur vidéo est spécifique au lecteur utilisé.

Video.js

Procédez comme suit pour importer Video.js et ses classes CSS dans le script de votre navigateur :

<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>

Créez un élément video HTML pour afficher la vidéo :

<video id="videojs" class="player video-js vjs-default-skin" controls autoplay></video>

Définissez l'URL HLS comme source de l'élément vidéo HTML :

const playerElement = document.getElementById('videojs');
const player = videojs(playerElement);
player.src({
    src: hlsUrl,
    type: 'application/x-mpegURL'
});
player.play();
Shaka

Procédez comme suit pour importer le lecteur Google Shaka dans le script de notre navigateur :

<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/2.4.1/shaka-player.compiled.js"></script>

Créez un élément video HTML pour afficher la vidéo :

<video id="shaka" class="player" controls autoplay></video>

Créez un lecteur Shaka en spécifiant l'élément vidéo et appelez la méthode de chargement :

const playerElement = document.getElementById('shaka');
const player = new shaka.Player(playerElement);
player.load(hlsUrl);
hls.js

Procédez comme suit pour importer le fichier hls.js dans le script de votre navigateur :

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

Créez un élément video HTML pour afficher la vidéo :

<video id="hlsjs" class="player" controls autoplay></video>

Créez un lecteur hls.js, donnez-lui l'URL HLS et dites-lui de jouer :

const playerElement = document.getElementById('hlsjs');
const player = new Hls();
player.loadSource(hlsUrl);
player.attachMedia(playerElement);
player.on(Hls.Events.MANIFEST_PARSED, function() {
    video.play();
});

Résolution des problèmes liés au HLS

Cette section décrit les problèmes que vous pouvez rencontrer lors de l'utilisation du protocole HTTP Live Streaming (HLS) avec Kinesis Video Streams.

Succès de la récupération de l'URL de la session de streaming HLS, mais échec de la lecture dans le lecteur vidéo

Cette situation se produit lorsque l'URL d'une session de streaming HLS peut être récupérée avec succès avec GetHLSStreamingSessionURL, mais que la vidéo ne peut pas être lue lorsque l'URL est fournie à un lecteur vidéo.

Pour résoudre ce problème, essayez l'une des actions suivantes :

  • Déterminez si le flux vidéo est lu dans la console Kinesis Video Streams. Prenez en compte toutes les erreurs que la console affiche.

  • Si la durée de fragment est inférieure à une seconde, augmentez-la à une seconde. Si la durée du fragment est trop courte, le service peut ralentir le lecteur car il demande trop fréquemment des fragments vidéo.

  • Vérifiez que chaque URL de session de streaming HLS est utilisée par un seul lecteur. Si plusieurs lecteurs utilisent une même URL de session de streaming HLS, le service peut recevoir un trop grand nombre de demandes et peut les limiter.

  • Vérifiez que votre lecteur prend en charge toutes les options que vous spécifiez pour la session de streaming HLS. Essayez des combinaisons différentes de valeurs pour les paramètres suivants :

    • ContainerFormat

    • PlaybackMode

    • FragmentSelectorType

    • DiscontinuityMode

    • MaxMediaPlaylistFragmentResults

    Certains lecteurs multimédias (tels que HTML5 les lecteurs mobiles) ne prennent généralement en charge le HLS qu'avec le format de MP4 conteneur f. Les autres lecteurs multimédias (tels que Flash et les lecteurs personnalisés) peuvent uniquement prendre en charge le HLS avec le format de conteneur MPEG TS. Nous vous recommandons de tester le ContainerFormat paramètre pour commencer à résoudre les problèmes.

  • Vérifiez que chaque fragment possède un nombre de pistes cohérent. Vérifiez que les fragments du flux ne changent pas entre une piste audio et vidéo et une piste vidéo uniquement. Vérifiez également que les paramètres de l'encodeur (résolution et fréquence d'images) ne changent pas entre les fragments de chaque piste.

Latence trop élevée entre producteur et lecteur

Cette situation se produit lorsque la latence est trop élevée entre le moment où la vidéo est capturée et le moment où elle est lue dans le lecteur vidéo.

La vidéo est relue via HLS par fragment. Par conséquent, la latence ne peut pas être inférieure à la durée du fragment. La latence inclut également le temps nécessaire à la mise en tampon et au transfert des données. Si votre solution nécessite une latence inférieure à une seconde, envisagez d'utiliser l'API GetMedia à la place.

Les paramètres suivants peuvent être ajustés pour réduire la latence globale, mais l'ajustement de ces paramètres peut également réduire la qualité de la vidéo ou augmenter le taux de remise en tampon.

  • Durée du fragment : la durée du fragment est la quantité de vidéo entre les divisions du flux, contrôlée par la fréquence des images-clés générées par l'encodeur vidéo. La valeur recommandée est d'une seconde. Le fait d'avoir une durée de fragment plus courte signifie que moins de temps s'écoule à attendre la fin du fragment avant de transmettre les données vidéo au service. Les fragments plus courts sont également plus rapides à traiter par le service. Toutefois, si la durée de fragment est trop courte, la probabilité augmente que le lecteur viendra à manquer de contenu et devra s'arrêter et mettre en tampon du contenu. Si la durée de fragment est inférieure à 500 millisecondes, le producteur peut créer un trop grand nombre de demandes, obligeant ainsi le service à les limiter.

  • Débit — Un flux vidéo avec un débit inférieur prend moins de temps à lire, à écrire et à transmettre. Toutefois, un flux vidéo avec une vitesse de transmission plus faible a généralement une plus faible qualité vidéo.

  • Nombre de fragments dans les listes de lecture multimédia : un lecteur sensible à la latence ne doit charger que les fragments les plus récents d'une liste de lecture multimédia. La plupart des joueurs commencent plutôt par le premier fragment. En réduisant le nombre de fragments dans la liste de lecture, vous réduisez l'intervalle de temps entre les fragments précédents et les nouveaux fragments. Avec une taille de playlist plus petite, il est possible qu'un fragment soit ignoré pendant la lecture si l'ajout de nouveaux fragments à la liste de lecture est retardé ou si le lecteur tarde à obtenir une liste de lecture mise à jour. Nous vous recommandons d'utiliser 3 à 5 fragments et d'utiliser un lecteur configuré pour charger uniquement les derniers fragments d'une playlist.

  • Taille de la mémoire tampon du lecteur — La plupart des lecteurs vidéo ont une durée de mémoire tampon minimale configurable, généralement de 10 secondes par défaut. Pour la latence la plus faible, vous pouvez définir cette valeur sur 0 seconde. Cependant, cela signifie que le joueur rebuffera en cas de retard de production de fragments, car le joueur n'aura pas de mémoire tampon pour absorber le retard.

  • Lecteur « catch up » : les lecteurs vidéo ne reprennent généralement pas automatiquement la lecture jusqu'au début de la mémoire tampon lorsque celle-ci est pleine, par exemple lorsqu'un fragment retardé entraîne un retard de lecture de fragments. Un lecteur personnalisé peut éviter ce problème en supprimant des trames ou en augmentant la vitesse de lecture (par exemple, à 1,1x) pour rattraper l'avant du tampon. Cela entraîne des saccades ou des accélérations de la lecture lorsque le lecteur rattrape son retard, et une remise en tampon peut être plus fréquente lorsque la taille du tampon est maintenue courte.