Encodage (créer des fichiers WebM)

On va faire chauffer les CPU !

Avertissement: cet article est obsolète !

Asseyez-vous confortablement, réglez la hauteur de votre siège et éclairez suffisamment la pièce. Oh accessoirement, ouvrez la fenêtre si votre ordinateur se prend un peu trop pour un convecteur électrique 🙂 Car aujourd’hui, nous allons voir comment encoder des fichiers vidéos au format WebM. Il y a fort à parier que vous n’avez jamais rencontré ce format de fichier pour des films partagés sur les réseaux P2P et les stockages de fichiers, et il y a bien une raison à cela: d’une part c’est un format crée il y a peu, et d’autre part son principal intérêt c’est le streaming vidéo en HTML 5, un cadre encore un peu expérimental.

Néanmoins: lorsqu’on veut proposer du streaming sans utiliser Flash ni aucun autre module propriétaire (type Silverlight, RealVideo, …), la norme HTML 5 est déjà incontournable. Pour plus d’informations sur les formats utilisés en HTML 5 et leur intégration, voir mon précédent article sur le sujet 🙂

Petits rappels avant de commencer: Un WebM est toujours de type WEBM-VP8-VORBIS.

  • WebM c’est le conteneur: il est dérivé du conteneur Matroska, connu pour sa grande flexibilité: c’est l’enveloppe permettant de « mélanger » correctement les flux audio, vidéo et sous-titres tout en gardant la chronologie et la synchronisation. (voir A Digital Media Primer for Geeks, chapitre « Containers »)
  • VP8 c’est le format du flux vidéo. Dernier né de On2 avant rachat par Google, VP8 comporte beaucoup des avantages de H.264 sur les formats antérieurs. Comme la plupart des formats vidéo actuels VP8 utilise une compression DCT des images: l’animation n’est pas crée à partir d’images fixes complètes, mais à partir de certaines images fixes et des images intermédiaires « différentielles » calculées à partir des images précédentes ou suivantes: le mécanisme d’inter-trames.
  • Vorbis c’est le format du flux audio. Pourfendeur du célèbre MPEG-1/2 Audio Layer 3 « MP3 » et rival de AAC. Ce format est la référence en matière de formats multimédia libres pour la compression audio à pertes, tout particulièrement pour la musique.

Pour lire les fichiers WebM, il y a de plus en plus de logiciels qui sont capables de faire le décodage. J’imagine que les logiciels les plus utiles pour ce format sont votre navigateur web (Firefox, Opera, Chrome-Chromium,..) et VideoLan VLC 🙂

C’est pour créer des fichiers WebM qu’on entre dans le vif du sujet: il n’existe encore que peu d’encodeurs, ils peuvent être lents et de mauvaise qualité.

  • VLC permet d’encoder au format WebM, mais je le déconseille: encodage très lent et qualité médiocre, car débit fixe.

La meilleure solution à l’heure actuelle, c’est utiliser la librairie d’encodage officielle (libvpx) avec un très répandu et puissant encodeur: ffmpeg.

Firefogg

FFmpeg est un encodeur en ligne de commande -stop, ne vous enfuyez pas: il existe de très nombreuses interfaces pour régler les paramètres d’encodage de ffmpeg. Vous préférez ce qui est gratuit, mis à jour tout seul, léger, et même avec code source libre ? Bonne nouvelle: vous pouvez installer Firefogg dans votre navigateur Firefox 🙂 Je recommande vivement à ceux qui ne sont pas experts en encodage vidéo.

Une fois le module installé, rendez-vous sur la page de création de vidéo.

  • cliquez sur le bouton « select file » et choisissez le fichier à encoder
  • choisissez le format (WebM). Vous pouvez utiliser un preset si applicable à votre vidéo, ou sinon choisir custom
  • si vous choisissez custom, de nombreuses options vous sont présentées, comme les dimensions, le nombre d’images par seconde, le débit, la qualité, ..
  • enfin, cliquez sur encode, choisissez l’emplacement d’enregistrement, et admirez le spectacle.

Dans ce processus, Firefogg passe à ffmpeg les paramètres qui vont bien et rapporte à l’utilisateur l’avancement de l’encodage (pourcentage et temps restant). La vidéo est bel et bien encodée avec votre processeur, et le résultat reste bien sur votre ordinateur. Ce n’est pas un service d’encodage en ligne.

