Traitement des images de l’API Youtube avec du cache

Pas de SEO cette fois-ci, il faut bien varier les plaisirs! Sur un site sur lequel je travaille, nous utilisons l’API de Youtube couplée au CMS Drupal « hyper customisé ». Dès qu’une vidéo est uploadée sur Youtube dans un compte spécifique, elle apparaît automatiquement sur le site en question. Pour accéder aux vidéos Youtube sur le site, les internautes n’ont qu’à cliquer sur les images en provenance des serveurs Youtube avec ces URL:

http://img.youtube.com/vi/UxTmZulcQZ0/default.jpg (miniature par défaut)
(fullsize 480×360)
http://img.youtube.com/vi/UxTmZulcQZ0/1.jpg (miniature 1)
http://img.youtube.com/vi/UxTmZulcQZ0/2.jpg (miniature 2)
http://img.youtube.com/vi/UxTmZulcQZ0/3.jpg (miniature 3)

UxTmZulcQZ0 correspond à l’ID Youtube de la vidéo.

Exemple avec une image Youtube de l’ami Matt Cutts http://img.youtube.com/vi/UxTmZulcQZ0/0.jpg:

Problématique des images Youtube

Mais ces images ne me conviennent pas et/ou ne répondent pas à mes besoins, d’où cet article.
Deux raisons à cela:

1/ PageSpeed me renvoie une note de 92/100 pour ces images Youtube: Specify a cache validator + Leverage Browser Caching. Je veux 100/100 avec au moins un « Header Age » supérieur à 6 heures pour éviter qu’elles soient rechargées en permanence par les internautes.

2/ J’aimerais qu’elles soient personnalisées avec un petit picto dessus (type video/bouton Play) afin de guider l’internaute pour qu’il sache ce qui l’attend en cliquant sur l’image (à savoir une vidéo).

Comment faire? je vais utiliser un reverse proxy pour distribuer les images en provenance de Youtube comme ça je pourrai:

– Modifier les en-têtes des images (durée de vie plus longue pour éviter de recharger l’image régulièrement)
– Les mettre en cache (avec le mode disk_cache d’Apache)
– Les modifier pour ajouter un picto avec ImageMagick (manipuler les images en ligne de commande).

Mise en place du Reverse proxy

On va d’abord configurer notre zonefile DNS pour ajouter un sous-domaine dédié aux images Youtube qui dirigera vers l’Ip de notre serveur, par exemple pour vimg.mondomaine.com: vimg 10800 IN A 123.456.789.123.
Certains modules Apache vont être nécessaires: proxy, proxy_http, cache, disk_cache, expires, headers. On va les activer en supprimant les lignes en commentaires dans le fichier httpd.conf.
Un fois que votre serveur est prêt, on va ajouter une hôte virtuel dans la configuration du serveur Apache.
Il vous faudra changer le chemin du répertoire cache et votre sous-domaine ci-dessous:

<VirtualHost vimg.mondomaine.com>
ServerName vimg.mondomaine.com
proxyPass / http://i.ytimg.com/
proxyPassReverse / http://i.ytimg.com/
<IfModule mod_headers.c>
Header set Expires "Sat, 31 Dec 2012 23:59:00 GMT"
Header set Last-Modified "Sat, 29 Jan 2011 21:55:00 GMT"
Header set Cache-Control "max-age=3153600"
Header set Age "3153600"
Header unset Set-Cookie
Header unset Cookie
</IfModule>
<IfModule mod_cache.c>
<IfModule mod_disk_cache.c>
CacheRoot /usr/local/www/apache22/data/img.youtube.com
CacheEnable disk /
CacheIgnoreHeaders Age Date X-XSS-Protection X-Content-Type-Options Cache-Control
CacheDefaultExpire 157680000
CacheMaxExpire 157680000
CacheIgnoreCacheControl On
CacheDirLevels 2
CacheDirLength 1
</IfModule>
</IfModule>
</VirtualHost>

On vérifie que tout fonctionne après avoir redémarré Apache:

Linux: #/etc/init.d/apache22 restart
FreeBSD: #/usr/local/sbin/apachectl restart

http://vimg.mondomaine.com/vi/UxTmZulcQZ0/2.jpg affiche bien http://img.youtube.com/vi/UxTmZulcQZ0/2.jpg avec une durée de vie modifiée

Manipulation des images dans le cache d’Apache

On pourrait afficher un picto en superposition avec des div, du HTML et des CSS, mais pour alléger le code et éviter des affichages exotiques selon les différents navigateurs, j’ai décidé de les modifier en dur.

Il faut d’abord s’assurer qu’ ImageMagick est bien installé sur le serveur. (Ex FreeBSD: #cd /usr/ports/graphics/ImageMagick/ && make install clean).
Ensuite voici un petit script shell qu’il faudra lancer dans un cron toutes les 10 minutes par exemple. Il modifira toutes les images dans les sous-répertoire de cache de notre hôte virtuel d’Apache.
Pour ne pas traiter plusieurs fois les mêmes images, on modifie la date des fichiers que l’on traite au 1 Janvier 2000 si ils ont moins de 60 minutes, et du coup on ne traite que les nouvelles images. Voici le contenu du fichier /home/username/pictoyoutube.sh

#!/bin/sh
find /usr/local/www/apache22/data/img.youtube.com -mmin -60 -iname "*.data" -print > /home/username/imagelist.txt
WATERMARK="/home/username/play.png"
for fn in `cat /home/username/imagelist.txt`
do
echo "Working on $fn ..."
/usr/local/bin/composite -gravity center -dissolve 80 $WATERMARK $fn $fn
touch -m -t 0001010000 $fn
echo "Done!"
done
rm /home/username/imagelist.txt
exit 0

Il faut changer « username » par votre nom d’utilisateur sur le serveur (répertoire home) et copier l’image « play.png » qui s’affichera en superposition sur les thumbnails Youtube. Voici le résultat: