Byzanz - capture d'écran au format GIF

×

La mise en page de l'article a pu être modifiée

Pour une meilleure lecture vous pouvez changer le thème utilisé:

Je continue les petites modifications sur le site pour avoir un contenu plus lisible. Concernant les images, j'ai intégré MyZoombox et introduit le GIF animé (non, ça n'est pas réservé au Nyan Cat) mais sans outil adapté, c'est pas pratique.

Le GIF animé permet facilement de remplacer plusieurs images, l'avantage est de pouvoir alléger la page avec un contenu plus explicite (plutôt pratique et adapté dans le cas de tutoriel). Le GIF est aussi plus léger qu'une vidéo et pas de problème de compatibilité avec les navigateurs. En plus, il est relativement facile d'éditer ce type de fichier puisqu'il ne s'agit que d'un séquencement d'image.

byzanz_logo

Il existe différents logiciels de screencast mais l'utilisation de GIF animé est plutôt rare. Bien évidemment, il est possible de créer un GIF animé à partir de plusieurs images ou d'une vidéo mais cela nécessite une étape supplémentaire assez pénible. Pour le moment, Byzanz est le seul logiciel de screencast que j'ai trouvé avec l'utilisation de GIF animé et supporte aussi différents formats vidéo.
Il est plutôt minimaliste, ce qui rend son utilisation simple et rapide.

Installation

Byzanz est présent dans les dépôts officiels Debian. Pour installer l'application, lancer la commande:

en root
apt-get install byzanz
Version utilisée:
byzanz: 0.3.0+git20140619-1

Byzanz est composé de:

  • byzanz-record
  • byzanz-playback
  • et un applet pour Gnome

Utilisation

Byzanz permet d'enregistrer tout ce qui se passe sur le bureau. La capture peut se faire sur tout l'écran ou sur une zone définie. On peut aussi définir la durée de l'enregistrement et définir un délai avant le déclenchement de l'enregistrement. Byzanz supporte également différents type de fichier vidéo et le format interne byzanz. À partir de celui-ci, on peut générer un fichier sous n'importe quel format supporté par Byzanz.

utilisation Byzanz

Premier GIF animé

On va créer un premier enregistrement avec les options par défaut. Il nous suffit de définir le fichier de sortie.

en utilisateur
byzanz-record /tmp/premier.gif
Par défaut, l'enregistrement est définit pour une durée de 10 secondes et avec un délai avant le lancement de la capture de 1 seconde au format GIF.

Déterminer la durée de l'enregistrement

La durée de 10 secondes est un peu arbitraire et ne conviendra pas toujours. Pour ajuster la durée de la capture, on ajoute le paramètre --duration=60.

en utilisateur
byzanz-record  --duration=60  /tmp/60secondes.gif
Il est toujours mieux de définir une durée d'enregistrement plus longue.
Si vous avez fini votre démo avant la durée définit, ne toucher plus à rien! On pourra modifier l'enregistrement avec Gimp (modification de la durée et suppression d'images).

Déterminer le délai avant enregistrement

Il peut être utile de retarder le déclenchement de l'enregistrement. Le délai se définit avec le paramètre --delay=10.

en utilisateur
byzanz-record --delay=10 /tmp/delai10.gif

Adapter la durée de l'enregistrement à partir d'une commande

Pour une démonstration, il est pratique de commencer l'enregistrement au lancement d'un logiciel et se terminer à sa fermeture. Avec l'utilisation de la fonction --exec="keepassx, byzanz va exécuter keepassx et enregistrer, quelle que soit la durée, jusqu'à la fermeture du logiciel.

en utilisateur
byzanz-record --exec="keepassx" /tmp/keepassx.gif
Pour faciliter l'utilisation de byzanz, lancer Alt+F2 puis lancer votre commande. C'est plus pratique que le terminal.

Utiliser un autre format que le GIF