Astuce: allez dans votre profil Firefox (local settingsapplication data ou appdataroaming selon votre version de Windows, ou simplement ~/.mozilla pour GNU/Linux et MacOS), dossier extensions/firefogg@firefogg.org/bin. Là dedans vous pouvez retrouver le fameux exécutable binaire de ffmpeg 😉 Vous pouvez également voir la ligne de commande passée à ffmpeg dans le gestionnaire des tâches.

GNU/Linux: compiler ffmpeg

Puisque je suis d’un naturel paresseux, je me suis fait un script bash pour utiliser ce qu’il y a de plus récent pour mon Linux Mint Debian 🙂 Les utilisateurs d’une distribution non dérivée de Debian/Ubuntu sauront adapter les commandes. Aussi: évitez d’utiliser l’option make -j 9 si vous ne possédez pas un processeur à 6 coeurs :mrgreen: -j 5 conviendra la plupart du temps. (c’est le nombre de tâches de compilation simultanées).

Ce script nettoie les compilations précédentes, met à jour les outils de développement, récupère et compile libmp3lame, clone les projets x264, libvpx et ffmpeg, récupère mkclean, et compile le tout. En 5 minutes c’est torché 🙂

#!/bin/bash

sudo apt-get update

sudo rm -r /usr/local/src/*

sudo apt-get remove ffmpeg x264 libx264-dev lame libmp3lame-dev libvpx

sudo apt-get install git yasm checkinstall build-essential libvorbis-dev libxvidcore-dev libfaac-dev libfaad2 libtheora-dev libdirac-dev libvdpau-dev libopenjpeg-dev libopencore-amrwb-dev libopencore-amrnb-dev libgsm1-dev libschroedinger-dev libspeex-dev libdc1394-22-dev libsdl1.2-dev libx11-dev

cd

wget http://sourceforge.net/projects/lame/files/lame/3.98.4/lame-3.98.4.tar.gz && tar -zxvf lame-3.98.4.tar.gz && rm lame-3.98.4.tar.gz

git clone git://git.videolan.org/x264.git

git clone http://git.chromium.org/webm/libvpx.git

git clone git://git.videolan.org/ffmpeg.git

# verifier version sur http://sourceforge.net/projects/matroska/files/mkclean/

wget http://sourceforge.net/projects/matroska/files/mkclean/mkclean-0.8.6.tar.bz2 && tar -jxvf mkclean-0.8.6.tar.bz2 && rm mkclean-0.8.6.tar.bz2

sudo mv ~/lame-3.98.4/ /usr/local/src/

sudo mkdir -p /usr/local/share/doc/lame/html /usr/local/share/man/man1 /usr/local/include

cd /usr/local/src/lame-3.98.4

./configure

make -j 9

sudo checkinstall –pkgversion « 1:3.98.4 » –backup=no –default

cd

sudo mv ~/x264/ /usr/local/src/

sudo mkdir -p /usr/local/lib/pkgconfig

cd /usr/local/src/x264

./configure –prefix=/usr –enable-shared

make -j 9

sudo checkinstall –pkgname=x264 –pkgversion « 20:0.svn`git rev-list HEAD | wc -l` » –backup=no –default

cd

cd ~/libvpx_src

mkdir « `date ‘+%d-%m-%Y’` »

cp ~/libvpx/ ~/libvpx_src/`date ‘+%d-%m-%Y’`

sudo mv ~/libvpx/ /usr/local/src/

cd /usr/local/src/libvpx

./configure

make -j 9

sudo checkinstall –backup=no –default

cd

sudo mv ~/ffmpeg/ /usr/local/src/

cd /usr/local/src/ffmpeg

./configure –enable-libmp3lame –enable-libxvid –enable-libvorbis –enable-gpl –enable-libfaac –enable-libtheora –enable-zlib –disable-shared –enable-libx264 –enable-libdirac –enable-nonfree –enable-version3 –enable-libschroedinger –enable-avfilter –enable-libspeex –enable-libopenjpeg –enable-libgsm –enable-postproc –enable-pthreads –enable-libopencore-amrnb –enable-libopencore-amrwb –enable-ffplay –enable-pthreads –prefix=/usr/local –enable-x11grab –enable-runtime-cpudetect –enable-bzlib –enable-libdc1394 –enable-libvpx –enable-librtmp –enable-openal

sudo make clean

make -j 9

sudo checkinstall –pkgname=ffmpeg –pkgversion « 20:0.8 » –backup=no –default

cd

sudo mv ~/mkclean-0.8.6/ /usr/local/src/

cd /usr/local/src/mkclean-0.8.6

./configure

make -j 9 -C mkclean

sudo checkinstall –backup=no –default
Le ffmpeg obtenu est très gros du coup: il contient plein de librairies.

L’encodage avec ffmpeg

  • Méthode standard:

ffmpeg -i "video" "video.webm"

  • Profil ancien de Fansub Streaming: encodage à partir des fichiers d’archive:

ffmpeg -i "video" -rc_lookahead 16 -keyint_min 0 -g 360 -skip_threshold 0 -level 116 -qmax 40 -threads 0 "video.webm"

  • Profil LD ancien de Fansub Streaming: encodage à partir des fichiers originaux (avec redimensionnement, tout le dossier):

#!/bin/bash

redimensionner() {

dimension= »$(ffmpeg -i « $1″ 2>&1 | grep Video: | sed ‘s/.*Video:.*, ([0-9]*x[0-9]*).*/1/’) »

