« Adaptive bitrate streaming » avec Wowza et JWplayer

Live-Broadcast11-logo

De nos jours, certaines chaines de télévisions proposent sur leur site un streaming en direct de leurs émissions. Qu’il s’agisse d’un débat télévisé en prime-time ou d’une émission d’envergure nationale, la présence sur le web marque une longueur d’avance pour ces chaines, par rapport à leurs concurrents.

Dans cet article, nous allons aborder la technique dite « Adaptive bitrate streaming ». En règle générale, cette dernière consiste à envoyer le flux vidéo sur les devices cibles, en fonction de leur capacité et/ou de leur bande passante disponible.
En des termes plus simples, nous n'allons pas servir de la vidéo en 4K à un mobile connecté sur un réseau 3G ... 🙂

Côté client nous allons utiliser comme player vidéo JWPlayer. Nous allons choisir Wowza comme serveur de streaming.

fonctionnement

Installations

Pour JWplayer, nous pouvons avoir le player ainsi que la licence souhaitée ici : https://www.jwplayer.com/get-started/ .
Pour télécharger Wowza, rendez-vous ici : https://www.wowza.com/. L’installation est assez facile à effectuer (note : j’ai testé sous linux) :

  • Après avoir téléchargé l’exécutable, il faut s’assurer que l’on ait les droits nécessaires pour lancer l’installation. Pour cela il suffit de faire sudo chmod +x WowzaStreamingEngine-4.5.0-linux-installer.run
  • On lance l’installation par sudo ./WowzaStreamingEngine-4.5.0-linux-installer.run
  • Ensuite il suffit de suivre les instructions affichées

Wowza propose une licence gratuite dont l'utilisation est limitée dans le temps. Certaines fonctionnalités ne sont pas non plus disponibles avec cette licence.

Configurations et cas pratique

Pour que Wowza puisse « streamer » le flux vidéo qu’il reçoit en entrée, on doit créer une application « live ». L’outil de publication (VLC, Adobe Flash Media Encoder, Wirecast,…) postera le flux sur Wowza via rtmp://WOWZA_URL/WOWZA_APPLICATION/NOM_STREAM

  • WOWZA_URL : l’url à partir de laquelle on pourra contacter Wowza
  • WOWZA_APPLICATION : l’application live à créer comme mentionné ci-dessus
  • NOM_STREAM : le nom que portera le stream. Une application live peut accueillir plus d’un stream vidéo, c’est pour cela que cette valeur est importante pour différencier une vidéo d’une autre.

Création et configurations de l'application "live"

application-live

Après avoir renseigné le nom, il faudra choisir les types de streams que pourra délivrer notre application (PlayBack Types). Ce qui nous intéresse ici c’est surtout Apple HLS (pour les terminaux mobiles) et Adobe RTMP (pour les clients flash).

application-live-playback

Les transcoders

Maintenant nous allons dans la section « transcoders » pour permettre à l’application de renvoyer le flux à des résolutions et bitrates différents.

application-live-transrate
Allons dans Applications>Transcoder>Transrate. Dans notre cas nous voudrions que la vidéo en input soit re-streamée en 480p, 360p et 240p. Par la suite c’est le device qui choisira le flux qui lui conviendra le mieux.

Nous allons laisser les configs par défaut de ces entrées. Par exemple, la vidéo en 480p aura un bitrate de 480kbps, et une hauteur de 480px.

Le fichier SMIL

Le fichier SMIL (Synchronized Multimedia Integration Language) est une sorte de fichier XML. Il va regrouper tous les flux disponibles, et ce sera le fichier en input pour le player.
En gros, nous allons créer un fichier SMIL qui comprendra les 3 entrées (480p, 360p et 240p) crées ci-dessus.

application-live-smil

Pour chaque entrée, il faudra renseigner le flux re-streamé correspondant. Exemple l’entrée SMIL livestream_480p correspondra au flux livestream_480p

application-live-smil-480p

Quand ce sera fait pour les 3 entrées avec leur flux respectif, il faudra connecter le fichier SMIL à l’application. C’est de cette façon que cette dernière saura le reconnaître.

application-live-smil-connect

Intégration dans JWPlayer

Pour intégrer le streaming sur notre player, voici un exemple de code :

<!DOCTYPE html>
 <html lang="fr">
 <head>
 <script src="/js/jwplayer.js"></script>
 <script>jwplayer.key = "XXXXXX";</script>
 </head>
 <body>
     <div id="player"></div>
     <script> jwplayer("player").setup({
            sources: [{
             file: "http://WOWZA_URL/WOWZA_APPLICATION/smil:livestream.smil/jwplayer.smil"}, {
             file: "http://WOWZA_URL/WOWZA_APPLICATION/smil:livestream.smil/playlist.m3u8"
             }],
             width: "100%",
             aspectratio: "16:9",
             fallback: true,
             flashplayer: "/swf/jwplayer.flash.swf"
         }); 
 </body>

Dans « sources », le player charge en premier le flux RTMP. Si le client ne supporte pas, il chargera en « fallback » le flux HLS (m3u8).

Et ci-dessous le contenu du fichier livestream.smil

<smil>
  <head>
    <meta base="rtmp://WOWZA_URL/WOWZA_APPLICATION/_definst_"/>
  </head>
  <body>
    <switch>
      <video src="mp4:livestream_480p" system-bitrate="480000" height="480"/>
      <video src="mp4:livestream_360p" system-bitrate="350000" height="360"/>
      <video src="mp4:livestream_240p" system-bitrate="200000" height="240"/>
    </switch>
 </body>
</smil>

Tests de diffusion

On postant le flux sur rtmp://WOWZA_URL/WOWZA_APPLICATION/NOM_STREAM par VLC ou Wirecast (par exemple), nous aurons ceci dans la console d’administration de Wowza : Application > LiveStream > Incoming streams.

application-live-incoming

Ici nous avons biens le flux source ainsi que les 3 flux "transcodés" comme configurés plus haut.

Côté player nous aurons ce rendu. Nous remarquons les différents formats de vidéos que nous avons définis côté Wowza.

application-live-jwplayer

De cette manière ce sera au player de choisir automatiquement le flux qui lui conviendra le mieux. Cependant, nous pouvons choisir manuellement la qualité à afficher.

Conclusion

Wowza est vraiment LE serveur de streaming à recommander. Le transcodage de flux vers les devices mobiles est géré nativement. La console d'administration comprend des informations très complètes telles que l'utilisation CPU, bande passante, etc.
Les configurations serveurs sont effectuées automatiquement en fonction des ressources matérielles du serveur. Cependant, nous pouvons effectuer des configurations plus minutieuses.
Couplé avec JWPlayer, l'essentiel du travail et des configurations est fait en peu de temps. L’utilisation de ce player est simple. Par ailleurs Wowza nous le recommande fortement.
De plus les deux proposent un support technique de qualité.

Liens:
https://www.jwplayer.com/get-started/
https://www.wowza.com/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.