Pour définir le format de l'enregistrement. Il suffit d'utiliser l'une des extensions de fichier supportée par Byzanz.

  • GIF: pour la capture d'un écran relativement statique avec peu de couleurs (c'est l'extension utilisée par défaut).
  • WEBM: à utiliser pour l’enregistrement de contenu dynamique comme une vidéo et l'utilisation de vidéo HTML5. WEBM utilise VP8 video et Vorbis audio.
  • BYZANZ: c'est le format interne de Byzanz. Avec byzanz-playback on pourra convertir l’enregistrement dans n'importe quel format supporté par Byzanz.
  • FLV: enregistre au format Flash Video (méthode d'enregistrement sans perte).
  • OGG, OGV: enregistre au format Ogg Theora video. A utiliser pour l’enregistrement de contenu dynamique comme une vidéo.
en utilisateur
byzanz-record /tmp/byzanz.byzanz

Convertir un enregistrement .byzanz vers un autre format avec byzanz-playback

Pour convertir un fichier .byzanz dans un autre format, il faut utiliser la commande byzanz-playback. Si on souhaite convertir le fichier byzanz.byzanz au format WEBM, il suffit de lancer la commande:

en utilisateur
byzanz-playback /tmp/byzanz.byzanz /tmp/byzanz.webm

Vous pouvez comparer les formats en fonction du rendu et du poids du fichier.

Enregistrer le curseur de la souris

Il est également possible d'enregistrer le curseur de la souris.

en utilisateur
byzanz-record -c /tmp/cursor.gif

Enregistrer une partie de l'écran

On a la possibilité de choisir une région de l'écran à capturer. Il suffit de définir les coordonnées et les dimensions voulues.

  • --x=100: coordonnée en X du rectangle à capture
  • --y=100: coordonnée en Y du rectangle à capture
  • --height=200: hauteur du rectangle à capturer
  • --width=200: largeur du rectangle à capturer

Un exemple pour l’enregistrement d'une partie de l'écran:

en utilisateur
byzanz-record --x=100 --y=100 --height=200 --width=200 /tmp/region.gif
Il est toujours possible de recadrer l'image avec Gimp.

Modifier un GIF animé

L'avantage dans l'utilisation du format GIF est de pouvoir l'éditer facilement avec des outils comme GIMP. Le GIF animé est composé d'une succession d'image et afficher selon une durée définit.

Visualiser l'enregistrement

Avant de se lancer dans la modification d'un enregistrement, il convient de le visualiser.
Une fois le fichier ouvert dans Gimp, ouvrir le menu: Filtres > Animation > Rejouer l'animation.
On peut lire l'animation à vitesse normale ou image par image.

Modifier l'animation

Pour modifier l'animation et la durée entre chaque image, il suffit de modifier pour chacun des calques la valeur entre parenthèse (ici l’intervalle est de 100ms).
Une fois les modifications effectuées, on enregistre le fichier depuis le menu: Fichier > Exporter sous ou Maj+Ctrl+E.

Dans la fenêtre d'export, cocher la case Animation et Use disposal entered above for all frames pour garder l'animation comme définit pour chacun des calques.

GIMP modifier gif GIMP sauvegarder GIF

Il est aussi possible de définir le même intervalle pour toutes les images en indiquant le délai dans Delay between frames where unspecified et en cochant la case Use delay entered above for all frames.

Pour une démo, je conseille de définir un délai pour la première et dernière image de 1000ms.

Éditer les calques

Si on souhaite éditer les calques, il est préférable de recomposer chacune des image de l'animation (remplace le canal alpha par l'image précédente). Dans le menu: Filtres > Animation > Désoptimiser.

On peut maintenant éditer, supprimer et ajouter des calques.

Avant de sauvegarder et pour limiter la taille du fichier, il suffit de relancer le filtre dans le menu: Filtres > Animation > Optimiser (pour GIF).

Créer un GIF à partir d'une vidéo

Voici une solution relativement facile avec les outils standard avconv et imagemagick pour convertir une vidéo en GIF animé en 2 étapes. Il faudra simplement passer par une étape qui va générer les images à partir de la vidéo, puis une seconde qui va convertir les images en GIF animé.

Avant de se lancer dans la conversion, on va travailler dans un dossier temporaire pour se simplifier la vie.