local hauteur=${dimension#*x}

local largeur=${dimension%x*}

let « result=640*${hauteur}/${largeur} »

echo « -s 640x$result »;

}

for file in *; do

dim=`redimensionner « $file »`;

ffmpeg -i « $file » $dim -sws_flags lanczos -ac 2 -ar 48000 -rc_lookahead 16 -keyint_min 0 -g 360 -skip_threshold 0 -level 116 -qmax 40 -threads 0 « ${file%.???}.webm »

done

  • Profil HD version 1 de Fansub Streaming à partir du fichier original (HD 720p) avec optimisation mkclean, tout le dossier:

#!/bin/bash

for file in *; do

ffmpeg -i « $file » -vcodec libvpx -vb 800k -rc_lookahead 16 -keyint_min 0 -g 120 -skip_threshold 0 -level 116 -quality best -speed 0 -slices 4 -threads 6 -acodec libvorbis -ac 2 « ${file%.???}.webm »

mkclean –optimize –remux « ${file%.???}.webm » « ${file%.???}c.webm »

rm « ${file%.???}.webm »

mv « ${file%.???}c.webm » « ${file%.???}.webm »

done

  • Profil HD version 2 de Fansub Streaming pour AMV à partir du fichier original (HD 720p), 2 passes qualité haute avec optimisation mkclean, tout le dossier:

#!/bin/bash

for file in *; do

ffmpeg -i « $file » -vcodec libvpx -vb 2000k -rc_lookahead 16 -keyint_min 0 -g 120 -skip_threshold 0 -level 116 -quality best -speed 0 -slices 4 -threads 6 -pass 1 -passlogfile pass1.fpf -an « ${file%.???}.webm »

ffmpeg -i « $file » -vcodec libvpx -vb 2000k -rc_lookahead 16 -keyint_min 0 -g 120 -skip_threshold 0 -level 116 -quality best -speed 0 -slices 4 -threads 6 -pass 2 -passlogfile pass1.fpf -acodec libvorbis -ac 2 -y « ${file%.???}.webm »

rm pass1.fpf-0.log

mkclean –optimize –remux « ${file%.???}.webm » « ${file%.???}c.webm »

rm « ${file%.???}.webm »

mv « ${file%.???}c.webm » « ${file%.???}.webm »

done
(les séries sont encodées avec le profil HD v2, mais avec -vb 800k)

  • Profil HD version 3 de Fansub Streaming

#!/bin/bash

for file in *; do

ffmpeg -i « $file » -vcodec libvpx -qmin 10 -qmax 20 -rc_lookahead 25 -keyint_min 0 -g 360 -skip_threshold 0 -slices 2 -threads 6 -acodec libvorbis -y « ${file%.???}.webm »

mkclean –optimize –remux « ${file%.???}.webm » « ${file%.???}c.webm »

rm « ${file%.???}.webm »

mv « ${file%.???}c.webm » « ${file%.???}.webm »

