Principes de base du streaming multimédia

Derek Herman

Jaroslav Polakovič

Dans cet article, vous allez découvrir le concept plus avancé flux de données et, à la fin, avoir une bonne compréhension des différents les cas d'utilisation, les protocoles et les extensions des flux de données. Commençons par une ce qu'est réellement un flux.

Le streaming multimédia est un moyen de diffuser et de lire un contenu multimédia pièce. Au lieu de charger un seul fichier, ce qui peut être lent s'il n'est pas optimisé pour réseau, le lecteur lit un fichier manifeste décrivant l'état du contenu en fragments de données individuels. Les fragments multimédias sont ensuite assemblés dynamiquement lors de l'exécution, probablement à différents débits, que vous découvrirez plus tard.

Gardez à l'esprit que pour fournir un flux sur votre site Web, le serveur doit accepter l'en-tête de requête HTTP Range. En savoir plus sur les Accept-Ranges en-tête de la <video> et <source> sur les tags.

Cas d'utilisation des flux de données

La génération de fragments multimédias et des fichiers manifestes nécessaires décrivant le flux n'est pas est très simple, mais le traitement par flux ouvre des cas d'utilisation intéressants ne sont pas possibles en pointant simplement un élément <video> à un ensemble de fichiers sources statiques. Vous en saurez plus sur la façon de ajouter du contenu multimédia à 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 voulez aller plus loin charger plusieurs fichiers dans l'élément <video> ;

• Dans le streaming adaptatif, les fragments multimédias sont encodés en plusieurs les différents débits et le fragment multimédia de la plus haute qualité qui s'adapte aux besoins la bande passante actuellement disponible est renvoyée au lecteur multimédia.
• La diffusion en direct consiste à encoder et à rendre disponibles les fragments multimédias en temps réel.
• L'injection de médias consiste à injecter d'autres médias tels que des publicités dans sans que le lecteur ait à changer de source multimédia.

Protocoles de streaming

Les deux protocoles de streaming les plus couramment utilisés sur le Web sont les protocoles Dynamic Streaming adaptatif sur HTTP (DASH) et diffusion en direct HTTP (HLS) Les lecteurs prenant en charge ces protocoles récupéreront le fichier manifeste généré, déterminer les fragments de médias à demander, puis les combiner dans le expérience multimédia.

Utiliser <video> pour lire un flux

De nombreux navigateurs ne peuvent pas lire votre flux de manière native. Bien qu'il y ait certains Compatibilité native avec la lecture HLS, les navigateurs ne le sont généralement pas la lecture en streaming. Dans la plupart des cas, il ne suffit donc pas de pointer le <source> de l'élément <video> à un fichier manifeste.

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

Attention : Le code HTML est valide, mais il ne fonctionne pas. Les navigateurs ne sont pas compatibles de manière native avec la lecture du fichier manifeste DASH ajoutée à la propriété src.

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

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

Certaines applications peuvent vouloir conserver une plus grande quantité de vidéo dans la mémoire tampon, d'autres peuvent vouloir précharger les premières secondes d'une vidéo et certains souhaitent implémenter leur propre logique de streaming adaptatif. C'est là qu'il faut intégrer une fonction de navigateur pour générer des flux multimédias pour la lecture, et il se trouve qu'il y en a un.

Extensions Media Source

Heureusement, le W3C a défini quelque chose qui s'appelle Media Source Extensions (MSE). qui permettra à JavaScript de générer nos flux multimédias. En bref, MSE permet aux développeurs d'associer un objet MediaSource à un élément <video> et d'avoir il lit toutes les données médias gonflées dans les tampons joints au 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 avec fetch.

Bien que ces concepts de base soient simples et qu'il soit possible d'écrire Lecteur vidéo compatible DASH et HLS, la plupart des utilisateurs en choisissent un parmi les solutions Open Source matures qui existent déjà, comme Shaka Player, JW Player ou Video.js, pour n'en citer que quelques-uns.

Cependant, nous avons créé une PWA Media de démonstration appelée Kino, qui montre comment de développer votre propre site Web de base pour le streaming multimédia qui fournit la lecture de contenus multimédias hors connexion à l'aide de l'élément <video> simple. Il y a des plans de notre feuille de route pour appuyer, entre autres, les cadres légaux et la gestion des droits numériques caractéristiques. 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 exigé que les fragments de média soient encodés dans des . Depuis 2016, cependant, la compatibilité avec les fichiers MP4 fragmentés (fMP4) standards a été ajouté au format HLS, un format également compatible avec DASH.

Les fragments vidéo utilisant le conteneur fMP4 et le codec H.264 sont acceptés. par les deux protocoles et jouable par une grande majorité des joueurs. Cela permet aux producteurs de contenu d'encoder leurs vidéos une seule fois, ce qui permet de gagner du temps et d'espace disque.

Pour améliorer la qualité et réduire la taille des fichiers, vous pouvez opter pour encoder plusieurs ensembles de fragments multimédias à l'aide de formats plus efficaces tels que VP9, Mais avant d'aller plus loin, vous devrez d'abord apprendre à Préparez des fichiers multimédias pour le Web, et c'est la prochaine étape.