Halte au buffering, oui à l’adaptative streaming !

Halte au buffering, oui à l’adaptative streaming !

Impatience ou frustration, le temps de chargement d’une vidéo ne doit plus être un problème. Voici la solution !

Que ce soit au moment de charger sur votre mobile une vidéo que vous souhaitez montrer à votre client pendant une démo ou au moment de regarder le dernier épisode de Game Of Thrones, quoi de plus rageant que la vidéo ne se charge pas ou que la qualité soit médiocre.

C’est un problème qu’on ne devrait plus rencontrer de nos jours. Le contenu de la vidéo importe peu si la diffusion est de trop basse qualité pour se charger ou pour retenir l’attention de l’utilisateur jusqu’à sa fin.

Si, comme moi, vous avez marmonné dans votre barbe « Franchement, pourquoi tu ne passes pas au streaming adaptatif » : vous avez raison. Le streaming adaptatif résout tous ces problèmes.

Le streaming adaptatif est une technique de diffusion vidéo qui ajuste la qualité du flux en temps réel en fonction de la bande passante et de la puissance CPU de l’utilisateur.

HLS et MPEG-DASH sont les deux formats les plus populaires en matière de streaming adaptatif. La diffusion adaptative d’un flux vidéo demande de mettre en ligne la vidéo avec différents niveaux de qualité et quelques fichiers additionnels, ce que HLS et MPEG-DASH ne gèrent pas de la même façon. Le travail nécessaire pour faire fonctionner tout cela est complexe et fastidieux, la plupart des services présents sur le marché ne proposent pas de solution complète, et ceux qui le font sont loin d’être gratuits.
Les sites web qui réussissent à maîtriser le streaming vidéo adaptatif sont peu nombreux, à cause des connaissances et du matériel requis : tout le monde n’a pas accès aux mêmes ressources et talents que Netflix ou YouTube.

Dans un premier temps, nous examinerons la façon dont fonctionne le streaming adaptatif, puis j’expliquerai exactement comment vous y prendre vous-même. C’est étonnamment facile lorsqu’on dispose des connaissances nécessaires et du SaaS approprié pour faire le gros du travail.

Comment fonctionne la diffusion adaptative de vidéos ?

Tout est dans le nom. Le flux vidéo s’adapte tout seul en fonction d’un ensemble de règles basées sur la bande passante, la charge du processeur et la résolution de l’utilisateur. Pour faire du streaming adaptatif, il faut pouvoir diffuser plusieurs versions de votre vidéo. La qualité et le débit seront différents pour chacune des variantes de la vidéo tout comme, potentiellement, leur format d’encodage et leur résolution. C’est ce qu’on peut considérer comme une amélioration progressive en matière de développement web.

A chaque fichier vidéo est attaché un index servant à spécifier des segments prédéfinis de la vidéo. La durée de ces segments est généralement de 10 secondes, en accordance avec le protocole HLS. S’ajoute également à ça une master playlist servant à indiquer les fragments ainsi que les informations les concernant au lecteur. Ce qui est plutôt cool, c’est que cette technologie reprend juste les spécifications du format de fichier M3U8. A l’origine, M3U8 était conçu pour les fichiers audios, comme par exemple les MP3, mais on l’utilise maintenant pour indiquer les sources audio et vidéo aux lecteurs multimédias.

Un lecteur vidéo de streaming adaptatif utilise les informations de la playlist pour décider laquelle des variantes vidéo disponibles correspond le mieux aux critères de l’utilisateur : état du réseau, charge du processeur ou résolution. Il peut opérer un changement de source pour chaque nouveau segment de 10 secondes si l’état du réseau change en cours de lecture.

 

Plus de details sur HLS et MPEG-DASH

HLS

Originellement créé par Apple pour le lecteur vidéo de l’iPhone, le format HLS est désormais communément utilisé par de nombreuses applications web HTML5. Votre vidéo devra être encodée avec les codecs H.264 ou HEVC/H.265, lesquels peuvent être décodés par n’importe lequel des principaux navigateurs. HLS découpe la vidéo en intervalles de 10 secondes avant de l’envoyer à l’utilisateur.

MPEG-DASH

MPEG-DASH est le concurrent le plus récent de HLS. Originellement créé pour fournir une alternative à HLS, il présente quelques avantages sur ce dernier, notamment en sa qualité de logiciel open-source : la communauté toute entière des producteurs de contenu peut contribuer à ses modifications et mises à jour. MPEG-DASH est universellement supporté et n’a pas de codec de choix, ce qui permet à ses utilisateurs d’encoder leurs vidéos sans avoir à se préoccuper du support codec. Il bénéficie d’un temps de latence inférieur à celui de HLS, et permet l’insertion de publicités.

 