done
Inspirez-vous des paramètres pour déterminer ce qui correspond le mieux à vos besoins 🙂 Testez, testez, testez. Jouez avec la variable « -vb » , essayez avec -quality good, comparez les temps d’encodage,..

D’autres encodeurs

Il existe pas mal d’encodeurs ou d’interfaces pour encodeur, capables de faire des fichiers WebM (Miro, Arista, ..). Ou sinon il y a une autre méthode: utiliser un service d’encodage en ligne (encoding.com, zencoder,..) ou carrément un portail vidéo pour récupérer la vidéo ensuite (Youtube). Mais je préviens: niveau qualitatif, c’est pas top 🙂

Avant de mettre le fichier WebM en ligne, vérifiez s’il est joué correctement par les navigateurs web.

Voilà, à présent vous savez créer et intégrer des streams WebM 🙂 Prochain article: la sauvegarde 😉

Streams: formats et intégration

Vidéo like a boss

Sur Fansub Streaming, il y a des streams 🙂 Autour de 1000 streams WebM, intégrés en HTML 5.

Dans cet article, nous allons apprendre la théorie sur le format WebM, ainsi que l’intégration de streams WebM dans les pages web 🙂 La création de ces fichiers WebM ça sera pour un article ultérieur.

HTML 5: la guerre des formats

Container Format typique du flux vidéo Format typique du flux audio Soumis à payement de royalities
OGG Theora Vorbis non
MP4 MPEG-4 AVC « H.264 » AAC oui (au MPEG-LA)
WEBM VP8 Vorbis non

Support des formats dans les navigateurs et version minimale:

Internet Explorer Mozilla Firefox Google Chrome Apple Safari Opera Software
OGG non oui (3.5) oui (3) non oui (10.50)
MP4 oui (9) non non oui (3.1) non
WEBM non oui (4) oui (6) non oui (10.60)

Contexte: le web s’est depuis toujours développé autour de formats exempts de tout payement de royalities: vous pouvez utiliser ces formats sans vous acquitter d’une licence d’utilisation auprès de son ayant-droit. Mais coup de théâtre lors de la normalisation HTML 5 portant sur les éléments multimédia (vidéo et audio): le W3C n’exige pas de la part des navigateurs qu’ils n’utilisent pas de formats soumis à royalities. Deux intervenants ont immédiatement pris position, l’un contre l’autre: Apple et Mozilla. Le premier, qui possède des droits sur le format MPEG-4 AVC, poussa ce format dans son navigateur Safari. Le second, qui défend l’ouverture du web, s’appuya sur le seul format libre de tout royalities ayant été suffisamment développé alors: Theora.

Problème: si MPEG-4 AVC est unanimement reconnu comme le format vidéo à compression DCT le plus puissant du moment, Theora accuse un sérieux retard technologique, qui le place à peine mieux que MPEG-4 ASP, très connu sous l’appellation « DivX » .

La situation aurait pu durer si entre temps un nouveau mastodonte n’entra pas dans l’arène: Google inclua à Chrome à la fois des décodeurs MPEG-4 AVC et Theora. Et puis ils rachetèrent On2, l’entreprise qui créa le format VP3 dont est dérivé Theora: entre temps ils avaient développé de nouveaux formats, dont leur plus récent: VP8. Ce dernier, Google le plaça sous une licence spécifique « royality-free » , ce qui autorisa les autres défenseurs du web ouvert de supporter le format. VP8 est l’un des formats les plus proches de MPEG-4 AVC, réduisant drastiquement la différence qualitative entre MPEG-4 AVC et les formats « royality-free » .

Si Google, Mozilla et Opera Software se sont clairement positionnés en faveur des formats « royality-free » , Microsoft ne soutient que mollement MPEG-4 AVC (support à partir de Internet Explorer 9 seulement, parts de marché faibles) et Apple se retrouve isolé. Surtout que Google, avec sa plateforme Youtube, a le rôle de chef d’orchestre en la matière (et ce d’autant plus que les iPhone et iPad ne supportent pas Flash).

Les meilleurs encodeurs à l’heure actuelle

