Principes de base du streaming multimédia

Derek Herman

Jarooslav Polakovič

Dans cet article, vous allez découvrir le concept plus avancé du streaming multimédia. À la fin, vous devriez avoir une bonne compréhension des différents cas d'utilisation, protocoles et extensions du streaming. Commençons par une explication de ce qu'est réellement le streaming.

Le streaming multimédia est un moyen de diffuser et de lire du contenu multimédia petit à petit. Au lieu de charger un seul fichier, qui peut être lent s'il n'est pas optimisé pour le réseau, le lecteur lit un fichier manifeste décrivant comment le support cible est divisé en fragments de données individuels. Les fragments multimédias sont ensuite assemblés de manière dynamique au moment de l'exécution, probablement à des débits différents, que vous découvrirez ultérieurement.

N'oubliez pas que pour fournir un streaming sur votre site Web, le serveur doit accepter l'en-tête de requête HTTP Range. Pour en savoir plus sur l'en-tête Accept-Ranges, consultez l'article Balises <video> et <source>.

Cas d'utilisation des flux de données

La production de fragments multimédias et des fichiers manifestes nécessaires décrivant le flux n'est pas exactement simple, mais le streaming débloque des cas d'utilisation intéressants qu'il n'est pas possible d'atteindre simplement en pointant un élément <video> vers un ensemble de fichiers sources statiques. Vous en saurez plus sur l'ajout de contenus multimédias à une page Web dans une section ultérieure. Tout d'abord, vous devez connaître quelques cas d'utilisation de streaming multimédia si vous souhaitez aller plus loin que simplement charger plusieurs fichiers dans l'élément <video>.

• Le streaming adaptatif consiste à encoder les fragments multimédias dans plusieurs débits. Le fragment multimédia de la plus haute qualité qui correspond à la bande passante actuellement disponible du client est renvoyé au lecteur multimédia.
• La diffusion en direct permet d'encoder les fragments multimédias et de les rendre disponibles en temps réel.
• L'injection de fichiers multimédias consiste à injecter d'autres contenus multimédias, tels que des publicités, dans un flux sans que le lecteur n'ait à modifier la source multimédia.

Protocoles de streaming

Les deux protocoles de streaming les plus couramment utilisés sur le Web sont le streaming adaptatif dynamique sur HTTP (DASH) et le streaming en direct HTTP (HLS). Les lecteurs compatibles avec ces protocoles extraient le fichier manifeste généré, déterminent les fragments multimédias à demander, puis les combinent dans l'expérience multimédia finale.

Utiliser <video> pour lire un flux

De nombreux navigateurs ne les diffusent pas en mode natif. Bien qu'il existe une compatibilité native avec la lecture HLS, les navigateurs ne sont généralement pas compatibles avec la lecture de flux DASH natif. Cela signifie souvent qu'il ne suffit pas de faire pointer <source> dans l'élément <video> vers un fichier manifeste.

<video controls>
  <source src="manifest.mpd" type="application/dash+xml">
</video>

Ce qui peut sembler être un déficit est en fait une force déguisée. Les flux sont puissants, et les applications qui consomment des flux ont des besoins différents.

Les fichiers manifestes décrivent généralement plusieurs variantes d'un même support. Il peut s'agir de débits différents, de plusieurs pistes audio et même d'un même contenu multimédia encodé dans différents formats.

Certaines applications peuvent souhaiter conserver une plus grande quantité de vidéos dans la mémoire tampon, d'autres peuvent précharger les premières secondes de vidéo d'un épisode à venir, ou encore implémenter leur propre logique pour le streaming adaptatif. C'est là que vous devriez avoir une sorte de fonctionnalité intégrée du navigateur pour générer des flux multimédias à lire, et il se trouve qu'il y en a une.

Extensions de source multimédia

Heureusement, le W3C a défini ce que l'on appelle des Media Source Extensions (MSE), qui permettra à JavaScript de générer nos flux multimédias. En résumé, MSE permet aux développeurs d'associer un objet MediaSource à un élément <video> et de lui demander de lire toutes les données multimédias pompées dans les tampons associés à l'instance MediaSource.

Exemple de base

const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
  'sourceopen',
  () => {
    const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    const buffer = mediaSource.addSourceBuffer(mimeString);

    buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
  }
);

L'exemple simplifié ci-dessus illustre certains éléments:

• En ce qui concerne <video>, il reçoit des données multimédias depuis une URL.
• L'URL générée n'est qu'un pointeur vers une instance MediaSource.
• L'instance MediaSource crée une ou plusieurs instances SourceBuffer.
• Il nous suffit ensuite d'ajouter des données multimédias binaires dans le tampon, par exemple en utilisant fetch.

Bien que ces concepts de base soient simples et qu'il soit certainement possible d'écrire de A à Z un lecteur vidéo compatible DASH et HLS, la plupart des utilisateurs choisissent généralement l'une des solutions Open Source éprouvées qui existent déjà, telles que Shaka Player, JW Player ou Video.js, pour n'en citer que quelques-unes.

Cependant, nous avons créé une PWA multimédia de démonstration appelée Kino, qui montre comment développer votre propre site Web de streaming multimédia de base qui permet la lecture hors connexion de contenus multimédias à l'aide de l'élément <video> simple. Notre feuille de route prévoit, entre autres, la prise en charge des frameworks et de la gestion des droits numériques. Nous vous invitons à consulter cette page régulièrement ou à demander une fonctionnalité. Pour en savoir plus, consultez l'article PWA avec streaming hors connexion.

Format des fragments multimédias

Pendant longtemps, DASH et HLS nécessitaient que les fragments multimédias soient encodés dans différents formats. Toutefois, en 2016, les fichiers MP4 fragmentés (fMP4) standards sont désormais compatibles avec le format HLS, qui est également compatible avec DASH.

Les fragments vidéo utilisant le conteneur fMP4 et le codec H.264 sont compatibles avec les deux protocoles et peuvent être lus par la grande majorité des joueurs. Cela permet aux producteurs de contenu d'encoder leurs vidéos une seule fois, ce qui permet d'économiser du temps et de l'espace disque.

Pour obtenir une meilleure qualité et réduire la taille des fichiers, vous pouvez choisir d'encoder plusieurs ensembles de fragments multimédias à l'aide de formats plus efficaces tels que VP9. Toutefois, avant de commencer, vous devrez d'abord apprendre à préparer des fichiers multimédias pour le Web, et c'est la suite.