Do it yourself

Comme dit plus haut, il est nécessaire pour diffuser des vidéos en streaming adaptatif de générer plusieurs versions de la vidéo, d’y attacher un index pour chacune des variantes et d’inclure un master playlist. Les formats et types d’encodage pour HLS et MPEG-DASH varient pour chacun de ces fichiers. Si vous voulez streamer en utilisant ces deux formats, la quantité de travail à fournir doublera pour chacune des vidéos que vous souhaitez diffuser. De plus, il est considéré comme une bonne pratique de diffuser séparément vidéo et audio pour MPEG-DASH. Tout ceci est complexe et chronophage.

Si vous êtes développeur, vous pourriez trouver gratifiant de dépoussiérer vos compétences en FFMPEG pour créer toutes les sources vous-même. Ce pourrait être un projet intéressant, mais pour le commun des mortels qui doit composer avec le passage à l’échelle et les utilisateurs néophytes, cette option n’est tout simplement pas viable.
C’est ici que Cloudinary entre en scène!

En plus d’offrir le nec plus ultra en matière de solution de gestion d’images, Cloudinary a pris le train du streaming vidéo en marche, proposant un max de fonctionnalités remarquables pour les vidéos.

Cloudinary a créé plusieurs profils de streaming prédéfinis pour vous faciliter la vie. Chaque profil de streaming correspond à un ensemble de définitions de variations de vidéos, variant en fonction de la qualité, du débit et de l’encodage. Un profil peut par exemple spécifier 10 variations différentes, de la meilleure qualité possible à l’audio uniquement. L’API de Cloudinary permet également la création de profils personnalisés.

Après avoir sélectionné votre profil, mettez en ligne votre fichier vidéo en utilisant l’eager transformation de Cloudinary qui donne pour instruction au système de générer la totalité des fichiers requis pour ce profil au format HLS ou MPEG-DASH. Si vous voulez une diffusion dans les deux formats, rajoutez deux eager transformations à votre ligne de commande pendant la mise en ligne. Cliquez ici pour en apprendre plus sur les profils de streaming.

cloudinary.v2.uploader.upload(
  'awesome.mp4',
  {
    resource_type: 'video',
    eager: [
      { format: 'm3u8', streaming_profile: 'for_in_the_metro' },
      { format: 'mpd', streaming_profile: 'for_in_the_metro' }
    ],
    eager_async: true,
    eager_notification_url: 'https://timbenniks.nl/notify',
    public_id: 'awesome'
  },
  result => console.log(result)
)

Voici à quoi ressemble le profil de streaming expédié au lecteur :

#EXTM3U
#EXT-X-STREAM-INF:BANDWIDTH=558000,CODECS="avc1.66.30,mp4a.40.2",RESOLUTION=640x360
/cloudinary/video/upload/br_2m,c_limit,h_360,vc_h264:baseline:3.0,w_640/awesome.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=494000,CODECS="avc1.4d001f,mp4a.40.2",RESOLUTION=640x360
/cloudinary/video/upload/br_5500k,c_limit,h_720,vc_h264:main:3.1,w_1280/awesome.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=494000,CODECS="avc1.4d001f,mp4a.40.2",RESOLUTION=640x360
/cloudinary/video/upload/br_3500k,c_limit,h_540,vc_h264:main:3.1,w_960/awesome.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=333000,CODECS="avc1.66.30,mp4a.40.2",RESOLUTION=480x270
/cloudinary/video/upload/br_800k,c_limit,h_270,vc_h264:baseline:3.0,w_480/awesome.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=219000,CODECS="mp4a.40.2",RESOLUTION=320x180
/cloudinary/video/upload/br_192k,c_limit,h_240,w_320/awesome.m3u8

Une fois tout ceci en place, il ne vous manque plus qu’un lecteur vidéo capable de gérer soit HLS, soit MPEG-DASH. Il en existe plusieurs, en plus de celui créé par Cloudinary, qui est assez riche en fonctionnalités.

Je parlerai bientôt du processus de manipulation des vidéos permettant de les rendre adaptatives, afin de n’avoir plus besoin que d’un seul fichier vidéo pour toutes tailles d’écran ou les effets sophistiqués que vous souhaitez rajouter.

En attendant, éclatez-vous avec le streaming adaptatif !

Article original : https://timbenniks.nl/writings/how-to-deliver-video-the-right-way/

Article traduit par Valtech.