Un format peut avoir une qualité médiocre comme excellente, tout dépend de la puissance de l’outil utilisé pour générer ce format. On ne peut que difficilement comparer des formats entre eux, par contre on peut bien comparer les encodeurs. Dont voici quelques uns les plus efficaces actuellement (meilleure qualité pour un poids équivalent)

Encodeur Éditeur Format Licence
libtheora Xiph Theora BSD
x264 VideoLAN MPEG-4 AVC GNU GPL
Squeeze Sorenson MPEG-4 AVC propriétaire
libvpx Google VP8 BSD renforcé

libtheora est notamment présent dans l’encodeur ffmpeg2theora (édité par v2v.cc), outil simple d’usage et qui tire le meilleur pour le format Theora. Développement faible, progrès faible.

x264 est un projet parallèle chapeauté par la fondation VideoLAN, est un encodeur extrêmement puissant et complet, très souvent utilisé. Développement soutenu, progrès faible.

Squeeze est un logiciel d’encodage multiformats qui arrive à de très bons résultats, tout particulièrement avec MPEG-4 AVC. Développement moyen, progrès moyen.

libvpx peut être utilisé en indépendant (vpxenc) ou couplé à la suite libre ffmpeg. Seul encodeur réellement fonctionnel pour le format VP8, il lui manque encore pas mal d’optimisations psychovisuelles et processeur, développement très soutenu, progrès rapide.

Intégration de streams WebM

En HTML, quand vous voulez intégrer une image, voici la syntaxe telle que recommandée par le W3C pour les normes HTML 4.01 et 5:

<img width="x" height="y" alt="z" src="/BT/image.png">

L’ordre des paramètres n’est pas important. L’intégration de streams WebM est similaire:

<video src="/BT/video.webm"></video>

Ça c’est le code minimal. On va ajouter les contrôles (lecture/pause, volume,..) et un avertissement qui sera affiché si le navigateur ne sait pas traiter la balise <video> du HTML 5:

<video src="/BT/video.webm" controls>Attention, votre navigateur ne sait pas traiter des vidéos HTML 5 !</video>

On va faire afficher la vidéo sur 250 pixels de largeur, et on va afficher une image tant que la vidéo n’est pas démarrée:

<video width="250px" poster="image.png" src="/BT/video.webm" controls></video>

Démarrer automatiquement la lecture de la vidéo ?:

<video src="/BT/video.webm" controls autoplay></video>

Intégrer à la fois du WebM et du MPEG-4 AVC:

<video controls>
<source src="/BT/video.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="/BT/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

Faire un fallback vers un stream Flash Megavideo:

<video controls>
<source src="/BT/video.webm" type="video/webm" onerror="fallback(this.parentNode)">
<object width="640" height="344">
<param name="movie" value="http://www.megavideo.com/v/poueeeeet"></param><param name="allowFullScreen" value="true"></param>
<embed src="http://www.megavideo.com/v/poueeeet" type="application/x-shockwave-flash" allowfullscreen="true" width="640" height="344"></embed></object>
</video>
<script type="text/javascript">function fallback(video) {
while (video.firstChild) {
if (video.firstChild instanceof HTMLSourceElement) {
video.removeChild(video.firstChild);
} else {
video.parentNode.insertBefore(video.firstChild, video);
}
}
video.parentNode.removeChild(video);
}
var video = document.getElementsByTagName('video')[0];
if (video.canPlayType) {
if (video.canPlayType("video/webm")) {
} else {
fallback(video);
}
}
</script>

Les développeurs en herbe pourront pousser plus loin en intégrant des événements javascript, des contrôles personnalisés, etc. Opera Software a publié un guide très complet 🙂

Vous pouvez bien sûr intégrer du code HTML 5 dans une page qui n’est pas entièrement en HTML 5 (par exemple sur Fansub Streaming, les streams sont intégrés en HTML 5 mais le reste de la page est en XHTML 1.0).

Sur Fansub Streaming, le code HTML 5 des streams HD est de ce type:

<video poster="http://www.fansub-streaming.eu/blog/wp-content/posterHD.svg" src="http://www.fansub-streaming.eu/stream/?v=/amv/VIDOK-Resistance.webm" controls></video>

Vous savez donc à présent comment intégrer des streams WebM sur votre site. Il ne vous reste plus qu’à savoir comment créer des streams WebM, et ça, ça sera le sujet d’un article ultérieur 🙂