Principes de base du streaming multimédia

Derek Herman

Jaroslav Polakovič

Dans cet article, vous allez découvrir le concept plus avancé du streaming multimédia. Vous devez 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 un traitement par flux.

Le streaming multimédia est un moyen de diffuser et de lire un contenu multimédia morceau par morceau. Au lieu de charger un seul fichier, ce qui peut être lent s'il n'est pas optimisé pour le réseau, le lecteur lit un fichier manifeste décrivant comment le contenu multimédia 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 à différents débits, que vous découvrirez plus tard.

N'oubliez pas que pour permettre la diffusion en 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 sur les 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éverrouille certains cas d'utilisation intéressants qu'il n'est pas possible d'obtenir simplement en pointant un élément <video> vers un ensemble de fichiers sources statiques. Vous découvrirez comment ajouter du contenu multimédia à une page Web dans une section ultérieure. Tout d'abord, vous devez connaître quelques cas d'utilisation de la diffusion multimédia en streaming si vous souhaitez aller plus loin que le simple chargement de plusieurs fichiers dans l'élément <video>.

• Le streaming adaptatif consiste à encoder les fragments multimédias selon plusieurs débits et à renvoyer au lecteur multimédia le fragment de contenu multimédia de qualité optimale qui s'adapte à la bande passante actuellement disponible du client.
• La diffusion en direct consiste à encoder les fragments multimédias et à les rendre disponibles en temps réel.
• L'injection de contenu multimédia 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 HTTP en direct (HLS). Les lecteurs compatibles avec ces protocoles extraient le fichier manifeste généré, identifient 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 peuvent pas lire votre flux de manière native. Bien qu'une lecture de flux HLS soit native, les navigateurs ne sont généralement pas compatibles avec la lecture de flux DASH native. Dans la plupart des cas, il ne suffit donc pas de faire pointer l'élément <source> de 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 les consomment ont des besoins différents.

Les fichiers manifestes décrivent généralement de nombreuses variantes d'un seul contenu multimédia. Pensez à différents débits, à plusieurs pistes audio et même au même contenu multimédia encodé dans différents formats.

Certaines applications peuvent souhaiter conserver une plus grande quantité de vidéo dans la mémoire tampon, d'autres le préchargement des premières secondes de la vidéo d'un épisode à venir ou encore implémenter leur propre logique pour le streaming adaptatif. Pour ce faire, il faudrait disposer d'une fonctionnalité de navigateur intégrée permettant de générer des flux multimédias pour la lecture. Il en existe donc un.

Extensions Media Source

Heureusement, le W3C a défini quelque chose appelé 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 faire lire toutes les données multimédias gonflé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 quelques é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 au tampon, par exemple en utilisant fetch.

Bien que ces concepts de base soient simples et qu'il soit possible de créer entièrement un lecteur vidéo compatible DASH et HLS, la plupart des utilisateurs choisissent généralement l'une des solutions Open Source matures qui existent déjà, comme Shaka Player, JW Player ou Video.js, pour n'en citer que quelques-unes.

Toutefois, nous avons créé une PWA Media de démonstration appelée Kino, qui montre comment développer votre propre site Web de base en streaming qui permet de lire des contenus multimédias hors connexion à l'aide de l'élément <video> simple. Notre feuille de route vise, entre autres, à intégrer des frameworks et la gestion des droits numériques. Nous vous invitons donc à consulter les mises à jour de temps en temps 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 ont nécessité d'encoder les fragments multimédias dans différents formats. Toutefois, en 2016, la compatibilité avec les fichiers MP4 fragmentés (fMP4) standards a été ajoutée au format HLS, un format é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 une grande majorité des lecteurs. Cela permet aux producteurs de contenu d'encoder leurs vidéos une seule fois, ce qui permet de gagner du temps et de l'espace disque.

Pour améliorer la 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 d'aller plus loin, vous devrez d'abord apprendre à préparer les fichiers multimédias pour le Web.