en utilisateur
mkdir /tmp/temporaire && cd /tmp/temporaire

Ensuite, on va capturer un extrait de la vidéo qui sera convertit en images. On indique correctement:

  • le chemin de la vidéo: /tmp/video.mp4
  • le début de la capture: -ss 00:05:07 (on commence à partir de 5min07secondes)
  • la durée de la capture: -t 00:00:10 (extrait de 10 secondes)
  • le nombre d'image extraite par seconde: -r 10 (ici, 10 images par secondes)
  • le répertoire ou l'on copie les images: /tmp/temporaire/%03d.png
en utilisateur
avconv -i "/tmp/video.mp4" -ss 00:05:07 -t 00:00:10 -r 10 /tmp/temporaire/%03d.png

On peut vérifier le résultat en visualisant les images et on peut profiter de l'occasion pour enlever des images indésirables.

Maintenant, on est prêt pour la conversions des images en fichier GIF animé. On peut adapter les options de la commande.

  • temps de pause entre 2 images: -delay 10 (100ms)
  • animation en boucle: -loop 0
  • fichier de sortie: animation.gif
en utilisateur
convert -delay 10 -loop 0 *.png animation.gif
C'est fini, il ne reste plus qu'à récupérer le fichier animation.gif.

Ressources

Pour plus d'informations sur l'utilisation de Byzanz, consulter directement le manuel:
en utilisateur
man byzanz-record
man byzanz-playback

9 commentaires

antistress |

C'est dingue je me disais ce matin que j'allais chercher comment faire des gifs animés pour un tuto et voilà ton billet ;)

À noter que le gif animé n'est pas toujours plus léger qu'une vidéo contrairement aux idées reçues (exemple : http://libre-ouvert.toile-libre.org/data/documents/aldo_la_classe_320x192.ogv : 344,8 ko...)
Par contre pour un screencast le résultat sera bien propre avec un gif animé, comme dans ton exemple.
Et sinon, l'APNG par rapport au gif animé ?

antistress |

ha apparemment l'APNG n'est pas très répandu dans les navigateurs
https://fr.wikipedia.org/wiki/Animated_Portable_Network_Graphics#Navigateurs_Web

nIQnutn |

@antistress :
Effectivement le GIF animé n'est pas forcément plus léger mais pour une capture d'écran de bureau c'est bien souvent le cas (images statiques et pas de pb avec les couleurs).
Pour l'APNG, le pb c'est sa compatibilité. Pour du web c'est pas terrible du coup j'ai pas approfondi.

Elessar |

Pour les captures d'écran animées, le plus léger que j'avais pu trouver, c'était du WebM spécialement paramétré. En particulier, je l'avais réduit à quelque chose comme deux images par seconde. En fait, j'utilise habituellement du faux WebM, c'est à dire du Matroska avec VP8… plus sous-titres, qui ne font pas partie de ma spec WebM… Il faudra que je me mette au WebVTT.

nIQnutn |

@Elessar :
Le problème avec WebM, c'est qu'il n'est pas supporté par tous les navigateurs (http://www.w3schools.com/html/html5_video.asp).
C'est l'avantage du GIF de ce coté mais c'est clair qu'il est bien moins performant que WebM.

nIQnutn |

un article complet pour éditer un GIF animé: http://blog.dorian-depriester.fr/linux/creer-et-editer-des-gif-animes-avec-imagemagick

Jean-Yves |

Bonjour,

perso, sous Fedora 22, je n'ai pas l'option --exec=...

Elle n'est ni dans le man, ni dans le help et, si j'essaie de l'utiliser, on me renvoie un message ''Option erronée".

Y a-t-il plusieurs versions de byzanz ?

Ned |

Hello,

comme Jean-Yves ou presque : sous fedora 23 avec byzanz 0.3-0.15

nIQnutn |

@Jean-Yves :
@Ned :

Il faut regarder du coté des paquets Fedora.
Le man de byzanz-record

Fil RSS des commentaires de cet article

Écrire un commentaire