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. À la fin, vous devriez avoir une bonne compréhension des différents cas d'utilisation, protocoles et extensions de 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 des contenus multimédias par morceaux. 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 segments multimédias sont ensuite recousus 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 proposer le streaming sur votre site Web, le serveur doit prendre en charge 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 du streaming

La production de segments multimédias et des fichiers manifestes nécessaires décrivant le flux n'est pas tout à fait simple, mais le streaming ouvre des cas d'utilisation intéressants qui ne sont pas possibles simplement en pointant un élément <video> vers un ensemble de fichiers sources statiques. Vous découvrirez comment ajouter des contenus multimédias à une page Web dans une section ultérieure. Tout d'abord, vous devez connaître quelques cas d'utilisation du streaming multimédia si vous souhaitez aller plus loin que le simple chargement de plusieurs fichiers dans l'élément <video>.

• Le streaming adaptatif consiste à encoder les segments multimédias dans plusieurs débits. Le segment 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 consiste à encoder et à mettre à disposition des segments multimédias en temps réel.
• L'injection de contenu multimédia consiste à injecter d'autres contenus multimédias, comme des annonces, dans un flux sans que le lecteur 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 récupèrent le fichier manifeste généré, déterminent les segments multimédias à demander, puis les combinent dans l'expérience multimédia finale.

Utiliser <video> pour lire un flux

De nombreux navigateurs ne diffusent pas votre flux en mode natif. 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. Il peut s'agir de différents débits, de plusieurs pistes audio et même du 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. C'est là que vous auriez besoin d'une sorte de fonctionnalité de navigateur intégrée pour générer des flux multimédias à lire. Il se trouve qu'il en existe une.

Extensions de source multimédia

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é, le MSE permet aux développeurs d'associer un objet MediaSource à un élément <video> et de le lire quelle que soit la donnée multimédia injectée 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 plusieurs points:

• Pour <video>, il reçoit des données multimédias à partir d'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.
• Nous ajoutons ensuite des données multimédias binaires dans le tampon, par exemple à l'aide de fetch.

Bien que ces concepts de base soient simples et qu'il soit tout à fait possible d'écrire un lecteur vidéo compatible avec DASH et HLS à partir de zéro, la plupart des utilisateurs choisissent généralement l'une des solutions Open Source matures déjà disponibles, comme Shaka Player, JW Player ou Video.js, pour n'en citer que quelques-unes.

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

Format des segments 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 à 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 contenus d'encoder leurs vidéos une seule fois, ce qui fait gagner 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 segments multimédias à l'aide de formats plus efficaces tels que VP9. Toutefois, avant d'aller plus loin, vous devez d'abord apprendre à préparer des fichiers multimédias pour le Web.